diff options
Diffstat (limited to 'files/fr/web')
1237 files changed, 9965 insertions, 10958 deletions
diff --git a/files/fr/web/api/abortsignal/index.html b/files/fr/web/api/abortsignal/index.html index 5e4a319cbf..11a48ef3d1 100644 --- a/files/fr/web/api/abortsignal/index.html +++ b/files/fr/web/api/abortsignal/index.html @@ -35,13 +35,13 @@ translation_of: Web/API/AbortSignal <h2 id="Exemples">Exemples</h2> -<p>Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a>.</p> +<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> <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> -<p>Lorsque la <a href="https://developer.mozilla.org/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> +<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> -<pre class="brush: js notranslate">var controller = new AbortController(); +<pre class="brush: js">var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector('.download'); @@ -64,7 +64,7 @@ function fetchVideo() { }</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> +<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> <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> @@ -93,6 +93,6 @@ function fetchVideo() { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a></li> + <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> diff --git a/files/fr/web/api/analysernode/analysernode/index.html b/files/fr/web/api/analysernode/analysernode/index.html index c3ef05a74c..a10fd3ee15 100644 --- a/files/fr/web/api/analysernode/analysernode/index.html +++ b/files/fr/web/api/analysernode/analysernode/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AnalyserNode/AnalyserNode --- <p>{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</span></p> +<p>Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</p> <h2 id="Syntax">Syntax</h2> @@ -17,11 +17,11 @@ translation_of: Web/API/AnalyserNode/AnalyserNode <dt><em>context</em></dt> <dd>Référence à un {{domxref("AudioContext")}}.</dd> <dt><em>options</em> {{optional_inline}}</dt> - <dd> + <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>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">maximale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.</li> - <li><code>minDecibels</code>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">minimale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.</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> diff --git a/files/fr/web/api/analysernode/fftsize/index.html b/files/fr/web/api/analysernode/fftsize/index.html index cc22b77283..966bf915dd 100644 --- a/files/fr/web/api/analysernode/fftsize/index.html +++ b/files/fr/web/api/analysernode/fftsize/index.html @@ -5,12 +5,12 @@ translation_of: Web/API/AnalyserNode/fftSize --- <p>{{ APIRef("Web Audio API") }}</p> -<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/" title="/en-US/docs/">transfomation de Fourier rapide</a>) à utiliser pour déterminer le domaine fréquentiel.<br> +<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> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html index a40c20348e..90a99b7f10 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.html +++ b/files/fr/web/api/analysernode/frequencybincount/index.html @@ -5,7 +5,7 @@ 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="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><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> + 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> <h2 id="Syntaxe">Syntaxe</h2> @@ -20,7 +20,7 @@ var tailleMemoireTampon = analyseur.frequencyBinCount; <h2 id="Example">Example</h2> -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un 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."><code>AudioContext</code></a>, puis utiliser <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (<canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément <canvas> et ceux pour lesquels JavaScript est désactivé."><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 class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +<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> <pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); @@ -84,5 +84,5 @@ dessiner();</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> + <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> </ul> diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.html b/files/fr/web/api/analysernode/getbytefrequencydata/index.html index d61d173cc5..dde3750690 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.html @@ -5,7 +5,7 @@ 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="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p> + 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> <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> @@ -29,7 +29,7 @@ analyseur.getByteFrequencyData(tableauDonnees); <h2 id="Exemple">Exemple</h2> -<p>L'exemple suivant montre comment créer simplement un <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un 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."><code>AudioContext</code></a>, puis utiliser <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (<canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément <canvas> et ceux pour lesquels JavaScript est désactivé."><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 class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p> +<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> <pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); @@ -97,7 +97,7 @@ dessiner();</pre> <h2 id="Voir_aussi">Voir aussi</h2> -<p><a class="new" href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p> +<p><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p> <ul> </ul> diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html index 0b856d5a7c..1610af5c55 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/AnalyserNode/getByteTimeDomainData <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">AudioContext</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> analyseur <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createAnalyser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">; +<pre class="brush: js">var contexteAudio = new AudioContext(); +var analyseur = contexteAudio.createAnalyser(); -</span></code>// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize <code class="language-js"> -</code>var tableauDonnees = new Uint8Array(analyseur.fftSize); +// 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> @@ -30,8 +30,8 @@ analyseur.getByteTimeDomainData(tableauDonnees); </pre> <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> -<pre class="brush: js">var <code class="language-js">contexteAudio</code> = new (window.AudioContext || window.webkitAudioContext)(); -var analyseur = <code class="language-js">contexteAudio</code>.createAnalyser(); +<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +var analyseur = contexteAudio.createAnalyser(); ... diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html index 86cbae8c06..fb4e6e2785 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html @@ -27,7 +27,7 @@ analyseur.getByteTimeDomainData(tableauDonnees); <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="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd> + <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> <h3 id="Valeur_de_retour">Valeur de retour</h3> diff --git a/files/fr/web/api/analysernode/index.html b/files/fr/web/api/analysernode/index.html index 5b7114d578..217c8b7f64 100644 --- a/files/fr/web/api/analysernode/index.html +++ b/files/fr/web/api/analysernode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/AnalyserNode <p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p> -<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12968/fttaudiodata.svg"></p> +<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">N<dfn>ombre d'entrées</dfn></th> + <th scope="row"><dfn>Nombre d'entrées</dfn></th> <td><code>1</code></td> </tr> <tr> @@ -94,12 +94,12 @@ translation_of: Web/API/AnalyserNode <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> +<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> <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> -<pre class="brush: js line-numbers language-js"><code class="language-js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var analyseur = contexteAudio.createAnalyser(); ... @@ -110,8 +110,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); analyseur.getByteTimeDomainData(tableauDonnees); // dessine un oscilloscope de la source audio -</code> -<code class="language-js">var canvas = document.getElementById("oscilloscope"); +var canvas = document.getElementById("oscilloscope"); var contexteCanvas = canvas.getContext("2d"); function dessiner() { @@ -149,7 +148,7 @@ function dessiner() { contexteCanvas.stroke(); }; - dessiner();</code></pre> + dessiner();</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/analysernode/maxdecibels/index.html b/files/fr/web/api/analysernode/maxdecibels/index.html index 8a60ef75ca..046c1bcf64 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.html +++ b/files/fr/web/api/analysernode/maxdecibels/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/AnalyserNode/maxDecibels <p>Sa valeur par défaut est <code>-30</code>.</p> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/analysernode/mindecibels/index.html b/files/fr/web/api/analysernode/mindecibels/index.html index 4d8961e51d..af3c639646 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.html +++ b/files/fr/web/api/analysernode/mindecibels/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/AnalyserNode/minDecibels <p>Sa valeur par défaut est <code>-100</code>.</p> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html index 51ee0e3c5d..5e438dd47b 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html @@ -5,14 +5,14 @@ translation_of: Web/API/AnalyserNode/smoothingTimeConstant --- <p>{{ APIRef("Web Audio API") }}</p> -<p>La propriété <strong><code>smoothingTimeConstant</code></strong> de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente <span lang="fr"><span class="hps">une</span><span class="hps"> </span><span class="hps">moyenne</span> </span>entre le buffer courant et le buffer précédent<span lang="fr"><span> - elle sert à lisser</span></span> la transition entre les valeurs.</p> +<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> <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> <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> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/animation/index.html b/files/fr/web/api/animation/index.html index ac14fa817f..d2a3f61044 100644 --- a/files/fr/web/api/animation/index.html +++ b/files/fr/web/api/animation/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Animation --- <p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p> -<p>L'interface <strong><code>Animation</code></strong> de <a href="https://developer.mozilla.org/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> +<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> diff --git a/files/fr/web/api/animationevent/animationevent/index.html b/files/fr/web/api/animationevent/animationevent/index.html index d610f10bec..aa793738cf 100644 --- a/files/fr/web/api/animationevent/animationevent/index.html +++ b/files/fr/web/api/animationevent/animationevent/index.html @@ -22,11 +22,11 @@ translation_of: Web/API/AnimationEvent/AnimationEvent <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 style="font-size: 16px !important; line-height: 24px !important;">""</code>.</dd> + <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" title="Learn more about 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> + <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> <h3 id="Return_value">Return value</h3> diff --git a/files/fr/web/api/animationevent/index.html b/files/fr/web/api/animationevent/index.html index 0001dcfe0d..9b24b82be1 100644 --- a/files/fr/web/api/animationevent/index.html +++ b/files/fr/web/api/animationevent/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AnimationEvent --- <p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> -<p><span class="seoSummary">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>.</span></p> +<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> <p>{{InheritanceDiagram}}</p> diff --git a/files/fr/web/api/animationevent/pseudoelement/index.html b/files/fr/web/api/animationevent/pseudoelement/index.html index 188f2b43f0..9bee1cda03 100644 --- a/files/fr/web/api/animationevent/pseudoelement/index.html +++ b/files/fr/web/api/animationevent/pseudoelement/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AnimationEvent/pseudoElement --- <p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p> -<p><span class="seoSummary">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" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> sur lequel tourne l'animation. </span>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> +<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> diff --git a/files/fr/web/api/atob/index.html b/files/fr/web/api/atob/index.html index bcc94f59e4..b7b3b16a43 100644 --- a/files/fr/web/api/atob/index.html +++ b/files/fr/web/api/atob/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob <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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>); </pre> @@ -24,7 +24,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <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 @@ -71,8 +71,8 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> + <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="https://developer.mozilla.org/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> + <li><a href="/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> </ul> diff --git a/files/fr/web/api/attr/index.html b/files/fr/web/api/attr/index.html index 50a32d5cd0..8a97846bae 100644 --- a/files/fr/web/api/attr/index.html +++ b/files/fr/web/api/attr/index.html @@ -21,25 +21,25 @@ translation_of: Web/API/Attr <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")}} <span id="result_box" lang="fr"><span>représentant l'URI de l'espace nom de l'attribut ou <code>null</code> s'il n'y a pas d'espace nom.</span></span></dd> + <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 <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom qualifié de l'attribut.</span></span></dd> + <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 <span id="result_box" lang="fr"><span> le préfixe de l'espace nom de l'attribut, ou <code>null</code> si aucun préfixe n'est spécifié.</span></span></dd> + <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 <span class="short_text" id="result_box" lang="fr"><span>a supprimé cette propriété</span></span> . <span id="result_box" lang="fr"><span>L'hypothèse était que puisque nous obtenons un objet Attr d'un</span></span> {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.<br> - <span class="short_text" id="result_box" lang="fr"><span>Comme cela n'est pas vrai quand les objets</span></span> <code>Attr</code> sont retournés par {{domxref("Document.evaluate")}}, <span class="short_text" id="result_box" lang="fr"><span>le DOM Living Standard a réintroduit la propriété.</span></span></p> +<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><span class="short_text" id="result_box" lang="fr"><span>Gecko affiche une note de dépréciation à partir de</span></span> Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.</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><span id="result_box" lang="fr"><span>Cette propriété renvoie toujours la valeur <code>true</code>.</span> <span>À 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.</span></span></dd> + <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> @@ -50,7 +50,7 @@ translation_of: Web/API/Attr <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"><span class="short_text" id="result_box" lang="fr"><span class="hps">Propriétés et méthodes</span> <span class="hps">dépréciées</span></span></h2> +<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> @@ -62,7 +62,7 @@ translation_of: Web/API/Attr <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><span id="result_box" lang="fr"><span>Indique si l'attribut est un "attribut ID".</span> <span>Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM.</span> <span>En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres.</span> <span>Qu'un attribut soit unique ou non est souvent déterminé par</span></span> un {{Glossary("DTD")}} ou une autre description de schéma.</dd> + <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> @@ -80,7 +80,7 @@ translation_of: Web/API/Attr <dt><code>previousSibling</code></dt> <dd>Cette propriété retourne désormais toujours NULL.</dd> <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt> - <dd><span id="result_box" lang="fr"><span>Les informations de type associées à cet attribut.</span> <span>Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de</span></span> {{domxref("Document.normalizeDocument")}}, cette propriété <span id="result_box" lang="fr"><span>peut ne pas être fiable si le nœud a été déplacé.</span></span></dd> + <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> diff --git a/files/fr/web/api/attr/localname/index.html b/files/fr/web/api/attr/localname/index.html index 6582711298..c23a595af4 100644 --- a/files/fr/web/api/attr/localname/index.html +++ b/files/fr/web/api/attr/localname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/localName <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> <div class="note"> -<p>Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p> +<p><strong>Note :</strong> Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/attr/namespaceuri/index.html b/files/fr/web/api/attr/namespaceuri/index.html index cdcab759be..73f89cbdeb 100644 --- a/files/fr/web/api/attr/namespaceuri/index.html +++ b/files/fr/web/api/attr/namespaceuri/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/namespaceURI <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> <div class="note"> -<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> +<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,11 +33,11 @@ translation_of: Web/API/Attr/namespaceURI <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> -<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 class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p> +<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> <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> -<p>Selon la spécification <a class="external" 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> +<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> <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> diff --git a/files/fr/web/api/attr/prefix/index.html b/files/fr/web/api/attr/prefix/index.html index 8ea0dc7a6d..92f9bcfe1b 100644 --- a/files/fr/web/api/attr/prefix/index.html +++ b/files/fr/web/api/attr/prefix/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Attr/prefix <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> <div class="note"> -<p>Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p> +<p><strong>Note :</strong> Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.html b/files/fr/web/api/audiobuffer/audiobuffer/index.html index ad6a102ba3..ce67efa5e8 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.html +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/AudioBuffer --- <p>{{APIRef("Web Audio API")}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</span></p> +<p>Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</p> <h2 id="Syntax">Syntax</h2> @@ -16,13 +16,13 @@ var audioBuffer = new AudioBuffer(context[, options]);</pre> <dl> <dt><em>context </em>{{obsolete_inline("")}}</dt> - <dd>Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. <span id="result_box" lang="fr"><span>Consultez la section Compatibilité du navigateur pour plus de détails.</span></span></dd> + <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>: L<span id="result_box" lang="fr"><span>ongueur de l'échantillonnage du tampon</span></span>.</li> + <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'<span id="result_box" lang="fr"><span>échantillonnage du </span></span><code>context</code><span lang="fr"><span> utilisé dans la construction de cet objet </span></span></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> diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.html b/files/fr/web/api/audiobuffer/copyfromchannel/index.html index ae483b7912..2ae87ca120 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.html +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.html @@ -10,9 +10,7 @@ translation_of: Web/API/AudioBuffer/copyFromChannel --- <p>{{ APIRef("Web Audio API") }}</p> -<div> -<p><span class="seoSummary">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.</span></p> -</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.html b/files/fr/web/api/audiobuffer/copytochannel/index.html index 6a6f0966b4..38a6393ebc 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.html +++ b/files/fr/web/api/audiobuffer/copytochannel/index.html @@ -5,9 +5,7 @@ translation_of: Web/API/AudioBuffer/copyToChannel --- <p>{{ APIRef("Web Audio API") }}</p> -<div> -<p><span class="seoSummary">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é.</span></p> -</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/audiobuffer/duration/index.html b/files/fr/web/api/audiobuffer/duration/index.html index 12030c1a84..447932473d 100644 --- a/files/fr/web/api/audiobuffer/duration/index.html +++ b/files/fr/web/api/audiobuffer/duration/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/duration <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[22]">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +<pre class="brush: js">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauTampon.duration;</pre> <h3 id="Valeur">Valeur</h3> @@ -20,7 +20,7 @@ tableauTampon.duration;</pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight[22]">// Stereo +<pre class="brush: js">// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html index bab087dc68..7f64f907a0 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.html +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.html @@ -5,15 +5,11 @@ translation_of: Web/API/AudioBuffer/getChannelData --- <p>{{ APIRef("Web Audio API") }}</p> -<div> -<div> -<p><span class="seoSummary">La méthode </span><code>getChannelData</code><span class="seoSummary"><code>() </code>de l'interface {{ domxref("AudioBuffer") }} renvoie un </span>{{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal)<span class="seoSummary">.</span></p> -</div> -</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[22]">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +<pre class="brush: js">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); var tampon = tableauDonnees.getChannelData(canal);</pre> <h3 id="Valeur">Valeur</h3> @@ -24,7 +20,7 @@ var tampon = tableauDonnees.getChannelData(canal);</pre> <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> -<pre class="brush: js;highlight[21]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); var bouton = document.querySelector('button'); var preformate = document.querySelector('pre'); var monScript = document.querySelector('script'); diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html index effd8fd44c..faa4f0f309 100644 --- a/files/fr/web/api/audiobuffer/index.html +++ b/files/fr/web/api/audiobuffer/index.html @@ -40,51 +40,51 @@ translation_of: Web/API/AudioBuffer <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é à <span class="idlType"><code>AudioBuffer</code></span> dans un tableau de destination.</dd> + <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é à <span class="idlType"><code>AudioBuffer</code></span>, depuis le tableau <code>source</code>.</dd> + <dd>Copie les échantillons dans le canal associé à <code>AudioBuffer</code>, depuis le tableau <code>source</code>.</dd> </dl> <h2 id="Exemple">Exemple</h2> <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> -<pre class="brush: js;highlight:[7,14,27] line-numbers language-js"><code class="language-js"><span class="comment token">// Stéréo</span> -<span class="keyword token">var</span> nombreCanaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> +<pre class="brush: js">// Stéréo +var nombreCanaux = 2; -<span class="comment token">// Crée une mémoire tampon vide de 2 secondes</span> -<span class="comment token">// à la fréquence d'échantillonage du contexte AudioContext</span> -<span class="keyword token">var</span> nombreFrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> tableauDonnees <span class="operator token">=</span> audioCtx<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span>nombreCanaux<span class="punctuation token">,</span> nombreFrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span> +// Crée une mémoire tampon vide de 2 secondes +// à la fréquence d'échantillonage du contexte AudioContext +var nombreFrames = contexteAudio.sampleRate * 2.0; +var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); -bouton<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// remplit la mémoire tampon avec du bruit blanc</span> - <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token"><</span> nombreCanaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// génère le tableau contenant les données</span> - <span class="keyword token">var</span> tampon <span class="operator token">=</span> tableauDonnees<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(canal</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> nombreFrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Math.random() donne une valeur comprise entre [0; 1.0]</span> - <span class="comment token">// l'audio doit être compris entre [-1.0; 1.0]</span> - tampon<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> +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++) { + // génère le tableau contenant les données + var tampon = tableauDonnees.getChannelData(canal); + 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; + } + } - <span class="comment token">// Récupère un AudioBufferSourceNode.</span> - <span class="comment token">// C'est un AudioNode à utiliser quand on veut jouer AudioBuffer</span> - <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // Récupère un AudioBufferSourceNode. + // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer + var source = contexteAudio.createBufferSource(); - <span class="comment token">// assigne le buffer au AudioBufferSourceNode</span> - source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> tableauDonnees<span class="punctuation token">;</span> + // assigne le buffer au AudioBufferSourceNode + source.buffer = tableauDonnees; - <span class="comment token">// connecte le AudioBufferSourceNode avec</span> - <span class="comment token">// la destination pour qu'on puisse entendre le son</span> - source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span> + // connecte le AudioBufferSourceNode avec + // la destination pour qu'on puisse entendre le son + source.connect(contexteAudio.destination); - <span class="comment token">// lance la lecture du so</span> - source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // lance la lecture du so + source.start(); -<span class="punctuation token">}</span></code></pre> +}</pre> <h2 id="Spécifications">Spécifications</h2> @@ -110,5 +110,5 @@ bouton<span class="punctuation token">.</span>onclick <span class="operator toke <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> </ul> diff --git a/files/fr/web/api/audiobuffer/length/index.html b/files/fr/web/api/audiobuffer/length/index.html index ee33981adf..f61ff06e0d 100644 --- a/files/fr/web/api/audiobuffer/length/index.html +++ b/files/fr/web/api/audiobuffer/length/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/length <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[22]">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +<pre class="brush: js">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.length; </pre> @@ -21,7 +21,7 @@ tableauMemoireTampon.length; <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight[22]">// Stereo +<pre class="brush: js">// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.html b/files/fr/web/api/audiobuffer/numberofchannels/index.html index 84898ecd94..470397e34d 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.html +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/numberOfChannels <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.numberOfChannels; </pre> @@ -21,7 +21,7 @@ tableauMemoireTampon.numberOfChannels; <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight[22]">// Stereo +<pre class="brush: js">// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes diff --git a/files/fr/web/api/audiobuffer/samplerate/index.html b/files/fr/web/api/audiobuffer/samplerate/index.html index ad1b23917a..79e2abb6d2 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.html +++ b/files/fr/web/api/audiobuffer/samplerate/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBuffer/sampleRate <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); tableauMemoireTampon.sampleRate; </pre> @@ -21,7 +21,7 @@ tableauMemoireTampon.sampleRate; <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight[22]">// Stereo +<pre class="brush: js">// Stereo var nombreCanaux = 2; // Crée une mémoire tampon vide de 2 secondes diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html index 08181c687c..377e917158 100644 --- a/files/fr/web/api/audiobuffersourcenode/buffer/index.html +++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.html @@ -5,9 +5,7 @@ translation_of: Web/API/AudioBufferSourceNode/buffer --- <p>{{ APIRef("Web Audio API") }}</p> -<div class="summary"> <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> -</div> <p>Si la propriété <code>buffer</code> a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).</p> @@ -23,10 +21,10 @@ translation_of: Web/API/AudioBufferSourceNode/buffer <h2 id="Exemple">Exemple</h2> <div class="note"> -<p><strong>Note</strong>: pour un exemple complet, voir <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">le code interprété</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">le code source</a>.</p> +<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> -<pre class="brush: js;highlight[19]">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); +<pre class="brush: js">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); button.onclick = function() { // Remplit le buffer avec du bruit blanc; diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.html b/files/fr/web/api/audiobuffersourcenode/detune/index.html index 60fc6f0121..bb352ab774 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.html +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/AudioBufferSourceNode/detune <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> +<pre class="brush: js">var source = contexteAudio.createBufferSource(); source.detune.value = 100; // valeur en cents</pre> <div class="note"> @@ -29,7 +29,7 @@ source.detune.value = 100; // valeur en cents</pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight[9]">var audioCtx = new AudioContext(); +<pre class="brush: js">var audioCtx = new AudioContext(); var nbChan = 2; var nbFrames = audioCtx.sampleRate * 2.0; diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html index b689f99b77..ce90a90902 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.html +++ b/files/fr/web/api/audiobuffersourcenode/index.html @@ -11,20 +11,18 @@ translation_of: Web/API/AudioBufferSourceNode --- <p>{{APIRef("Web Audio API")}}</p> -<p class="summary"><span lang="fr">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")}}. </span></p> +<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> <p>{{InheritanceDiagram}}</p> -<p><span lang="fr">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é </span>{{domxref("AudioBufferSourceNode.buffer", "buffer")}}. <span lang="fr">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).</span></p> +<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> <p><br> - <span lang="fr">Un</span> {{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 <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> <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> -<p><img alt="The AudioBufferSourceNode takes the content of an AudioBuffer and m" src="https://mdn.mozillademos.org/files/12670/AudioBufferSourceNode.svg" style="height: 233px; padding-bottom: 10px; width: 438px;"></p> - - +<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> @@ -69,7 +67,7 @@ translation_of: Web/API/AudioBufferSourceNode <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> -<h3 id="Gestionnaires_d'évènement"><span class="short_text" id="result_box" lang="fr"><span class="hps">Gestionnaires d'évènement</span></span></h3> +<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3> <p><em>Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}</em>.</p> @@ -82,52 +80,52 @@ translation_of: Web/API/AudioBufferSourceNode <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> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">exécuter the code</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">regarder le code source</a>.</p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="punctuation token">(</span>window<span class="punctuation token">.</span>AudioContext <span class="operator token">||</span> window<span class="punctuation token">.</span>webkitAudioContext<span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> bouton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> pre <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'pre'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> monScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'script'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -pre<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> monScript<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> - -<span class="comment token">// Stéréo</span> -<span class="keyword token">var</span> canaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">; -</span> -<span class="comment token">// Crée un tampon vide de deux secondes</span> -<span class="comment token">// au taux d'échantillonnage du AudioContext</span> -<span class="keyword token">var</span> compteurTrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> myArrayBuffer <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> compteurTrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span> - -bouton<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// remplit le tampon avec du bruit blanc;</span> - <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token"><</span> canaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// crée le ArrayBuffer qui contient les données</span> - <span class="keyword token">var</span> nowBuffering <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(</span>canal<span class="punctuation token">);</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> compteurTrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Math.random() est compris entre [0; 1.0]</span> - <span class="comment token">// audio doit être compris entre [-1.0; 1.0]</span> - nowBuffering<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - - <span class="comment token">// crée AudioBufferSourceNode.</span> - <span class="comment token">// c'est AudioNode utilisé pour lire un AudioBuffer</span> - <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// initialise le tampon du AudioBufferSourceNode</span> - source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">;</span> - <span class="comment token">// connecte l'AudioBufferSourceNode avec la destination</span> - <span class="comment token">// de façon à ce qu'on puisse entendre le son</span> - source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// lance la lecture de la source</span> - source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); +var bouton = document.querySelector('button'); +var pre = document.querySelector('pre'); +var monScript = document.querySelector('script'); + +pre.innerHTML = monScript.innerHTML; + +// Stéréo +var canaux = 2; + +// Crée un tampon vide de deux secondes +// au taux d'échantillonnage du AudioContext +var compteurTrames = contexteAudio.sampleRate * 2.0; + +var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.sampleRate); + +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++) { + // crée le ArrayBuffer qui contient les données + var nowBuffering = myArrayBuffer.getChannelData(canal); + 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; + } + } + + // crée AudioBufferSourceNode. + // c'est AudioNode utilisé pour lire un AudioBuffer + var source = contexteAudio.createBufferSource(); + // initialise le tampon du AudioBufferSourceNode + source.buffer = myArrayBuffer; + // connecte l'AudioBufferSourceNode avec la destination + // de façon à ce qu'on puisse entendre le son + 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> +<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> diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.html b/files/fr/web/api/audiobuffersourcenode/loop/index.html index feac85d179..739e46de9c 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.html +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/AudioBufferSourceNode/loop <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[2]">var source = audioCtx.createBufferSource(); +<pre class="brush: js">var source = audioCtx.createBufferSource(); source.loop = true; </pre> @@ -34,10 +34,10 @@ source.loop = true; <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> <div class="note"> -<p><strong>Note</strong>: Vous pouvez <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/">essayer un exemple live</a> (or <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">voir la source</a>.)</p> +<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> -<pre class="brush: js;highlight[17]">function getData() { +<pre class="brush: js">function getData() { source = audioCtx.createBufferSource(); request = new XMLHttpRequest(); diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html index fa1bde9140..c580e48ecb 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.html +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopEnd <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource(); +<pre class="brush: js">var source = contexteAudio.createBufferSource(); source.loopEnd = 3; </pre> @@ -31,7 +31,7 @@ source.loopEnd = 3; <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> <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> +<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> <pre class="brush: js">function getData() { diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html index b155c78b81..11a5b2165e 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/AudioBufferSourceNode/loopStart <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource(); +<pre class="brush: js">var source = contexteAudio.createBufferSource(); source.loopStart = 3; </pre> @@ -23,7 +23,7 @@ source.loopStart = 3; <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> <div class="note"> -<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> +<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> <pre class="brush: js">function getData() { diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html index e9c4047369..5f13016165 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate <p>{{ APIRef("Web Audio API") }}</p> <div> -<p>La propriété <code>playbackRate</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="https://developer.mozilla.org/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> qui définit la vitesse à laquelle le contenu audio sera lu.</p> +<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> <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> @@ -17,10 +17,8 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale </pre> -<div class="syntaxbox"> <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> +<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> <h3 id="Valeur">Valeur</h3> @@ -40,14 +38,14 @@ source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse <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> <div class="note"> -<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> +<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> <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> -<pre class="brush: js;highlight[15]">function getData() { +<pre class="brush: js">function getData() { source = contexteAudio.createBufferSource(); requete = new XMLHttpRequest(); diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html index 99f3314c3c..b07993659d 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.html +++ b/files/fr/web/api/audiobuffersourcenode/start/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/AudioBufferSourceNode/start <pre class="brush: js">source.start(contexteAudio.currentTime + 1,3,10);</pre> <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 class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p> +<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> <dl> diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html index 7c5344a346..3809f56dcd 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.html @@ -32,7 +32,7 @@ var source = audioCtx.createMediaElementSource(myMediaElement);</pre> <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> <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> +<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> <pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); @@ -73,7 +73,7 @@ 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> +<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> diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html index c69aae1f26..6378d52164 100644 --- a/files/fr/web/api/audiocontext/index.html +++ b/files/fr/web/api/audiocontext/index.html @@ -167,6 +167,6 @@ var finish = contexteAudio.destination; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> + <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> <li>{{domxref("OfflineAudioContext")}}</li> </ul> diff --git a/files/fr/web/api/audiolistener/index.html b/files/fr/web/api/audiolistener/index.html index afc71bf7ec..b8343c1642 100644 --- a/files/fr/web/api/audiolistener/index.html +++ b/files/fr/web/api/audiolistener/index.html @@ -12,16 +12,16 @@ translation_of: Web/API/AudioListener <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><span id="result_box" lang="fr"><span class="hps">Il est important</span> <span class="hps">de noter qu'il n'y</span> <span class="hps">a qu'un seul</span> <span class="hps">auditeur</span> <span class="hps">par</span> <span class="alt-edited hps">contexte, et qu'il ne s'agit</span><span class="hps"> pas</span> d'<span class="atn hps">un {{domxref("AudioNode")}}.</span></span></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="We see the position, velocity, up and front vectors of an AudioListener, with the up and front vectors at 90° each from the other" src="https://mdn.mozillademos.org/files/12652/listener.svg" style="height: 249px; width: 720px;"></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>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> +<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> @@ -51,7 +51,7 @@ translation_of: Web/API/AudioListener <dl> <dt>{{domxref("AudioListener.setOrientation()")}}</dt> - <dd><span id="result_box" lang="fr"><span class="hps">Définit</span> <span class="hps">l'orientation</span> <span class="hps">de l'auditeur.</span></span></dd> + <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> diff --git a/files/fr/web/api/audionode/index.html b/files/fr/web/api/audionode/index.html index 57207dbfb9..b3e51998b0 100644 --- a/files/fr/web/api/audionode/index.html +++ b/files/fr/web/api/audionode/index.html @@ -9,17 +9,18 @@ translation_of: Web/API/AudioNode <p>{{InheritanceDiagram}}</p> -<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> +<p><img alt="Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio." src="webaudiobasics.png"></p> + <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> <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> <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> +<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> -<h2 id="Propriétés" style="">Propriétés</h2> +<h2 id="Propriétés">Propriétés</h2> <dl> <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> @@ -61,9 +62,9 @@ translation_of: Web/API/AudioNode <h2 id="Exemple">Exemple</h2> -<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>.)<span class="p"> </span></p> +<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> -<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html index 66812ad876..bd0fca5e56 100644 --- a/files/fr/web/api/audioparam/index.html +++ b/files/fr/web/api/audioparam/index.html @@ -67,7 +67,7 @@ translation_of: Web/API/AudioParam <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> -<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var gainNode = audioCtx.createGain(); @@ -75,7 +75,7 @@ gainNode.gain.value = 0;</pre> <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> -<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var biquadFilter = audioCtx.createBiquadFilter(); diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html index 09678f539d..a43186edb4 100644 --- a/files/fr/web/api/audioprocessingevent/index.html +++ b/files/fr/web/api/audioprocessingevent/index.html @@ -10,10 +10,10 @@ translation_of: Web/API/AudioProcessingEvent --- <p>{{APIRef("Web Audio API")}}{{deprecated_header}}</p> -<p><span class="seoSummary">AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</span></p> +<p>AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</p> <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="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p> +<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> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/audioworklet/index.html b/files/fr/web/api/audioworklet/index.html index e87fdefa21..7e0330b10c 100644 --- a/files/fr/web/api/audioworklet/index.html +++ b/files/fr/web/api/audioworklet/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/AudioWorklet --- <p>{{APIRef("Web Audio API")}}{{securecontext_header}}</p> -<p class="summary"><span class="seoSummary">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.</span> 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> +<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> <p>L'accès à distance d'<code>AudioWorklet</code> du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.</p> diff --git a/files/fr/web/api/authenticatorresponse/index.html b/files/fr/web/api/authenticatorresponse/index.html index 89c305fed8..097cbfad44 100644 --- a/files/fr/web/api/authenticatorresponse/index.html +++ b/files/fr/web/api/authenticatorresponse/index.html @@ -17,12 +17,10 @@ translation_of: Web/API/AuthenticatorResponse <p>Voici la liste des interfaces basées sur <code>AuthenticatorResponse</code>.</p> -<div class="index"> <ul> <li>{{domxref("AuthenticatorAssertionResponse")}}</li> <li>{{domxref("AuthenticatorAttestationResponse")}}</li> </ul> -</div> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html index d7af5e1521..3d995409bb 100644 --- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/BaseAudioContext/createBiquadFilter <pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre> -<h3 id="Description" name="Description">Retourne</h3> +<h3 id="Description">Retourne</h3> <p>un {{domxref("BiquadFilterNode")}}.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <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> diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html index 420f1ed11f..55ca8f3ea5 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.html +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/BaseAudioContext/createBuffer <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><span id="result_box" lang="fr"><span class="alt-edited">Un entier représentant la taille du tampon dans les trames d'échantillons.</span></span></dd> + <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> @@ -64,7 +64,7 @@ var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre> <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> -<pre class="brush: js;highlight[14]">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: 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); diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html index 18d96da80c..9a9dfe08cf 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html +++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html @@ -5,7 +5,9 @@ translation_of: Web/API/BaseAudioContext/createBufferSource --- <p>{{ APIRef("Web Audio API") }}</p> -<p><span class="seoSummary">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") }}.</span> 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> +<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> + +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -20,10 +22,10 @@ translation_of: Web/API/BaseAudioContext/createBufferSource <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> <div class="note"> -<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/" lang="en-US">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html" lang="en-US">voir la source</a>.</p> +<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> -<pre class="brush: js;highlight[31]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); var button = document.querySelector('button'); var pre = document.querySelector('pre'); var myScript = document.querySelector('script'); @@ -87,5 +89,5 @@ button.onclick = function() { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" lang="fr">Utiliser la Web Audio API</a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> </ul> diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html index e400ee7198..90039ecc31 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.html +++ b/files/fr/web/api/baseaudiocontext/creategain/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/AudioContext/createGain <pre class="brush: js">var contexteAudio = new AudioContext(); var gainNode = contexteAudio.createGain();</pre> -<h3 id="Description" name="Description">Retourne</h3> +<h3 id="Description">Retourne</h3> -<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="https://developer.mozilla.org/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("GainNode.gain")}}.</p> +<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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <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> diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html index 9630c4af5f..2c11e2a02e 100644 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.html +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html @@ -120,7 +120,7 @@ function positionPanner() { }</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> +<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> diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html index 94622f3a32..5678fadb26 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html @@ -14,9 +14,7 @@ translation_of: Web/API/BaseAudioContext/createPeriodicWave --- <p>{{ APIRef("Web Audio API") }}</p> -<div> -<p><span class="seoSummary">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") }}.</span></p> -</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -42,7 +40,7 @@ translation_of: Web/API/BaseAudioContext/createPeriodicWave </dl> <div class="note"> -<p>Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p> +<p><strong>Note :</strong> Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p> </div> <h2 id="Exemple">Exemple</h2> diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html index 4d1fe561b4..af570e1037 100644 --- a/files/fr/web/api/baseaudiocontext/index.html +++ b/files/fr/web/api/baseaudiocontext/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/BaseAudioContext --- <div>{{APIRef("Web Audio API")}}</div> -<p class="summary"><span class="seoSummary">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.</span> 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>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> @@ -31,7 +31,7 @@ translation_of: Web/API/BaseAudioContext <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 <span class="tlid-translation translation" lang="fr"><span title="">nœuds dans ce contexte.</span></span> La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd> + <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> @@ -94,11 +94,11 @@ translation_of: Web/API/BaseAudioContext <p>Déclaration de context audio de base:</p> -<pre class="brush: js notranslate">var audioCtx = new AudioContext();</pre> +<pre class="brush: js">var audioCtx = new AudioContext();</pre> <p>Variante de nagivateur croisé:</p> -<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext; +<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); var oscillatorNode = audioCtx.createOscillator(); @@ -129,7 +129,7 @@ var finish = audioCtx.destination; <h2 id="Voir_aussi">Voir aussi</h2> -<ul style="margin-left: 40px;"> +<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> diff --git a/files/fr/web/api/battery_status_api/index.html b/files/fr/web/api/battery_status_api/index.html index acdc9362cf..ee8ceeb9b6 100644 --- a/files/fr/web/api/battery_status_api/index.html +++ b/files/fr/web/api/battery_status_api/index.html @@ -71,7 +71,7 @@ translation_of: Web/API/Battery_Status_API }); </pre> -<p>Voir aussi <a class="external" href="http://www.w3.org/TR/battery-status/#examples">l'exemple de la spécification</a>.</p> +<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> @@ -100,5 +100,5 @@ translation_of: Web/API/Battery_Status_API <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 class="external" 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> + <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> diff --git a/files/fr/web/api/batterymanager/charging/index.html b/files/fr/web/api/batterymanager/charging/index.html index ee1bc221fe..7eaad0d9f8 100644 --- a/files/fr/web/api/batterymanager/charging/index.html +++ b/files/fr/web/api/batterymanager/charging/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/BatteryManager/charging <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="Code_HTML">Code HTML</h3> @@ -23,7 +23,7 @@ translation_of: Web/API/BatteryManager/charging <h3 id="Code_JavaScript">Code JavaScript</h3> -<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) { +<pre class="brush: js">navigator.getBattery().then(function(battery) { var charging = battery.charging; diff --git a/files/fr/web/api/batterymanager/chargingtime/index.html b/files/fr/web/api/batterymanager/chargingtime/index.html index ebc264ff0d..7456fdb8fd 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.html +++ b/files/fr/web/api/batterymanager/chargingtime/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/BatteryManager/chargingTime <p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.</p> <div class="note"> -<p>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> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -19,7 +19,7 @@ translation_of: Web/API/BatteryManager/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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="Code_HTML">Code HTML</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/BatteryManager/chargingTime <h3 id="Code_JavaScript">Code JavaScript</h3> -<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) { +<pre class="brush: js">navigator.getBattery().then(function(battery) { var time = battery.chargingTime; diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html index 2ebddfe7db..8ad8ea8602 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.html +++ b/files/fr/web/api/batterymanager/dischargingtime/index.html @@ -10,16 +10,16 @@ translation_of: Web/API/BatteryManager/dischargingTime <p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.</p> <div class="note"> -<p>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> +<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> <h2 id="Syntax">Syntax</h2> <pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre> -<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" title="/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> +<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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="Code_HTML">Code HTML</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/BatteryManager/dischargingTime <h3 id="Code_JavaScript">Code JavaScript</h3> -<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) { +<pre class="brush: js;">navigator.getBattery().then(function(battery) { var time = battery.dischargingTime; diff --git a/files/fr/web/api/batterymanager/index.html b/files/fr/web/api/batterymanager/index.html index 3c01c62708..644c04acab 100644 --- a/files/fr/web/api/batterymanager/index.html +++ b/files/fr/web/api/batterymanager/index.html @@ -75,5 +75,5 @@ translation_of: Web/API/BatteryManager <ul> <li>{{ domxref("navigator.getBattery","navigator.getBattery") }}</li> - <li>La <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li> + <li>La <a href="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li> </ul> diff --git a/files/fr/web/api/batterymanager/level/index.html b/files/fr/web/api/batterymanager/level/index.html index 65b1145473..30fb39da87 100644 --- a/files/fr/web/api/batterymanager/level/index.html +++ b/files/fr/web/api/batterymanager/level/index.html @@ -17,16 +17,16 @@ translation_of: Web/API/BatteryManager/level <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="Code_HTML">Code HTML</h3> -<pre class="brush: html language-html"><div id="level">(niveau de batterie inconnu)</div><code class="language-html"> -</code></pre> +<pre class="brush: html"><div id="level">(niveau de batterie inconnu)</div> +</pre> <h3 id="Code_JavaScript">Code JavaScript</h3> -<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) { +<pre class="brush: js;">navigator.getBattery().then(function(battery) { var level = battery.level; diff --git a/files/fr/web/api/beforeunloadevent/index.html b/files/fr/web/api/beforeunloadevent/index.html index 3dc2bac5cd..4a74d1689d 100644 --- a/files/fr/web/api/beforeunloadevent/index.html +++ b/files/fr/web/api/beforeunloadevent/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/BeforeUnloadEvent <h2 id="Exemples">Exemples</h2> -<pre class="brush:js; notranslate">window.addEventListener("beforeunload", function(event) { +<pre class="brush:js;">window.addEventListener("beforeunload", function(event) { event.returnValue = "\o/"; }); @@ -48,7 +48,7 @@ window.addEventListener("beforeunload", function(event) { <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> -<pre class="brush: js notranslate">window.addEventListener("beforeunload", function (e) { +<pre class="brush: js">window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; (e || window.event).returnValue = confirmationMessage; // Gecko + IE diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html index 64bdce0416..508cf54cf8 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.html +++ b/files/fr/web/api/biquadfilternode/frequency/index.html @@ -18,7 +18,7 @@ var filtreBiquad = contexteAudio.createBiquadFilter(); filtreBiquad.frequency.value = 3000;</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> +<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> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/biquadfilternode/index.html b/files/fr/web/api/biquadfilternode/index.html index 6dd514077b..f5215ba3a6 100644 --- a/files/fr/web/api/biquadfilternode/index.html +++ b/files/fr/web/api/biquadfilternode/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/BiquadFilterNode --- <p>{{APIRef("Web Audio API")}}</p> -<p class="summary">L'interface <code><strong>BiquadFilterNode</strong></code> représente un simple filtre de bas niveau, créé avec la méthode <span class="seoSummary">{{ domxref("AudioContext.createBiquadFilter()") }}</span>. 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> +<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> <table class="properties"> <tbody> @@ -52,15 +52,13 @@ translation_of: Web/API/BiquadFilterNode <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 class="external external-icon" href="https://fr.wikipedia.org/wiki/Cent_et_savart">cents</a>.</dd> + <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>Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente:</dd> - <dd>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)</dd> - <dd> + <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> @@ -77,14 +75,14 @@ translation_of: Web/API/BiquadFilterNode <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 <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</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 <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</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> diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html index fa229550e2..eb08cd3667 100644 --- a/files/fr/web/api/blob/blob/index.html +++ b/files/fr/web/api/blob/blob/index.html @@ -41,7 +41,7 @@ var aBlob = new Blob( <em>array</em>, <em>options</em> ); <h2 id="Exemples">Exemples</h2> -<pre class="brush: js language-js">// Un tableau qui contient une seule DOMString +<pre class="brush: js">// Un tableau qui contient une seule DOMString var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>']; // Le blob diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html index a036e2723c..6cf6467846 100644 --- a/files/fr/web/api/blob/index.html +++ b/files/fr/web/api/blob/index.html @@ -19,7 +19,9 @@ translation_of: Web/API/Blob <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> -<div class="note"><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.</div> +<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> <h2 id="Constructeur">Constructeur</h2> diff --git a/files/fr/web/api/blob/size/index.html b/files/fr/web/api/blob/size/index.html index 8896e44695..b82751abd0 100644 --- a/files/fr/web/api/blob/size/index.html +++ b/files/fr/web/api/blob/size/index.html @@ -17,7 +17,9 @@ original_slug: Web/API/File/fileSize <p>Renvoie la taille du fichier en octets.</p> -<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/blobbuilder/index.html b/files/fr/web/api/blobbuilder/index.html index 69aab6d794..7098c3d185 100644 --- a/files/fr/web/api/blobbuilder/index.html +++ b/files/fr/web/api/blobbuilder/index.html @@ -12,7 +12,9 @@ translation_of: Web/API/BlobBuilder <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> -<div class="note"><strong>Note:</strong> L'interface <code>BlobBuilder</code> est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.</div> +<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> <h2 id="Aperçu_des_méthodes">Aperçu des méthodes</h2> @@ -57,7 +59,7 @@ void append( ); </pre> -<h6 id="Paramètres">Paramètres</h6> +<h4 id="Paramètres">Paramètres</h4> <dl> <dt><code>data</code></dt> @@ -75,14 +77,14 @@ void append( ); </pre> -<h6 id="Paramètres_2">Paramètres</h6> +<h4 id="Paramètres_2">Paramètres</h4> <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> -<h6 id="Valeur_de_retour">Valeur de retour</h6> +<h4 id="Valeur_de_retour">Valeur de retour</h4> <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> @@ -96,7 +98,7 @@ void append( ); </pre> -<h6 id="Paramètres_3">Paramètres</h6> +<h4 id="Paramètres_3">Paramètres</h4> <dl> <dt>name</dt> @@ -105,7 +107,7 @@ void append( <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> -<h6 id="Valeur_deretour">Valeur deretour</h6> +<h4 id="Valeur_deretour">Valeur deretour</h4> <p>Un objet {{domxref("File")}}.</p> diff --git a/files/fr/web/api/btoa/index.html b/files/fr/web/api/btoa/index.html index 9c07b8bb40..3d4bad306e 100644 --- a/files/fr/web/api/btoa/index.html +++ b/files/fr/web/api/btoa/index.html @@ -46,7 +46,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa </em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> @@ -56,9 +56,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/btoa <p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p> -<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" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p> +<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> -<pre id="txt"><code>// Chaîne ucs-2 en ascii encodé en base64 +<pre><code>// Chaîne ucs-2 en ascii encodé en base64 function uena(chn) { return window.btoa(unescape(encodeURIComponent(chn))); } @@ -73,7 +73,7 @@ aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre> -<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="https://developer.mozilla.org/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p> +<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> <h2 id="Spécifications">Spécifications</h2> @@ -116,8 +116,8 @@ aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> + <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="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> + <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> </ul> diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html index 0106a19573..83fd3085ba 100644 --- a/files/fr/web/api/cache/add/index.html +++ b/files/fr/web/api/cache/add/index.html @@ -27,12 +27,12 @@ translation_of: Web/API/Cache/add <p>Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.</p> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() { +<pre class="brush: js">cache.add(request).then(function() { //request a été ajoutée au cache }); </pre> diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html index 2c01cdc54d..98f5111d78 100644 --- a/files/fr/web/api/cache/addall/index.html +++ b/files/fr/web/api/cache/addall/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/Cache/addAll <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> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html index b75eccb772..5100ece8c8 100644 --- a/files/fr/web/api/cache/delete/index.html +++ b/files/fr/web/api/cache/delete/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/Cache/delete <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> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <pre class="brush: js">caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html index b9215d7cf4..384689d3fa 100644 --- a/files/fr/web/api/cache/index.html +++ b/files/fr/web/api/cache/index.html @@ -21,12 +21,12 @@ translation_of: Web/API/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> -<div class="blockIndicator 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 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> -<div class="blockIndicator 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 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> <div class="blockIndicator note"> @@ -62,7 +62,9 @@ translation_of: Web/API/Cache <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> -<div class="note"><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.</div> +<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> <pre class="brush: js">var CACHE_VERSION = 1; @@ -145,8 +147,8 @@ self.addEventListener('fetch', function(event) { <ul> <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code d'exemple basique de Service workers</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est prêt ?</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> diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html index 090d9375a7..faabe1581d 100644 --- a/files/fr/web/api/cache/keys/index.html +++ b/files/fr/web/api/cache/keys/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Cache/keys <p>Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.</p> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -35,8 +35,7 @@ translation_of: Web/API/Cache/keys <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>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 :</dd> - <dd> + <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> @@ -50,7 +49,7 @@ translation_of: Web/API/Cache/keys <p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <pre class="brush: js">caches.open('v1').then(function(cache) { cache.keys().then(function(keys) { diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html index a49e733af6..7867ba79a6 100644 --- a/files/fr/web/api/cache/match/index.html +++ b/files/fr/web/api/cache/match/index.html @@ -44,16 +44,16 @@ translation_of: Web/API/Cache/match <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> <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> +<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> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> <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> -<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. <span style="line-height: 19.0909080505371px;">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 </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> ne sera PAS appelée. </span></p> +<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> <pre class="brush: js">self.addEventListener('fetch', function(event) { // We only want to call event.respondWith() if this is a GET request for an HTML document. diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html index 50126ead5c..86d1dad2bf 100644 --- a/files/fr/web/api/cache/matchall/index.html +++ b/files/fr/web/api/cache/matchall/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Cache/matchAll <dt>request</dt> <dd>La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.</dd> <dt>options {{optional_inline}}</dt> - <dd>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 : + <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> @@ -44,10 +44,10 @@ translation_of: Web/API/Cache/matchAll <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> <div class="note"> -<p><strong>Note</strong>: {{domxref("Cache.match()")}} est quasiment identique à <a href="https://developer.mozilla.org/fr/docs/Web/API/Cache/matchAll" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><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> +<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> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <pre class="brush: js">caches.open('v1').then(function(cache) { cache.matchAll('/images/').then(function(response) { diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html index c5d6b0a51e..b8a7f9f5cd 100644 --- a/files/fr/web/api/cache/put/index.html +++ b/files/fr/web/api/cache/put/index.html @@ -27,15 +27,15 @@ translation_of: Web/API/Cache/put })</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> +<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> <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> +<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> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,10 +59,10 @@ translation_of: Web/API/Cache/put <p>Une {{jsxref("Promise", "Promesse")}} est retournée avec void.</p> <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> +<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> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/cachestorage/delete/index.html b/files/fr/web/api/cachestorage/delete/index.html index d1d5499d48..6d088f5d7f 100644 --- a/files/fr/web/api/cachestorage/delete/index.html +++ b/files/fr/web/api/cachestorage/delete/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/CacheStorage/delete <p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/cachestorage/has/index.html b/files/fr/web/api/cachestorage/has/index.html index d28ba6eeb0..5b1b6a6ae0 100644 --- a/files/fr/web/api/cachestorage/has/index.html +++ b/files/fr/web/api/cachestorage/has/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/CacheStorage/has <p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/cachestorage/index.html b/files/fr/web/api/cachestorage/index.html index 73138a4baf..276393aa31 100644 --- a/files/fr/web/api/cachestorage/index.html +++ b/files/fr/web/api/cachestorage/index.html @@ -19,7 +19,8 @@ translation_of: Web/API/CacheStorage <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"><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> <sup>(EN)</sup>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</div> + <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> @@ -30,9 +31,13 @@ translation_of: Web/API/CacheStorage <p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> -<div class="note"><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.</div> +<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> -<div class="note"><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()")}}.</div> +<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> <h2 id="Méthodes">Méthodes</h2> @@ -190,7 +195,7 @@ try { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> + <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> diff --git a/files/fr/web/api/cachestorage/keys/index.html b/files/fr/web/api/cachestorage/keys/index.html index 69d08de58b..ed61c3716c 100644 --- a/files/fr/web/api/cachestorage/keys/index.html +++ b/files/fr/web/api/cachestorage/keys/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CacheStorage/keys <p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html index 22e25ab644..704f299794 100644 --- a/files/fr/web/api/cachestorage/match/index.html +++ b/files/fr/web/api/cachestorage/match/index.html @@ -20,7 +20,9 @@ translation_of: Web/API/CacheStorage/match <p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p> -<div class="note"><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.</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -40,7 +42,7 @@ translation_of: Web/API/CacheStorage/match <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.<span class="hidden"> </span></li> + <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.</li> </ul> </dd> </dl> @@ -49,7 +51,7 @@ translation_of: Web/API/CacheStorage/match <p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/cachestorage/open/index.html b/files/fr/web/api/cachestorage/open/index.html index a2c81af6f9..87d45d11b3 100644 --- a/files/fr/web/api/cachestorage/open/index.html +++ b/files/fr/web/api/cachestorage/open/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/CacheStorage/open <p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -40,7 +40,7 @@ translation_of: Web/API/CacheStorage/open <p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p> -<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <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> diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html index fc87a5c200..b3520fecbd 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html @@ -12,42 +12,42 @@ original_slug: Un_raycaster_basique_avec_canvas --- <p>{{CanvasSidebar}}</p> -<p class="summary">Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D <span id="result_box" lang="fr"><span>à l'aide de la projection de rayons.</span></span></p> +<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> <p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p> <p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p> -<h2 id="Pourquoi.C2.A0.3F" name="Pourquoi.C2.A0.3F">Pourquoi ?</h2> +<h2 id="Pourquoi.C2.A0.3F">Pourquoi ?</h2> -<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code><canvas></code> dont j'avais <a class="external" 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> +<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> -<p>La <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">tutoriel </a><a href="https://developer.mozilla.org/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> +<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> -<h2 id="Comment.C2.A0.3F" name="Comment.C2.A0.3F">Comment ?</h2> +<h2 id="Comment.C2.A0.3F">Comment ?</h2> -<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="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p> +<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> <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> -<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 class="external" 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> +<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> -<h2 id="R.C3.A9sultats" name="R.C3.A9sultats">Résultats</h2> +<h2 id="R.C3.A9sultats">Résultats</h2> <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> <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> -<h2 id="Le_RayCaster" name="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2> +<h2 id="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2> -<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a class="external" 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> +<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> <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> -<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir aussi</h3> +<h3 id="Voir_.C3.A9galement">Voir aussi</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li> + <li><a href="/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li> </ul> diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html index a697d99b2a..9c3ea0f0ef 100644 --- a/files/fr/web/api/canvas_api/index.html +++ b/files/fr/web/api/canvas_api/index.html @@ -9,11 +9,11 @@ translation_of: Web/API/Canvas_API --- <div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div> -<p class="summary">Ajouté en <a href="https://developer.mozilla.org/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" title="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> +<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> -<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" title="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 class="external" 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> +<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> -<p>L'élément <canvas> est aussi utilisé par <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p> +<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> <h2 id="Exemple">Exemple</h2> @@ -21,12 +21,12 @@ translation_of: Web/API/Canvas_API <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; @@ -35,10 +35,9 @@ ctx.fillRect(10, 10, 100, 100); <p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html notranslate"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -48,7 +47,7 @@ ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -72,13 +71,11 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Références">Références</h2> -<div class="index"> <ul> <li>{{domxref("HTMLCanvasElement")}}</li> <li>{{domxref("CanvasRenderingContext2D")}}</li> @@ -92,9 +89,8 @@ window.addEventListener('load', drawCanvas); <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> </ul> -</div> -<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> +<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> @@ -103,7 +99,7 @@ window.addEventListener('load', drawCanvas); <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" title="fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt> + <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> @@ -134,7 +130,7 @@ window.addEventListener('load', drawCanvas); <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 class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</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> diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html index e2b627d4ed..80e8707ba3 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -9,52 +9,52 @@ original_slug: HTML/Manipulating_video_using_canvas --- <p>{{CanvasSidebar}}</p> -<p class="summary">En combinant les possibilités de l'élément <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a class="internal" href="/en/HTML/Canvas" title="En/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> +<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> -<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p> +<p><a href="/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p> <h2 id="Le_contenu_du_document">Le contenu du document</h2> -<p>Le document XHTML utilisé <span id="result_box" lang="fr"><span>pour rendre ce contenu est montré ci-dessous :</span></span></p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> - <span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">background</span><span class="punctuation token">:</span> black<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span><span class="hexcode token">#CCCCCC</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="selector token"><span class="id token">#c2</span> </span><span class="punctuation token">{</span> - <span class="property token">background-image</span><span class="punctuation token">:</span> <span class="token url">url(foo.png)</span><span class="punctuation token">;</span> - <span class="property token">background-repeat</span><span class="punctuation token">:</span> no-repeat<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="selector token">div </span><span class="punctuation token">{</span> - <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span> - <span class="property token">border</span> <span class="punctuation token">:</span><span class="number token">1</span>px solid <span class="hexcode token">#444444</span><span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span><span class="hexcode token">#3B3B3B</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>main.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>processor.doLoad()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video.ogv<span class="punctuation token">"</span></span> <span class="attr-name token">controls</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>160<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>96<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<p>Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <style> + body { + background: black; + color:#CCCCCC; + } + #c2 { + background-image: url(foo.png); + background-repeat: no-repeat; + } + div { + float: left; + border :1px solid #444444; + padding:10px; + margin: 10px; + background:#3B3B3B; + } + </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> <p>Les éléments clés à retenir sont :</p> <ol> - <li>Ce document dispose de deux balises <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="En/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>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> @@ -67,93 +67,93 @@ original_slug: HTML/Manipulating_video_using_canvas <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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> processor<span class="punctuation token">;</span> - - processor<span class="punctuation token">.</span>doLoad <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">doLoad</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>c1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c1<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'c2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2 <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>c2<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'play'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - self<span class="punctuation token">.</span>width <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoWidth <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span> - self<span class="punctuation token">.</span>height <span class="operator token">=</span> self<span class="punctuation token">.</span>video<span class="punctuation token">.</span>videoHeight <span class="operator token">/</span> <span class="number token">2</span><span class="punctuation token">;</span> - self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre> +<pre class="brush: js">var processor; + + processor.doLoad = function doLoad() { + this.video = document.getElementById('video'); + this.c1 = document.getElementById('c1'); + this.ctx1 = this.c1.getContext('2d'); + this.c2 = document.getElementById('c2'); + this.ctx2 = this.c2.getContext('2d'); + let self = this; + this.video.addEventListener('play', function() { + self.width = self.video.videoWidth / 2; + 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> <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> -<h3 id="Le_rappel_du_minuteur"><span class="short_text" id="result_box" lang="fr"><span>Le rappel du minuteur</span></span></h3> +<h3 id="Le_rappel_du_minuteur">Le rappel du minuteur</h3> -<p><span id="result_box" lang="fr"><span>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".</span></span></p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js">processor<span class="punctuation token">.</span>timerCallback <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>paused <span class="operator token">||</span> <span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">.</span>ended<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> self <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">;</span> - <span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - self<span class="punctuation token">.</span><span class="function token">timerCallback</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span></code></pre> +<pre class="brush: js">processor.timerCallback = function timerCallback() { + if (this.video.paused || this.video.ended) { + return; + } + this.computeFrame(); + let self = this; + setTimeout(function() { + self.timerCallback(); + }, 0); + },</pre> -<p><span id="result_box" lang="fr"><span>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer.</span> <span>Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet </span></span> "chroma-keying" <span lang="fr"><span> sur l'image vidéo en cours.</span></span></p> +<p>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.</p> -<p><span id="result_box" lang="fr"><span>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer un nouvel appel.</span> <span>En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</span></span></p> +<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> <h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3> <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> -<pre class="brush: js line-numbers language-js"><code class="language-js">processor<span class="punctuation token">.</span>computeFrame <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">computeFrame</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>video<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> frame <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>ctx1<span class="punctuation token">.</span><span class="function token">getImageData</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>width<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> l <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">.</span>length <span class="operator token">/</span> <span class="number token">4</span><span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> l<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">let</span> r <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> g <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">let</span> b <span class="operator token">=</span> frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>g <span class="operator token">></span> <span class="number token">100</span> <span class="operator token">&&</span> r <span class="operator token">></span> <span class="number token">100</span> <span class="operator token">&&</span> b <span class="operator token"><</span> <span class="number token">43</span><span class="punctuation token">)</span> - frame<span class="punctuation token">.</span>data<span class="punctuation token">[</span>i <span class="operator token">*</span> <span class="number token">4</span> <span class="operator token">+</span> <span class="number token">3</span><span class="punctuation token">]</span> <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>ctx2<span class="punctuation token">.</span><span class="function token">putImageData</span><span class="punctuation token">(</span>frame<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span></code></pre> +<pre class="brush: 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++) { + 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) + 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> -<p><img alt="video.png" class="default internal" src="/@api/deki/files/3282/=video.png" style="height: 192px; width: 320px;"></p> +<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> -<p><img alt="sourcectx.png" class="default internal" src="/@api/deki/files/3284/=sourcectx.png" style="height: 96px; width: 160px;"></p> +<p><img src="sourcectx.png"></p> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler.</span> <span>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.</span></span></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> -<p><span id="result_box" lang="fr"><span>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</span><span> de fond importée de <code>foo.png</code>.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>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.</span> <span>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.</span></span></p> +<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> -<p><span class="short_text" id="result_box" lang="fr"><span>L'image résultante ressemble à ceci :</span></span></p> +<p>L'image résultante ressemble à ceci :</p> -<p><img alt="output.png" class="default internal" src="/@api/deki/files/3283/=output.png" style="height: 96px; width: 161px;"></p> +<p><img src="output.png"></p> -<p><span id="result_box" lang="fr"><span>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.</span></span></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> -<p><a class="external" href="/samples/video/chroma-key/index.xhtml" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p> +<p><a href="/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="En/Using audio and video in Firefox">Using audio and video</a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using audio and video</a></li> </ul> diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html index 6f98b0c468..d21ac69028 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -6,20 +6,18 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations --- <div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</div> -<div class="summary"> -<p>Dans le dernier chapitre, nous avons réalisé des <a href="https://developer.mozilla.org/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> -</div> +<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> <h2 id="Dessinons_une_balle">Dessinons une balle</h2> <p>Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.</p> -<pre class="brush: html notranslate"><canvas id="canvas" width="600" height="300"></canvas> +<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> </pre> <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> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var ball = { @@ -42,9 +40,9 @@ ball.draw();</pre> <h2 id="Ajout_de_la_vitesse">Ajout de la vitesse</h2> -<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="https://developer.mozilla.org/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> +<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> -<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -87,7 +85,7 @@ ball.draw(); <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> -<pre class="brush: js notranslate">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { +<pre class="brush: 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) { @@ -98,10 +96,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { <p>Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :</p> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -148,7 +145,6 @@ canvas.addEventListener("mouseout",function(e){ }); ball.draw();</pre> -</div> <p>{{EmbedLiveSample("Première_demo", "610", "310")}}</p> @@ -156,17 +152,16 @@ ball.draw();</pre> <p>Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :</p> -<pre class="brush: js notranslate">ball.vy *= .99; +<pre class="brush: js">ball.vy *= .99; ball.vy += .25;</pre> <p>Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.</p> -<div class="hidden"> -<h6 id="Second_demo">Second demo</h6> +<h3 id="deuxième_démo">Deuxième démo</h3> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -215,23 +210,21 @@ canvas.addEventListener("mouseout",function(e){ }); ball.draw();</pre> -</div> -<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p> +<p>{{EmbedLiveSample("deuxième_démo", "610", "310")}}</p> <h2 id="Effet_de_traînée">Effet de traînée</h2> <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> -<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255,255,255,0.3)'; +<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.fillRect(0,0,canvas.width,canvas.height);</pre> -<div class="hidden"> -<h6 id="Third_demo">Third demo</h6> +<h3 id="troisième_demo">Troisième démo</h3> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; @@ -281,19 +274,16 @@ canvas.addEventListener("mouseout",function(e){ }); ball.draw();</pre> -</div> -<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p> +<p>{{EmbedLiveSample("troisième_démo", "610", "310")}}</p> <h2 id="Ajout_dun_contrôle_de_souris">Ajout d'un contrôle de souris</h2> <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> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> -<pre class="brush: js notranslate">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; var running = false; @@ -365,13 +355,13 @@ ball.draw(); <h2 id="Casse-briques">Casse-briques</h2> -<p>Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! <span id="result_box" lang="fr"><span>Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ?</span> <span>Consultez notre zone de développement de jeux pour plus d'articles liés <a href="https://developer.mozilla.org/fr/docs/Jeux">aux jeux</a>.</span></span></p> +<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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{domxref("window.requestAnimationFrame()")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li> + <li><a href="/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li> </ul> <p>{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index d7eb97ce5f..12d7d76e45 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -12,11 +12,9 @@ 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> -<div class="summary"> -<p>Dans le chapitre sur <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">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> -</div> +<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> -<h2 id="Colors" name="Colors">Les couleurs</h2> +<h2 id="Colors">Les couleurs</h2> <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> @@ -30,23 +28,23 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs <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> <div class="note"> -<p><strong>Remarque: </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> +<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> <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">// Les valeurs possibles de fillStyle pour "orange"</span> +<pre class="brush: js">// Les valeurs possibles de fillStyle pour "orange" -ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'orange'</span><span class="punctuation token">;</span> -ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFA500'</span><span class="punctuation token">;</span> -ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 165, 0)'</span><span class="punctuation token">;</span> -ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 165, 0, 1)'</span><span class="punctuation token">;</span></code></pre> +ctx.fillStyle = 'orange'; +ctx.fillStyle = '#FFA500'; +ctx.fillStyle = 'rgb(255, 165, 0)'; +ctx.fillStyle = 'rgba(255, 165, 0, 1)';</pre> -<h3 id="A_fillStyle_example" name="A_fillStyle_example">Un exemple <code>fillStyle</code></h3> +<h3 id="A_fillStyle_example">Un exemple <code>fillStyle</code></h3> <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> -<pre class="brush: js;highlight[5,6] notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { @@ -57,44 +55,43 @@ ctx<span class="punctuation token">.</span>fillStyle <span class="operator token } }</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js hidden">draw();</pre> -<pre class="brush: js notranslate">draw();</pre> -</div> <p>Le résultat ressemble à ceci:</p> -<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}</p> -<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> <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> -<pre class="brush: js;highlight[5,6] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">6</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">6</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'rgb(0, '</span> <span class="operator token">+</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> i<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">', '</span> <span class="operator token">+</span> - Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> j<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">12.5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">12.5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + 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(); + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); + ctx.stroke(); + } + } + }</pre> + + +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js hidden">draw();</pre> + <p>Le résultat ressemble à ceci :</p> -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> -<h2 id="Transparency" name="Transparency">Transparence</h2> +<h2 id="Transparency">Transparence</h2> <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> @@ -107,7 +104,7 @@ ctx<span class="punctuation token">.</span>fillStyle <span class="operator token <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> -<pre class="brush: js notranslate">//Affecter des couleurs transparentes pour dessiner et remplir le style +<pre class="brush: 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)"; @@ -115,77 +112,74 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; <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> -<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3> +<h3 id="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3> <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> -<pre class="brush: js;highlight[15] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// draw background</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FD0'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#6C0'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#09F'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#F30'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFF'</span><span class="punctuation token">;</span> - - <span class="comment token">// règle la valeur de transparence</span> - ctx<span class="punctuation token">.</span>globalAlpha <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessine des cercles semi-transparents</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">7</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="number token">10</span> <span class="operator token">*</span> i<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fill</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + // draw background + ctx.fillStyle = '#FD0'; + ctx.fillRect(0, 0, 75, 75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75, 0, 75, 75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0, 75, 75, 75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75, 75, 75, 75); + ctx.fillStyle = '#FFF'; + + // règle la valeur de transparence + ctx.globalAlpha = 0.2; + + // Dessine des cercles semi-transparents + 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> -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> +<pre class="brush: js hidden">draw();</pre> -<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Un exemple en utilisant <code>rgba()</code></h3> +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba">Un exemple en utilisant <code>rgba()</code></h3> <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> -<pre class="brush: js;highlight[16] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessine le fond</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 221, 0)'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(102, 204, 0)'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(0, 153, 255)'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 51, 0)'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">112.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessine des rectangles semi-transparents</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 255, 255, '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">/</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">4</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">27.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); -<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + // Dessine le fond + ctx.fillStyle = 'rgb(255, 221, 0)'; + ctx.fillRect(0, 0, 150, 37.5); + ctx.fillStyle = 'rgb(102, 204, 0)'; + ctx.fillRect(0, 37.5, 150, 37.5); + ctx.fillStyle = 'rgb(0, 153, 255)'; + ctx.fillRect(0, 75, 150, 37.5); + ctx.fillStyle = 'rgb(255, 51, 0)'; + ctx.fillRect(0, 112.5, 150, 37.5); + + // Dessine des rectangles semi-transparents + for (var i = 0; i < 10; i++) { + ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')'; + 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> + +<pre class="brush: js hidden">draw();</pre> -<h2 id="Line_styles" name="Line_styles">Le style des lignes</h2> +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}</p> + +<h2 id="Line_styles">Le style des lignes</h2> <p>Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.</p> @@ -208,7 +202,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; <p>Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.</p> -<h3 id="A_lineWidth_example" name="A_lineWidth_example">Un exemple <code>lineWidth</code></h3> +<h3 id="A_lineWidth_example">Un exemple <code>lineWidth</code></h3> <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> @@ -216,28 +210,26 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; <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> -<pre class="brush: js;highlight[4] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">1</span> <span class="operator token">+</span> i<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + 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> -<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}</p> <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> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> +<p><img alt="" src="canvas-grid.png"></p> <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> @@ -246,19 +238,17 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; <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> -<p><span id="result_box" lang="fr"><span>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 ;</span> <span>à 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.</span> Ainsi,<span> le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux.</span> <span>Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>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</span> <span>.</span></span></p> +<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> <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> -<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> - <dl> <dt><code>butt </code><em>(bout)</em></dt> <dd>L'extrémité des lignes est en angle droit.</dd> @@ -272,322 +262,310 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)"; <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> -<pre class="brush: js;highlight[18] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> lineCap <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'butt'</span><span class="punctuation token">,</span> <span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'square'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessiner des guides</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessiner des lignes</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> lineCap<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">15</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>lineCap <span class="operator token">=</span> lineCap<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineCap = ['butt', 'round', 'square']; + + // Dessiner des guides + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(140, 10); + ctx.moveTo(10, 140); + ctx.lineTo(140, 140); + ctx.stroke(); + + // Dessiner des lignes + ctx.strokeStyle = 'black'; + for (var i = 0; i < lineCap.length; i++) { + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25 + i * 50, 10); + ctx.lineTo(25 + i * 50, 140); + ctx.stroke(); + } +}</pre> -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<h3 id="A_lineJoin_example" name="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3> +<pre class="brush: js hidden">draw();</pre> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3> <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> <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> - <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><span id="result_box" lang="fr"><span>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.</span> <span>Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété<code> lineJoin</code> ;</span> <span>la sortie est montrée ci-dessus.</span></span></p> - -<pre class="brush: js;highlight[6] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> lineJoin <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'bevel'</span><span class="punctuation token">,</span> <span class="string token">'miter'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> lineJoin<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>lineJoin <span class="operator token">=</span> lineJoin<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">35</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">115</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">155</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<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> + +<pre class="brush: 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++) { + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5, 5 + i * 40); + ctx.lineTo(35, 45 + i * 40); + ctx.lineTo(75, 5 + i * 40); + ctx.lineTo(115, 45 + i * 40); + ctx.lineTo(155, 5 + i * 40); + ctx.stroke(); + } +}</pre> + +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js hidden">draw();</pre> </div> -<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}</p> -<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3> +<h3 id="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne.</span> <span>Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place.</span> <span>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 </span></span> {{HTMLElement("canvas")}}). <span lang="fr"><code> </code><span><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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>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é</span> de la <span>largeur de la ligne.</span> <span>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.</span> <span>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 :</span></span></p> +<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> <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><span id="result_box" lang="fr"><span>La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.</span></span></li> - <li><span id="result_box" lang="fr"><span>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.</span></span></li> - <li><span id="result_box" lang="fr"><span>Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.</span></span></li> - <li><span id="result_box" lang="fr"><span>Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.</span></span></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> -<p><span id="result_box" lang="fr"><span>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.</span> <span>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.</span></span></p> - -<p><span id="result_box" lang="fr"><span>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 ;</span> <span>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 ;</span> <span>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).</span></span></p> - -<pre class="brush: js;highlight[18] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Éffacer canvas</span> - ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Dessiner des guides</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">160</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Définir les styles de lignes</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#000'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span> - - <span class="comment token">// Vérifier l'entrée <em>(input)</em></span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">.</span><span class="function token">match</span><span class="punctuation token">(</span><span class="regex token">/\d+(\.\d+)?/</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span>miterLimit <span class="operator token">=</span> <span class="function token">parseFloat</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Value must be a positive number'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">// Dessiner des lignes</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">24</span> <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> dy <span class="operator token">=</span> i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="number token">25</span> <span class="punctuation token">:</span> <span class="operator token">-</span><span class="number token">25</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">pow</span><span class="punctuation token">(</span>i<span class="punctuation token">,</span> <span class="number token">1.5</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">75</span> <span class="operator token">+</span> dy<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Change the <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>miterLimit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span> by entering a new value below and clicking the redraw button.<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">onsubmit</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>return draw();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span>Miter limit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>miterLimit<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Redraw<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>miterLimit<span class="punctuation token">;</span> -<span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<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> + +<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> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Éffacer canvas + ctx.clearRect(0, 0, 150, 150); -<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + // Dessiner des guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5, 50, 160, 50); -<h3 id="Using_line_dashes" name="Using_line_dashes">Utilisation de lignes pointillées</h3> + // Définir les styles de lignes + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // Vérifier l'entrée (input) + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // Dessiner des lignes + ctx.beginPath(); + ctx.moveTo(0, 100); + 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 <span class="new"> sélections d'outils</span> 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" title="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animation basiques.</a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">.</a></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> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="110" height="110"></canvas></pre> -<pre class="brush: js;highlight[6] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; -<span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">setLineDash</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>lineDashOffset <span class="operator token">=</span> <span class="operator token">-</span>offset<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10, 10, 100, 100); +} -<span class="keyword token">function</span> <span class="function token">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - offset<span class="operator token">++</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">></span> <span class="number token">16</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">setTimeout</span><span class="punctuation token">(</span>march<span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} -<span class="function token">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +march();</pre> -<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}</p> -<h2 id="Gradients" name="Gradients">Dégradés</h2> +<h2 id="Gradients">Dégradés</h2> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes.</span> <span>Nous pouvons ensuite affecter cet objet aux propriétés <code>fillStyle</code> ou <code>strokeStyle</code>.</span></span></p> +<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> <dl> <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> - <dd><span id="result_box" lang="fr"><span>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>).</span></span></dd> + <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><span id="result_box" lang="fr"><span>Crée un dégradé radial.</span> <span>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>.</span></span></dd> + <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> <p>Par exemple:</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> radialgradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);</pre> -<p><span id="result_box" lang="fr"><span>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>.</span></span></p> +<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> <dl> <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> - <dd><span id="result_box" lang="fr"><span>Crée un nouvel arrêt de couleur sur l'objet <code>gradient</code> <em>(dégradé)</em>.</span> <span>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é</span> <span>devrait atteindre.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez.</span> <span>Ci-dessous figure un dégradé linéaire très simple du blanc au noir.</span></span></p> +<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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'white'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'black'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black');</pre> -<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3> +<h3 id="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3> -<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous allons créer deux dégradés différents.</span> <span>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.</span></span></p> +<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> -<pre class="brush: js;highlight[5,11] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); - <span class="comment token">// Créer un dégradé</span> - <span class="keyword token">var</span> lingrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00ABEB'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#26C000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // Créer un dégradé + var lingrad = ctx.createLinearGradient(0, 0, 0, 150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#26C000'); + lingrad.addColorStop(1, '#fff'); - <span class="keyword token">var</span> lingrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">95</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 0, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)'); - <span class="comment token">// assigner des dégradés aux styles "fill" et "stroke"</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> lingrad<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> lingrad2<span class="punctuation token">;</span> + // assigner des dégradés aux styles "fill" et "stroke" + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; - <span class="comment token">// Dessiner des formes</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // Dessiner des formes + ctx.fillRect(10, 10, 130, 130); + ctx.strokeRect(50, 50, 50, 50); -<span class="punctuation token">}</span></code></pre> +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js hidden">draw();</pre> </div> -<p><span id="result_box" lang="fr"><span>Le premier est un dégradé d'arrière-plan.</span> <span>Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position.</span> <span>Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert.</span> <span>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.</span> <span>Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.</span></span></p> - -<p><span id="result_box" lang="fr"><span>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.</span> <span>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.</span></span></p> - -<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> +<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> -<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3> +<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> -<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous définirons quatre dégradés radiaux différents.</span> <span>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 </span><span>où le dégradé se développe vers l'extérieur dans une forme circulaire).</span></span></p> +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}</p> -<pre class="brush: js;highlight[5,10,15,20] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<h3 id="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3> - <span class="comment token">// Créer un dégradé</span> - <span class="keyword token">var</span> radgrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">52</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#A7D30C'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.9</span><span class="punctuation token">,</span> <span class="string token">'#019F62'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(1, 159, 98, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<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> - <span class="keyword token">var</span> radgrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">112</span><span class="punctuation token">,</span> <span class="number token">120</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#FF5F98'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.75</span><span class="punctuation token">,</span> <span class="string token">'#FF0188'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(255, 1, 136, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> radgrad3 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">95</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">102</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00C9FF'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#00B5E2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 201, 255, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> radgrad4 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">90</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#F4F201'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#E4C700'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(228, 199, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); - <span class="comment token">// dessiner des formes</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad4<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad3<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad2<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + // Créer un dégradé + var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)'); + + var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)'); + + var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)'); + + var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)'); + + // dessiner des formes + ctx.fillStyle = radgrad4; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0, 0, 150, 150); + ctx.fillStyle = radgrad; + ctx.fillRect(0, 0, 150, 150); +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p><span id="result_box" lang="fr"><span>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.</span> <span>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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente.</span> <span>Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales.</span> <span>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>.</span></span></p> +<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> -<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}</p> -<h2 id="Patterns" name="Patterns">Modèles</h2> +<h2 id="Patterns">Modèles</h2> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Il existe cependant une méthode beaucoup plus simple : la méthode <code>createPattern ()</code>.</span></span></p> +<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> <dl> <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> - <dd><span id="result_box" lang="fr"><span>Crée et renvoie un nouvel objet de canvas.</span> <span><code>image</code> est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, </span></span> <code>type</code> <span lang="fr"> <span>est une chaîne indiquant comment utiliser l'image.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :</span></span></p> +<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> <dl> <dt><code>repeat</code></dt> - <dd><span id="result_box" lang="fr"><span>Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.</span></span></dd> + <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> @@ -596,125 +574,120 @@ lineargradient<span class="punctuation token">.</span><span class="function toke <dd>Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.</dd> </dl> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle.</span> <span>Par exemple :</span></span></p> +<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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'someimage.png'</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img, 'repeat');</pre> <div class="note"> -<p><strong>Note:</strong> <span id="result_box" lang="fr"><span>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é.</span></span></p> +<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> -<h3 id="A_createPattern_example" name="A_createPattern_example">Un exemple de <code>createPattern</code></h3> +<h3 id="A_createPattern_example">Un exemple de <code>createPattern</code></h3> -<p><span id="result_box" lang="fr"><span>Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété <code>fillStyle</code>.</span> <span>La seule chose à noter, est l'utilisation du gestionnaire <code>onload</code> de l'image.</span> <span>Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.</span></span></p> +<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> -<pre class="brush: js;highlight[10] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); - <span class="comment token">// créer un nouvel objet image à utiliser comme modèle</span> - <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'</span><span class="punctuation token">;</span> - img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + // créer un nouvel objet image à utiliser comme modèle + var img = new Image(); + img.src = 'canvas_createpattern.png'; + img.onload = function() { - <span class="comment token">// créer le modèle</span> - <span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> ptrn<span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // créer le modèle + var ptrn = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0, 0, 150, 150); - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> + } +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js hidden">draw();</pre> <p>Le résultat ressemble à ceci :</p> -</div> -<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}</p> <h2 id="Ombres">Ombres</h2> -<p><span id="result_box" lang="fr"><span>L'utilisation des ombres ne comporte que quatre propriétés :</span></span></p> +<p>L'utilisation des ombres ne comporte que quatre propriétés :</p> <dl> <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> - <dd><span id="result_box" lang="fr"><span>Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Indique la taille de l'effet de floutage ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>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;</span> <span>ces valeurs ne sont pas affectées par la matrice de transformation actuelle.</span> <span>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.</span> <span>La valeur par défaut est 0 pour les 2 propriétés.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>La propriété <code>shadowBlur</code> indique la taille de l'effet de flou ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>La propriété <code>shadowColor</code> est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ;</span> <span>par défaut, il est entièrement en noir transparent.</span></span></p> +<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> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Les ombres ne sont dessinées que pour les <a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">opérations de composition</a> <code>source-over</code>.</span></span></p> +<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> -<h3 id="A_shadowed_text_example" name="A_shadowed_text_example">Un exemple de texte ombré</h3> +<h3 id="A_shadowed_text_example">Un exemple de texte ombré</h3> -<p><span id="result_box" lang="fr"><span>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</span></span></p> +<p>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</p> -<pre class="brush: js;highlight[4,5,6,7] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); - ctx<span class="punctuation token">.</span>shadowOffsetX <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>shadowOffsetY <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>shadowBlur <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>shadowColor <span class="operator token">=</span> <span class="string token">'rgba(0, 0, 0, 0.5)'</span><span class="punctuation token">;</span> + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; - ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'20px Times New Roman'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'Black'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Sample String'</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + ctx.font = '20px Times New Roman'; + ctx.fillStyle = 'Black'; + ctx.fillText('Sample String', 5, 30); +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>80<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="80"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}</p> -<p><span id="result_box" lang="fr"><span>Nous allons regarder la propriété de la </span></span> <code>font</code> <em>(police de caratères)</em><span lang="fr"><span> et la méthode <code>fillText</code> dans le chapitre suivant sur le <a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">dessin de texte</a>.</span></span></p> +<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> -<h2 id="Canvas_fill_rules" name="Canvas_fill_rules"><span class="short_text" id="result_box" lang="fr"><span>Règles de remplissage Canvas</span></span></h2> +<h2 id="Canvas_fill_rules">Règles de remplissage Canvas</h2> -<p><span id="result_box" lang="fr"><span>Lors de l'utilisation de <code>fill</code> (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et </span></span> {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , <span lang="fr"> <span>déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non.</span> <span>Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué.</span></span><br> +<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> <ul> - <li><code><strong>"nonzero</strong></code>": la <a class="external external-icon" 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 class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle even-odd</a>.</li> + <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> <p>Dans cet exemple, nous utilisons la règle <code>evenodd</code> .</p> -<pre class="brush: js;highlight[6] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fill</span><span class="punctuation token">(</span><span class="string token">'evenodd'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="100" height="100"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js hidden">draw();</pre> </div> -<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}</p> <p>{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html index 95fa3c4f0e..e37d15eba9 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html @@ -13,13 +13,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- <div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</div> -<div class="summary"> <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> -</div> <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> -<h2 id="Basic_animation_steps" name="Basic_animation_steps">Les étapes d'une animation basique</h2> +<h2 id="Basic_animation_steps">Les étapes d'une animation basique</h2> <p>Voici les étapes à suivre à chaque image dessinée (frame) :</p> @@ -34,7 +32,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu.</li> </ol> -<h2 id="Controlling_an_animation" name="Controlling_an_animation">Contrôle d'une animation</h2> +<h2 id="Controlling_an_animation">Contrôle d'une animation</h2> <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> @@ -60,20 +58,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques <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> <div class="note"> -<p>Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article <a href="https://developer.mozilla.org/fr/docs/Jeux/Anatomie">L'anatomie d'un jeu vidéo</a> dans notre section <a href="https://developer.mozilla.org/fr/docs/Jeux">Développement de jeux vidéo</a>.</p> +<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> <h2 id="Un_système_terrestre_animé">Un système terrestre animé</h2> <p>Cette exemple anime un petit modèle de notre système terrestre.</p> -<pre class="brush: js notranslate">var sun = new Image(); +<pre class="brush: js">var sun = new Image(); var moon = new Image(); var earth = new Image(); function init(){ - sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; - moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; - earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; + sun.src = 'canvas_sun.png'; + moon.src = 'canvas_moon.png'; + earth.src = 'canvas_earth.png'; window.requestAnimationFrame(draw); } @@ -116,17 +114,15 @@ function draw() { init(); </pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="300" height="300"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="300" height="300"></canvas></pre> -<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> +<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}</p> <h2 id="Une_horloge_animée">Une horloge animée</h2> <p>Cette exemple dessine une horloge animée qui affiche l'heure actuelle.</p> -<pre class="brush: js notranslate">function clock(){ +<pre class="brush: js">function clock(){ var now = new Date(); var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); @@ -225,22 +221,20 @@ init(); window.requestAnimationFrame(clock);</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> +<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}</p> <h2 id="Un_panorama_défilant_en_boucle">Un panorama défilant en boucle</h2> -<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" title="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> +<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> -<pre class="brush: js notranslate">var img = new Image(); +<pre class="brush: js">var img = new Image(); // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses // directions, et la vitesse. -img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; +img.src = 'capitan_meadows_yosemite_national_park.jpg'; var CanvasXSize = 800; var CanvasYSize = 200; var speed = 30; // plus elle est basse, plus c'est rapide @@ -324,16 +318,16 @@ function draw() { <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> -<pre class="brush: html notranslate"><canvas id="canvas" width="800" height="200"></canvas></pre> +<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> <p>{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}</p> -<h2 id="Other_examples" name="Other_examples">Autres exemples</h2> +<h2 id="Other_examples">Autres exemples</h2> <dl> - <dt><a href="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">Un raycaster basique avec canvas</a></dt> + <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="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></dt> + <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> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html index 79129b01ae..0faa7a82ec 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base <p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p> -<pre class="brush: html notranslate"><canvas id="tutoriel" width="150" height="150"></canvas> +<pre class="brush: html"><canvas id="tutoriel" width="150" height="150"></canvas> </pre> <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> @@ -29,7 +29,6 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base <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> -<div id="section_2"> <h3 id="Contenu_de_repli">Contenu de repli</h3> <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> @@ -38,7 +37,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base <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> -<pre class="brush: html notranslate"><canvas id="stockGraph" width="150" height="150"> +<pre class="brush: html "><canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 + 0.15 </canvas> @@ -58,21 +57,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base <h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2> -<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 class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> +<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> <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> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');</pre> <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> -<div id="section_5"> <h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2> <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> -<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial'); +<pre class="brush: js">var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -80,14 +78,13 @@ if (canvas.getContext) { } else { // code pour le cas où canvas ne serait pas supporté }</pre> -</div> -</div> + <h2 id="Un_modèle_basique">Un modèle basique</h2> <p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html "><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> @@ -119,7 +116,7 @@ if (canvas.getContext) { <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> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html "><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> @@ -145,6 +142,6 @@ if (canvas.getContext) { <p>Cet exemple ressemble a ceci :</p> -<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> +<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}</p> <p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html index 0cde521d32..f2992ea69d 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html @@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example <p>Ce code configure les valeurs globales utilisées par le reste du programme.</p> -<pre class="brush: js notranslate">var canvas1 = document.createElement("canvas"); +<pre class="brush: 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', @@ -65,7 +65,7 @@ var height = 340; <p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p> -<pre class="brush: js notranslate">window.onload = function() { +<pre class="brush: js">window.onload = function() { // lum en sRGB var lum = { r: 0.33, @@ -86,7 +86,7 @@ var height = 340; <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> -<pre class="brush: js notranslate">function createCanvas() { +<pre class="brush: js">function createCanvas() { var canvas = document.createElement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; @@ -162,7 +162,7 @@ function runComposite() { <p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p> -<pre class="brush: js notranslate">var lightMix = function() { +<pre class="brush: js">var lightMix = function() { var ctx = canvas2.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "lighter"; @@ -186,7 +186,7 @@ function runComposite() { }; </pre> -<pre class="brush: js notranslate">var colorSphere = function(element) { +<pre class="brush: js">var colorSphere = function(element) { var ctx = canvas1.getContext("2d"); var width = 360; var halfWidth = width / 2; @@ -218,7 +218,7 @@ function runComposite() { }; </pre> -<pre class="brush: js notranslate">// HSV (1978) = H: Hue / S: Saturation / V: Value +<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { var H = o.H / 360, diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html index 8cde4179fa..0ce19656af 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.html +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html @@ -10,11 +10,9 @@ 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> -<div class="summary"> <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> -</div> -<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2> +<h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2> <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> @@ -27,13 +25,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition <p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p> -<h2 id="Clipping_paths" name="Clipping_paths">Détourage</h2> +<h2 id="Clipping_paths">Détourage</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">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> +<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> + +<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> -<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">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> +<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> <dl> <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt> @@ -42,13 +42,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition <p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p> -<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 <span class="ht">apparente</span>.</p> +<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> -<h3 id="A_clip_example" name="A_clip_example">Un exemple de <code>clip</code></h3> +<h3 id="A_clip_example">Un exemple de <code>clip</code></h3> <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> -<pre class="brush: js;highlight[9] notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); ctx.translate(75, 75); @@ -96,16 +96,14 @@ function drawStar(ctx, r) { } </pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> <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> <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> -<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p> +<p>{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}</p> <p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html index 66e04ba19f..b265fb649a 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -14,17 +14,18 @@ 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> -<p class="summary">Maintenant que nous avons défini notre <a href="https://developer.mozilla.org/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> +<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> <h2 id="La_grille">La grille</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">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> +<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> + +<img alt="" src="canvas_default_grid.png"> <h2 id="Dessin_de_rectangles">Dessin de rectangles</h2> -<p>Au contraire de <a href="/fr/docs/Web/SVG" rel="internal" title="en/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> +<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> -<div id="section_3"> <p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p> <dl> @@ -42,16 +43,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -64,7 +63,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <p>Le résultat de cet exemple est montré ci-dessous.</p> -<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> +<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}</p> <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> @@ -78,7 +77,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <ol> <li>Tout d'abord, vous devez créer le trajet.</li> - <li>Ensuite vous devez utiliser des <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur 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> @@ -88,7 +87,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt> + <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> @@ -100,28 +99,30 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> -<div class="note"><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.</div> +<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> <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> <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> -<div class="note"><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>.</div> +<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> <h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3> <p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -137,7 +138,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <p>Le résultat ressemble à :</p> -<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p> +<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}</p> <h3 id="Déplacement_du_stylo">Déplacement du stylo</h3> @@ -152,16 +153,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function draw() { +<pre class="brush: js">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); @@ -181,12 +180,12 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <p>Le résultat ressemble à ce qui suit :</p> -<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> +<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}</p> <p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p> <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> +<p><strong>Note :</strong> Pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p> </div> <h3 id="Les_lignes">Les lignes</h3> @@ -202,16 +201,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -236,7 +233,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> -<p>{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> +<p>{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}</p> <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> @@ -254,31 +251,29 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> <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> +<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> <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> -<p>Les deux <a href="https://developer.mozilla.org/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> +<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> <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> <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> <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> +<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> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="200"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -306,7 +301,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques } </pre> -<p>{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p> +<p>{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}</p> <h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3> @@ -319,7 +314,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">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> +<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> + +<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> @@ -331,16 +328,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -359,22 +354,20 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques } </pre> -<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> +<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}</p> <h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4> <p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -393,7 +386,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques } </pre> -<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> +<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}</p> <h3 id="Rectangles">Rectangles</h3> @@ -410,16 +403,14 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques <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> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canevas" width="150" height="150"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canevas'); if (canevas.getContext) { var ctx = canevas.getContext('2d'); @@ -507,14 +498,11 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { <p>L'image résultante ressemble à ce qui suit :</p> -<div id="section_18"> <p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p> <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> <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> -</div> -</div> <h2 id="Objets_Path2D">Objets Path2D</h2> @@ -523,14 +511,14 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { <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="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd> + <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> -<p>Toutes les <a href="https://developer.mozilla.org/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> +<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> <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> @@ -543,16 +531,14 @@ new Path2D(d); // trajet depuis des données de trajet SVG</code></pre> <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> -<div class="hidden"> -<pre class="brush: html notranslate"><html> +<pre class="brush: html hidden"><html> <body onload="dessiner();"> <canvas id="canvas" width="130" height="100"></canvas> </body> </html> </pre> -</div> -<pre class="brush: js;highlight[6,9] notranslate">function dessiner() { +<pre class="brush: js">function dessiner() { var canevas = document.getElementById('canvas'); if (canevas.getContext){ var ctx = canevas.getContext('2d'); @@ -569,13 +555,13 @@ new Path2D(d); // trajet depuis des données de trajet SVG</code></pre> } }</pre> -<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p> +<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}</p> <h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3> -<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="https://developer.mozilla.org/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> +<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> -<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="https://developer.mozilla.org/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p> +<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> <pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre> diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html index 463e89310b..4a1dfdcfa8 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html @@ -11,7 +11,7 @@ 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> -<p class="summary">Après avoir vu comment <a href="https://developer.mozilla.org/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> +<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> <h2 id="Dessin_de_texte">Dessin de texte</h2> @@ -24,60 +24,56 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd> </dl> -<h3 id="A_fillText_example" name="A_fillText_example">Un exemple fillText</h3> +<h3 id="A_fillText_example">Un exemple fillText</h3> -<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</span></span></p> +<p>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</p> -<pre class="brush: js;highlight[4] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js hidden">draw();</pre> <p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> -<h3 id="A_strokeText_example" name="A_strokeText_example">Un exemple de strokeText</h3> +<h3 id="A_strokeText_example">Un exemple de strokeText</h3> -<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le </span></span> <code>strokeStyle</code><span lang="fr"><span> courant.</span></span></p> +<p>Le texte est rempli en utilisant le <code>strokeStyle</code> courant.</p> -<pre class="brush: js;highlight[4] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span> - ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> -<div class="hidden"> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="300" height="100"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +<pre class="brush: js hidden">draw();</pre> <p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> -<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Style de texte</h2> +<h2 id="M.C3.A9thodes">Style de texte</h2> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</span></span></p> +<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> <dl> <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> - <dd><span id="result_box" lang="fr"><span>Le style de texte actuel utilisé lors du dessin du texte.</span> <span>Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}.</span> <span>La police par défaut est 10px sans-serif.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Paramètre d'alignement du texte.</span> <span>Valeurs possibles : </span></span> <code>start</code> <em>(</em><span lang="fr"><span><em>début)</em>, </span></span> <code>end</code> <em>(</em><span lang="fr"><span><em>fin)</em>, </span></span> <code>left</code> <em>(</em><span lang="fr"><span><em>gauche)</em>, </span></span> <code>right</code> <em>(</em><span lang="fr"><span><em>droite)</em> ou </span></span> <code>center</code> <em>(</em><span lang="fr"><span><em>centre)</em>.</span> <span>La valeur par défaut est <code>start</code>.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Paramètre d'alignement de base.</span> <span>Valeurs possibles : </span></span> <code>top</code> <em>(</em><span lang="fr"><span><em>haut)</em>, </span></span> <code>hanging</code> <em>(</em><span lang="fr"><span><em>suspendu)</em>, </span></span> <code>middle</code> <em>(</em><span lang="fr"><span><em>moyen)</em>, </span></span> <code>alphabetic</code> <em>(</em><span lang="fr"><span><em>alphabétique)</em>, </span></span> <code>ideographic</code> <em>(</em><span lang="fr"><span><em>idéographique)</em>, </span></span> <code>bottom</code> <em>(</em><span lang="fr"><span><em>en bas)</em>.</span> <span>La valeur par défaut est </span></span><code>alphabetic</code><span lang="fr"><span>.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Directionnalité.</span> <span>Valeurs possibles: </span></span> <code>ltr</code> <em>(de gauche à droite)</em><span lang="fr"><span>, </span></span> <code>rtl</code> <em>(de droite à gauche)</em><span lang="fr"><span>, <code>inherit</code> <em>(hérité)</em>.</span> <span>La valeur par défaut est <code>inherit</code>.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</span></span></p> +<p>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</p> -<p><span id="result_box" lang="fr"><span>Le diagramme suivant du </span></span> <a class="external external-icon" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> <span lang="fr"><span> illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></span></span></p> +<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> <p><img alt="The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is @@ -92,71 +88,69 @@ baselines, due to glyphs extending far outside the em square." src="http://www.w <h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3> -<p><span id="result_box" lang="fr"><span>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</span></span></p> +<p>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</p> -<pre class="brush: js;highlight[2] line-numbers language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span> -ctx<span class="punctuation token">.</span>textBaseline <span class="operator token">=</span> <span class="string token">'hanging'</span><span class="punctuation token">;</span> -ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100);</pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="Playable_code">Playable code</h4> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>200<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-canvas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>edit<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Edit<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<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.font = "48px serif"; ctx.textBaseline = "hanging"; -ctx.strokeText("Hello world", 0, 100);<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span></code></pre> +ctx.strokeText("Hello world", 0, 100);</textarea></pre> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> edit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'edit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; -<span class="keyword token">function</span> <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} -reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> - <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); -edit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span> +edit.addEventListener('click', function() { + textarea.focus(); +}) -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> -</div> +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas);</pre> <p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> -<h2 id="Mesures_de_texte_avancées"><span class="short_text" id="result_box" lang="fr"><span>Mesures de texte avancées</span></span></h2> +<h2 id="Mesures_de_texte_avancées">Mesures de texte avancées</h2> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> <dl> <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> - <dd><span id="result_box" lang="fr"><span>Retourne un objet </span></span> {{domxref("TextMetrics")}} <span lang="fr"><span> contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</span></span></p> +<p>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</p> -<pre class="brush: js;highlight[3] line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> text <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">measureText</span><span class="punctuation token">(</span><span class="string token">'foo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// objet TextMetrics</span> - text<span class="punctuation token">.</span>width<span class="punctuation token">;</span> <span class="comment token">// 16;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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"><span class="short_text" id="result_box" lang="fr"><span>Notes spécifiques à Gecko</span></span></h2> +<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</span></span></p> +<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> <p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index c02ef18e12..4370d57dec 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -6,13 +6,13 @@ 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> -<div class="summary">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.</div> +<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> <h2 id="Moyen_de_repli">Moyen de repli</h2> <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> -<pre class="brush: html notranslate"><canvas> +<pre class="brush: html"><canvas> <h2>Shapes</h2> <p>A rectangle with a black border. In the background is a pink circle. @@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility <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> -<pre class="brush: html notranslate"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> +<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> </pre> <h2 id="Zones_cibles_hit_Region">Zones cibles (hit Region)</h2> @@ -47,7 +47,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility <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> -<pre class="brush: html notranslate"><canvas id="canvas"></canvas> +<pre class="brush: html"><canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); @@ -66,7 +66,7 @@ canvas.addEventListener('mousemove', function(event) { <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> -<pre class="brush: js notranslate">ctx.addHitRegion({control: element});</pre> +<pre class="brush: js">ctx.addHitRegion({control: element});</pre> <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> diff --git a/files/fr/web/api/canvas_api/tutorial/index.html b/files/fr/web/api/canvas_api/tutorial/index.html index 43019f1319..d10b22ec7a 100644 --- a/files/fr/web/api/canvas_api/tutorial/index.html +++ b/files/fr/web/api/canvas_api/tutorial/index.html @@ -12,42 +12,40 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas --- <div>{{CanvasSidebar}}</div> -<p><img alt="" src="/@api/deki/files/1232/=Canvas_tut_examples.jpg" style="float: right;"></p> +<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> -<p class="summary"><strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="fr/HTML/Canvas"><code><canvas></code></a></strong> est un nouvel élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/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="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="fr/Un_raycaster_basique">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> +<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> -<p><span id="result_box" lang="fr"><span>Ce tutoriel explique comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques 2D, en commençant par les bases.</span> <span>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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Aujourd'hui, tous les principaux navigateurs le prennent en charge.</span></span></p> +<h2 id="Avant_de_commencer">Avant de commencer</h2> -<h2 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h2> +<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> -<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="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/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. <span id="result_box" lang="fr"><span>La taille par défaut de </span></span> canvas <span lang="fr"><span> est 300 px × 150 px (largeur × hauteur).</span> <span>Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>.</span> <span>Afin de dessiner des graphiques sur </span></span> canvas <span lang="fr"><span>, nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</span></span></p> - -<h2 id="Dans_ce_tutoriel" name="Dans_ce_tutoriel">Dans ce tutoriel</h2> +<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base" title="fr/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="fr/Tutoriel_canvas/Formes_géométriques">Dessin de formes géométriques</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs" title="fr/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images" title="fr/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Transformations" title="fr/Tutoriel_canvas/Transformations">Transformations</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing" title="fr/Tutoriel_canvas/Compositions">Compositions et découpage</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques" title="fr/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimisation</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li> + <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> -<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li> - <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</li> - <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">Exemples d'utilisation de canvas</a> (en)</li> + <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> <p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 4d7f4358d2..700966e07c 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -6,9 +6,7 @@ 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> -<div class="summary"> <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> -</div> <h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2> @@ -18,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas <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> -<pre class="brush: js notranslate">myEntity.offscreenCanvas = document.createElement("canvas"); +<pre class="brush: js">myEntity.offscreenCanvas = document.createElement("canvas"); myEntity.offscreenCanvas.width = myEntity.width; myEntity.offscreenCanvas.height = myEntity.height; myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d"); @@ -30,7 +28,7 @@ myEntity.render(myEntity.offscreenContext); <p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p> -<pre class="brush: js notranslate">ctx.drawImage(myImage, 0.3, 0.5); +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); </pre> <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> @@ -45,7 +43,7 @@ myEntity.render(myEntity.offscreenContext); <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> -<pre class="brush: html notranslate"><div id="stage"> +<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> @@ -73,7 +71,7 @@ myEntity.render(myEntity.offscreenContext); <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> -<pre class="brush: js notranslate">var scaleX = window.innerWidth / canvas.width; +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; var scaleY = window.innerHeight / canvas.height; var scaleToFit = Math.min(scaleX, scaleY); @@ -87,7 +85,7 @@ stage.style.transform = "scale(" + scaleToFit + ")"; <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> -<pre class="brush: html notranslate"><canvas id="mycanvas" moz-opaque></canvas></pre> +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> <h3 id="Dautres_conseils">D'autres conseils</h3> @@ -100,7 +98,7 @@ stage.style.transform = "scale(" + scaleToFit + ")"; <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" title="http://jsperf.com">JSPerf</a>.</li> + <li>Tester les performances avec <a href="http://jsperf.com">JSPerf</a>.</li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index 56bd411943..053a07aa30 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -6,9 +6,7 @@ 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> -<div class="summary"> <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> -</div> <h2 id="Lobjet_ImageData">L'objet <code>ImageData</code></h2> @@ -29,51 +27,49 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas <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> -<pre class="brush: js notranslate">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre> +<pre class="brush: js">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre> <p>Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut <code>Uint8ClampedArray.length</code> :</p> -<pre class="brush: js notranslate">var nbOctets = imageData.data.length; +<pre class="brush: js">var nbOctets = imageData.data.length; </pre> <h2 id="Création_dun_objet_ImageData">Création d'un objet <code>ImageData</code></h2> <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> -<pre class="brush: js notranslate">var monImageData = ctx.createImageData(largeur, hauteur);</pre> +<pre class="brush: js">var monImageData = ctx.createImageData(largeur, hauteur);</pre> <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> <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> -<pre class="brush: js notranslate">var monImageData = ctx.createImageData(autreImageData);</pre> +<pre class="brush: js">var monImageData = ctx.createImageData(autreImageData);</pre> <h2 id="Obtention_des_données_pixel_pour_un_contexte">Obtention des données pixel pour un contexte</h2> <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> -<pre class="brush: js notranslate">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre> +<pre class="brush: js">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre> <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> <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> +<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> -<p>Cette méthode est aussi présentée dans l'article <a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo utilisant canvas</a>.</p> +<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> <h3 id="Une_pipette_à_couleur">Une pipette à couleur</h3> -<p>Dans cet exemple, nous utilisons la méthode <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/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> +<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> -<div class="hidden"> -<pre class="brush: html; notranslate"><canvas id="canvas" width="300" height="227" style="float:left"></canvas> +<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> -</div> <pre class="notranslate"><code>var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +img.src = './assets/rhino.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { @@ -97,33 +93,31 @@ canvas.addEventListener('mousemove', pick);</code></pre> <h2 id="Peinture_des_données_pixel_dans_un_contexte">Peinture des données pixel dans un contexte</h2> -<p>Vous pouvez utiliser la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>pour peindre les données pixel dans un contexte :</p> +<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> -<pre class="brush: js notranslate">ctx.putImageData(monImageData, dx, dy); +<pre class="brush: js">ctx.putImageData(monImageData, dx, dy); </pre> <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> <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> -<pre class="brush: js notranslate">ctx.putImageData(monImageData, 0, 0); +<pre class="brush: js">ctx.putImageData(monImageData, 0, 0); </pre> <h3 id="Niveaux_de_gris_et_inversion_de_couleurs">Niveaux de gris et inversion de couleurs</h3> <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> -<div class="hidden"> -<pre class="brush: html; notranslate"><canvas id="canevas" width="300" height="227"></canvas> +<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> -</div> -<pre class="brush: js notranslate">var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +<pre class="brush: js">var img = new Image(); +img.src = './assets/rhino.jpg'; img.onload = function() { dessiner(this); }; @@ -166,20 +160,19 @@ function dessiner(img) { <h2 id="Zoom_et_anticrénelage">Zoom et anticrénelage</h2> -<p><span id="result_box" lang="fr"><span>A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons<span lang="fr"><span> zoomer sur notre image et voir les détails.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous.</span> <span>Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons.</span> <span>Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.</span></span></p> +<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> -<pre class="brush: js notranslate">zoomctx.drawImage(canvas, +<pre class="brush: js">zoomctx.drawImage(canvas, Math.abs(x - 5), Math.abs(y - 5), 10, 10, 0, 0, 200, 200);</pre> -<p><span id="result_box" lang="fr"><span>Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs.</span> <span>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).</span></span></p> +<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> -<h6 class="hidden" id="Zoom_example">Zoom example</h6> +<h3 id="exemple_de_zoom">Exemple de zoom</h3> -<div class="hidden"> -<pre class="brush: html; notranslate"><canvas id="canvas" width="300" height="227"></canvas> +<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"> @@ -188,10 +181,9 @@ function dessiner(img) { </label> </div> </pre> -</div> -<pre class="brush: js notranslate">var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +<pre class="brush: js hidden">var img = new Image(); +img.src = './assets/rhino.jpg'; img.onload = function() { draw(this); }; @@ -226,33 +218,33 @@ function draw(img) { canvas.addEventListener('mousemove', zoom); }</pre> -<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p> +<p>{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }}</p> <h2 id="Sauvegarde_des_images">Sauvegarde des images</h2> -<p><span id="result_box" lang="fr"><span>L' {{domxref ("HTMLCanvasElement")}} fournit une méthode <code>toDataURL ()</code>, utile lors de l'enregistrement d'images.</span> <span>Il retourne un <a href="https://developer.mozilla.org/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 </span></span> <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> <span lang="fr"><span>).</span> <span>L'image renvoyée est dans une résolution de 96 dpi.</span></span></p> +<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> <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><span id="result_box" lang="fr"><span>Crée une image JPG.</span> <span>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.</span></span></dd> + <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> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</span></span></p> +<p>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</p> <dl> <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt> - <dd><span id="result_box" lang="fr"><span>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</span></span></dd> + <dd>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</dd> </dl> <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{domxref("ImageData")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulating video using canvas</a></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> diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html index 61443be765..eec783769b 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations --- <div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div> -<div class="summary">Précédemment dans ce tutoriel, nous avons étudié la <a href="https://developer.mozilla.org/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.</div> +<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> <h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2> @@ -39,7 +39,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p> -<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() { +<pre class="brush: 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 @@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.fillRect(60, 60, 30, 30); // Dessine un rectangle avec les réglages restaurés }</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> <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> @@ -72,17 +70,19 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <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> -<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p> +<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}</p> <h2 id="Déplacement">Déplacement</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"> 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> +<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> <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> +<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> <h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3> @@ -91,7 +91,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <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> -<pre class="brush: js; highlight:[7] language-js notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { @@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations } }</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p> + +<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}</p> <h2 id="Rotation">Rotation</h2> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p> +<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> <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"> + <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> <h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3> @@ -128,10 +129,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <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> <div class="note"> -<p><strong>Rappel :</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> +<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; highlight:[9, 23] notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // rectangles de gauche, rotation depuis l'origine du canevas @@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <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> -<div class="hidden"> -<pre class="brush: html line-numbers notranslate"><canvas id="canvas" width="300" height="200"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="300" height="200"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p> +<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}</p> <h2 id="Mise_à_léchelle">Mise à l'échelle</h2> @@ -188,7 +187,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <p>Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.</p> -<pre class="brush: js; highlight:[6,11] notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // dessine un rectangle simple, mais le met à l'échelle. @@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.fillText('MDN', -135, 120); }</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -<pre class="brush: js line-numbers language-js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p> +<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}</p> <h2 id="Transformation">Transformation</h2> @@ -217,11 +214,8 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <dl> <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt> - <dd>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. 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></dd> -</dl> - -<dl> - <dd>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.</dd> + <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> <p>Les paramètres de cette fonction sont :</p> @@ -247,7 +241,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations <h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3> -<pre class="brush: js; highlight:[12,15] notranslate">function draw() { +<pre class="brush: js">function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var sin = Math.sin(Math.PI / 6); @@ -266,12 +260,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations ctx.fillRect(0, 50, 100, 100); }</pre> -<div class="hidden"> -<pre class="brush: html notranslate"><canvas id="canvas" width="200" height="250"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="200" height="250"></canvas></pre> -<pre class="brush: js notranslate">draw();</pre> -</div> +<pre class="brush: js hidden">draw();</pre> -<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p> +<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}</p> <p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p> diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html index a90c9ff8b3..cd72e968a9 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html @@ -12,7 +12,7 @@ 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> -<p class="summary">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> +<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> <p>L'importation d'images dans un canevas se déroule en deux étapes :</p> @@ -125,22 +125,20 @@ function getMyVideo() { </dl> <div class="note"> -<p>Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <code><svg></code>.</p> +<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> <h3 id="example_a_simple_line_graph">Exemple : un graphique linéaire simple</h3> <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> -<div class="hidden"> - <pre class="brush: html"> +<pre class="brush: html hidden"> <html> <body onload="draw();"> <canvas id="canvas" width="180" height="150"></canvas> </body> </html> - </pre> -</div> +</pre> <pre class="brush: js"> function draw() { @@ -178,18 +176,16 @@ function draw() { <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> <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> +<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> -<div class="hidden"> -<pre class="brush: html"> +<pre class="brush: html hidden"> <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> </pre> -</div> <pre class="brush: js"> function draw() { diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html index 15eb25cea5..f88d7413a9 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.html +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/CanvasGradient/addColorStop <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5,6]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var degrade = ctx.createLinearGradient(0, 0, 200, 0); @@ -52,10 +52,9 @@ ctx.fillRect(10, 10, 200, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillStyle = gradient; ctx.fillRect(10,10,200,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,9 +91,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html index c0e3642253..d51cb083df 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html @@ -26,39 +26,38 @@ translation_of: Web/API/CanvasRenderingContext2D/arc <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>(<font face="Consolas, Liberation Mono, Courier, monospace">angle départ)</font></em></dt> + <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> (<font face="Consolas, Liberation Mono, Courier, monospace">sens anti-horaire)</font></em> {{optional_inline}}</dt> + <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> <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_arc_method" name="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> +<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> <p>Voici un code simple permettant de dessiner un cercle .</p> <h4 id="HTML">HTML</h4> -<pre class="brush: html line-numbers language-html"><code class="language-html"><canvas id="canvas"></canvas></code></pre> +<pre class="brush: html line-numbers"><canvas id="canvas"></canvas></pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js line-numbers language-js"><code class="language-js">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); -ctx.stroke();</code></pre> +ctx.stroke();</pre> <p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -97,20 +96,15 @@ window.addEventListener("load", drawCanvas); <p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> -<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Exemple avec différentes formes</h3> +<h3 id="Different_shapes_demonstrated">Exemple avec différentes formes</h3> <p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p> -<div class="hidden"> -<h6 id="HTML_2">HTML</h6> -<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="200"></canvas> </pre> -<h6 id="JavaScript_2">JavaScript</h6> -</div> - -<pre class="brush: js line-numbers language-js"><code class="language-js">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw shapes @@ -132,9 +126,9 @@ for (var i = 0; i < 4; i++) { ctx.stroke(); } } -}</code></pre> +}</pre> -<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -163,7 +157,7 @@ for (var i = 0; i < 4; i++) { <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")}} ( <span>"L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</span></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> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html index ba95381f7f..e59e5be4a4 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/beginPath <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Premier chemin @@ -49,10 +49,9 @@ ctx.stroke(); <p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -73,7 +72,7 @@ ctx.lineTo(120, 120); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -97,9 +96,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 460) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html index 1bea09a84e..f5e140589e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -96,7 +96,7 @@ ctx.fill(); <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> -<pre class="brush: js; highlight:[6]"> +<pre class="brush: js"> const canvas = document.getElementById("canvas"); const contexte2D = canvas.getContext("2d"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html index 3dcb9a14fb..7bf854557e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect <h2 id="Notes_d'utilisation">Notes d'utilisation</h2> -<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="https://developer.mozilla.org/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> +<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> <h2 id="Exemples">Exemples</h2> @@ -48,7 +48,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[11]">var canevas = document.getElementById("canvas"); +<pre class="brush: js">var canevas = document.getElementById("canvas"); var ctx = canevas.getContext("2d"); ctx.beginPath(); @@ -66,10 +66,9 @@ ctx.clearRect(10, 10, 100, 100); <p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -85,7 +84,7 @@ ctx.stroke(); ctx.clearRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -109,9 +108,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html index 065b755712..ee83dd8db5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -40,10 +40,9 @@ ctx.stroke(); <p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -57,7 +56,7 @@ ctx.closePath(); // draws last line of the triangle ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -81,9 +80,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html index a68f3dee2d..d8bab917a3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> +<p><img alt="" src="mdn-canvas-lineargradient.png"></p> <p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p> @@ -58,7 +58,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); @@ -70,10 +70,9 @@ ctx.fillRect(10, 10, 200, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -86,7 +85,7 @@ ctx.fillStyle = gradient; ctx.fillRect(10,10,200,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -110,9 +109,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html index 7c79ad92e9..e4dae769e1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_direction_property" name="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> +<h3 id="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> <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> @@ -57,10 +57,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.direction = 'ltr'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -95,9 +94,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{EmbedLiveSample('code_jouable', 700, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html index b5c1f9c2e2..92bc5a9b9d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -20,7 +20,7 @@ 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="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p> +<p><img alt="drawImage" src="canvas_drawimage.jpg"></p> <h3 id="Paramètres">Paramètres</h3> @@ -33,7 +33,7 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLar <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><font face="Consolas, Liberation Mono, Courier, monospace">dHauteur</font></dt> + <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> @@ -65,14 +65,14 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLar <h4 id="HTML">HTML</h4> <pre class="brush: html"><canvas id="canvas"></canvas> - <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" + <img id="source" src="rhino.jpg" width="300" height="227"> </div> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("source"); @@ -81,11 +81,10 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> - <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> +<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" /> @@ -95,7 +94,7 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); var textarea = document.getElementById("code"); @@ -120,9 +119,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -152,8 +150,8 @@ window.addEventListener("load", drawCanvas); <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="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">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="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canevas</a>.</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> <h2 id="Notes">Notes</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html index d2c74041da..49a19c218c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> +<h3 id="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> <p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p> @@ -62,10 +62,9 @@ ctx.stroke(); <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> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -76,7 +75,7 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -100,9 +99,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html index 4c30af5f8a..f71a817ce6 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html @@ -45,7 +45,7 @@ void <var><em>ctx</em>.fill(path[, fillRule]);</var> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -53,10 +53,9 @@ ctx.fill(); <p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3> @@ -121,10 +119,9 @@ ctx.stroke();</pre> <p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -145,7 +142,7 @@ ctx.fill("nonzero"); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -169,9 +166,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{EmbedLiveSample('Playable_code_2', 700, 360)}}</p> +<p>{{EmbedLiveSample('code_jouable_2', 700, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html index be4faa09cd..cd98d786b5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect <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><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></code></dt> + <dt><code>largeur</code></dt> <dd>La largeur du rectangle.</dd> <dt><code>hauteur</code></dt> <dd>La hauteur de rectangle.</dd> @@ -43,7 +43,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); @@ -54,10 +54,9 @@ ctx.fillRect(10, 10, 100, 100); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -67,7 +66,7 @@ ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -91,9 +90,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html index 5af7911951..598ec204af 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> +<h3 id="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> <p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p> @@ -55,10 +55,9 @@ ctx.fillRect(10, 10, 100, 100); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -92,19 +91,17 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3> <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> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> </div> -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +<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++){ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + @@ -116,7 +113,7 @@ for (var i = 0; i < 6; i++){ <p>Le résultat devrait ressembler à ça:</p> -<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> +<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html index 6f7801366a..fefd1c875a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; @@ -58,10 +58,9 @@ ctx.fillText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.font = "48px serif"; ctx.fillText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,9 +94,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html index 5c63c6a082..34b90f9580 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/font --- <div>{{APIRef}}</div> -<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" title="fr/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -47,10 +47,9 @@ ctx.strokeText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -60,7 +59,7 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -84,9 +83,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3> diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html index 6ef689a878..94059efba8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <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> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -53,7 +53,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode <code>getImageData</code></h3> -<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p> +<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> <h4 id="HTML">HTML</h4> @@ -62,7 +62,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -95,7 +95,7 @@ console.log(ctx.getImageData(50, 50, 100, 100)); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><span class="short_text" id="result_box" lang="fr"><span>L'interface le définissant</span></span> : {{domxref("CanvasRenderingContext2D")}}.</li> + <li>L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.</li> <li>{{domxref("ImageData")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> + <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> </ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html index c8765a8302..5b404da724 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> +<h3 id="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> <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> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.globalAlpha = 0.5; @@ -56,10 +56,9 @@ ctx.fillRect(50, 50, 100, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100);</textarea> </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); +<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacement = document.getElementById('effacement'); @@ -98,11 +97,10 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 380) }}</p> -<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> +<h3 id="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> <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> @@ -130,11 +128,9 @@ for (i = 0; i < 7; i++){ } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html index 41d0231381..7291e23e2b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'xor'; diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html index 3e690113b0..d9064377d8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -28,82 +28,47 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="exemples">exemples</h2> -<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>imageSmoothingEnabled</code></h3> +<h3 id="désactiver_le_lissage_d_image">Désactiver le lissage d'image</h3> -<p>Ceci est juste un simple fragment de code utilisant la propriété <code>imageSmoothingEnabled</code> sur une image mise à l'échelle.</p> +<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> <h4 id="HTML">HTML</h4> -<pre class="brush: html"><canvas id="canevas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[7-10]">var canevas = document.getElementById('canevas'); -var ctx = canevas.getContext('2d'); +<pre class="brush: js;">const canvas = document.getElementById('canvas'); -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +const ctx = canvas.getContext('2d'); +ctx.font = '16px sans-serif'; +ctx.textAlign = 'center'; + +const img = new Image(); +img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -}; -</pre> + const w = img.width, + h = img.height; -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :</p> + ctx.fillText('Source', w * .5, 20); + ctx.drawImage(img, 0, 24, w, h); -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Code jouable</h6> + ctx.fillText('Smoothing = TRUE', w * 2.5, 20); + ctx.imageSmoothingEnabled = true; + ctx.drawImage(img, w, 24, w * 3, h * 3); -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> -<div class="<code>playable-buttons</code>"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> -</div> -<textarea id="code" class="<code>playable-code</code>" style="height:140px;"> -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; -img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -};</textarea> + ctx.fillText('Smoothing = FALSE', w * 5.5, 20); + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, w * 4, 24, w * 3, h * 3); +}; </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); -var ctx = canevas.getContext('2d'); -var textarea = document.getElementById('code'); -var effacer = document.getElementById('effacer'); -var modifier = document.getElementById('modifier'); -var code = textarea.value; - -function dessinerCanevas() { - ctx.clearRect(0, 0, canevas.width, canevas.height); - eval(textarea.value); -} - -effacer.addEventListener('click', function() { - textarea.value = code; - dessinerCanevas(); -}); - -modifier.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', dessinerCanevas); -window.addEventListener('load', dessinerCanevas); -</pre> -</div> +<h4 id="résultat">Résultat</h4> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html index ff51926e44..73758824a3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/index.html @@ -18,13 +18,13 @@ translation_of: Web/API/CanvasRenderingContext2D var ctx = canevas.getContext('2d'); </pre> -<p><span style="line-height: 1.5;">Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</span></p> +<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><span style="line-height: 1.5;">Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le </span><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutoriel canvas</a><span style="line-height: 1.5;"> a davantage d'informations, d'exemples et de ressources également.</span></p> +<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> @@ -162,7 +162,7 @@ ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d' <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="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <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> @@ -349,7 +349,7 @@ ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d' <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" title="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> + <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> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html index e3aab0f6ad..ee87a2aafe 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> +<h3 id="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> <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> @@ -45,7 +45,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[7]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); @@ -58,10 +58,9 @@ ctx.stroke(); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -75,7 +74,7 @@ ctx.lineTo(100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); +<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacer = document.getElementById('effacer'); @@ -99,11 +98,10 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> -<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> <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> @@ -133,11 +131,9 @@ for (var i = 0; i < lineCap.length; i++) { } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html index ca4fbd4f4e..93b38bb13d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> +<p><img alt="" src="canvas_linejoin.png"></p> <dl> <dt><code>"round"</code> (rond)</dt> @@ -53,7 +53,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[5]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 20; @@ -74,9 +74,7 @@ ctx.stroke(); <p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> <pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; @@ -94,7 +92,7 @@ for (let i = 0; i < lineJoin.length; i++) { } </pre> -<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> +<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html index 042f7e9b2a..6ed54f222e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -51,10 +51,9 @@ ctx.stroke(); <p>Éditez le code suivant pour voir les changements en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.lineTo(100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html index ac7e616bbc..ef2a1af3a9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre> diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html index 577b44b58b..958b41c5aa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/CanvasRenderingContext2D/moveTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -49,10 +49,9 @@ ctx.stroke(); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -64,7 +63,7 @@ ctx.lineTo(200, 50); ctx.stroke()</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,9 +87,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html index 4978bdd735..7587faa897 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[7]">const canevas = document.getElementById("canvas"); +<pre class="brush: js">const canevas = document.getElementById("canvas"); const contexte2D= canevas.getContext("2d"); // courbe quadratique de Bézier @@ -76,7 +76,7 @@ contexte2D.fill(); <h4 id="Résultat">Résultat</h4> -<p>Dans cet exemple, le <span style="color: red;">point de contrôle est rouge</span> et les <span style="color: blue;">points de départ et d'arrivée sont en bleu</span>.</p> +<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> <p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p> @@ -93,7 +93,7 @@ contexte2D.fill(); <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> -<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas"); +<pre class="brush: js">const canevas = document.getElementById("canvas"); const contexte2D = canevas.getContext("2d"); contexte2D.beginPath(); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html index 3ae8d57f48..8a822dd115 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -51,10 +51,9 @@ ctx.fill(); <p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -64,7 +63,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,9 +87,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html index 64b4ae5b54..5cde5f8af5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rotate <pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> </pre> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p> +<p><img alt="" src="canvas_grid_rotate.png"></p> <h3 id="Paramètres">Paramètres</h3> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rotate <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rotate(45 * Math.PI / 180); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(70,0,100,30); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,9 +91,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html index b019de39b6..d91e31ffbe 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/save <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // On sauvegarde l'état par défaut diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html index 57ad5c7c11..cb24a37aa0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/scale <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.scale(10, 3); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(10,10,10,10); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,18 +91,16 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3> <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> -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -115,7 +112,7 @@ ctx.fillText("Hello world!", -320, 120); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -139,9 +136,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable_2', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html index f3d654fa01..e8cdb0416e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <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> <div class="note"> -<p>Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> +<p><strong>Note :</strong> Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -69,10 +69,9 @@ ctx.stroke(); <p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -91,7 +90,7 @@ ctx.lineTo(400, 150); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -115,9 +114,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 10, 410) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 10, 410) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html index d5ca251a9d..e66241605d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html @@ -52,7 +52,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.setTransform(1, 1, 0, 1, 0, 0); @@ -61,10 +61,9 @@ ctx.fillRect(0, 0, 100, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.setTransform(1,1,0,1,0,0); ctx.fillRect(0,0,100,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -98,9 +97,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html index cd87ecd629..fd836674ad 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html @@ -33,7 +33,7 @@ void <var><em>ctx</em>.stroke(path);</var> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); @@ -41,10 +41,9 @@ ctx.stroke(); <p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -54,7 +53,7 @@ ctx.rect(10, 10, 100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -78,9 +77,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html index d4dfb4f299..14620b3c66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect <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><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></dt> + <dt>largeur</dt> <dd>La largeur du rectangle.</dd> <dt><code>hauteur</code></dt> <dd>La hauteur de rectangle.</dd> @@ -44,7 +44,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "green"; @@ -53,10 +53,9 @@ ctx.strokeRect(10, 10, 100, 100); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.strokeStyle = "green"; ctx.strokeRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html index 2885a27782..fa703e43d0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeStyle <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> +<h3 id="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> <p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p> @@ -49,10 +49,9 @@ ctx.strokeRect(10, 10, 100, 100); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -62,7 +61,7 @@ ctx.strokeStyle = 'blue'; ctx.strokeRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -86,11 +85,10 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> -<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> <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> @@ -107,13 +105,11 @@ for (var i = 0; i < 6; i++) { } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> <p>Le résultat devrait ressembler à ça:</p> -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html index a118f7a7ab..c1b20a2580 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.font = '48px serif'; @@ -58,10 +58,9 @@ ctx.strokeText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.font = "48px serif"; ctx.strokeText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,9 +94,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html index 5da35b696a..ba3b152f70 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> +<h3 id="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> <p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p> @@ -60,10 +60,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Playable code</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -98,9 +97,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html index 868bc88ac9..c2dadee8db 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> +<h3 id="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> <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> @@ -62,10 +62,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -76,7 +75,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -100,9 +99,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html index 97bd66ac77..c80bc02507 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html @@ -52,7 +52,7 @@ translation_of: Web/API/CanvasRenderingContext2D/transform <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.transform(1, 1, 0, 1, 0, 0); @@ -61,10 +61,9 @@ ctx.fillRect(0, 0, 100, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.transform(1,1,0,1,0,0); ctx.fillRect(0,0,100,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -101,9 +100,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html index 5f0afeb073..9b82274d6d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate <pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var> </pre> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"></p> +<p><img alt="" src="canvas_grid_translate.png"></p> <h3 id="Paramètres">Paramètres</h3> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.translate(50, 50); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(0,0,100,100); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,9 +91,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/characterdata/index.html b/files/fr/web/api/characterdata/index.html index 4277642ada..4ae6c1bbad 100644 --- a/files/fr/web/api/characterdata/index.html +++ b/files/fr/web/api/characterdata/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CharacterData <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> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <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> @@ -46,7 +46,7 @@ translation_of: Web/API/CharacterData <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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -85,5 +85,5 @@ translation_of: Web/API/CharacterData <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a>.</li> + <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a>.</li> </ul> diff --git a/files/fr/web/api/clearinterval/index.html b/files/fr/web/api/clearinterval/index.html index f65d566b16..a6dbfe8cb4 100644 --- a/files/fr/web/api/clearinterval/index.html +++ b/files/fr/web/api/clearinterval/index.html @@ -14,7 +14,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>) </pre> @@ -32,11 +32,11 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval <p>{{jsxref("undefined")}}</p> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> -<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples" title="DOM/window.setInterval#Example">l'exemple <code>setInterval()</code></a>.</p> +<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples">l'exemple <code>setInterval()</code></a>.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/client/index.html b/files/fr/web/api/client/index.html index ceb18926b1..1852bcbdb3 100644 --- a/files/fr/web/api/client/index.html +++ b/files/fr/web/api/client/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Client <dl> <dt>{{domxref("Client.postMessage()")}}</dt> - <dd>Permet à un service worker d'envoyer un message au <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerClient" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object.">ServiceWorkerClient</a></code>.</dd> + <dd>Permet à un service worker d'envoyer un message au <code><a href="/en-US/docs/Web/API/ServiceWorkerClient">ServiceWorkerClient</a></code>.</dd> </dl> <h2 id="Propriétés">Propriétés</h2> @@ -41,7 +41,7 @@ translation_of: Web/API/Client <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> -<pre class="brush: js notranslate">// client service worker (par exemple un document) +<pre class="brush: 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 @@ -86,7 +86,7 @@ self.addEventListener("message", function(e) { <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="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesses</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> diff --git a/files/fr/web/api/clients/claim/index.html b/files/fr/web/api/clients/claim/index.html index 349e8aee72..bd76981af1 100644 --- a/files/fr/web/api/clients/claim/index.html +++ b/files/fr/web/api/clients/claim/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/Clients/claim <h3 id="Valeur_de_retour">Valeur de retour</h3> -<p>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:">Promise</a>.</code></p> +<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</code></p> <h2 id="Exemple">Exemple</h2> diff --git a/files/fr/web/api/clients/get/index.html b/files/fr/web/api/clients/get/index.html index 381478b4bc..dd2d46c018 100644 --- a/files/fr/web/api/clients/get/index.html +++ b/files/fr/web/api/clients/get/index.html @@ -14,8 +14,6 @@ translation_of: Web/API/Clients/get <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> -<div> </div> - <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js">self.clients.get(id).then(function(client) { @@ -31,9 +29,7 @@ translation_of: Web/API/Clients/get <h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dd>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promise</a></code> qui se résoud avec un objet {{domxref("Client")}}.</dd> -</dl> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html index 3607baccad..aab1e6c132 100644 --- a/files/fr/web/api/clients/index.html +++ b/files/fr/web/api/clients/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Clients --- <div>{{APIRef("Service Workers API")}}</div> -<p class="summary">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> +<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> <h2 id="methods">Méthodes</h2> diff --git a/files/fr/web/api/clients/matchall/index.html b/files/fr/web/api/clients/matchall/index.html index 868f7bd22a..2636074f8d 100644 --- a/files/fr/web/api/clients/matchall/index.html +++ b/files/fr/web/api/clients/matchall/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Clients/matchAll --- <div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> -<div>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Clients")}} retourne une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">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> +<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> <div> </div> @@ -26,7 +26,7 @@ translation_of: Web/API/Clients/matchAll <dl> <dt><code>options</code></dt> - <dd>L'objet <code>option</code> vous permet de définir les options pour l'opération. Les options disponibles sont : + <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> @@ -36,9 +36,7 @@ translation_of: Web/API/Clients/matchAll <h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dd>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promesse</a></code> qui se résout avec un tableau d'objets {{domxref("Client")}}.</dd> -</dl> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/clients/openwindow/index.html b/files/fr/web/api/clients/openwindow/index.html index 50282ead56..1116da97f5 100644 --- a/files/fr/web/api/clients/openwindow/index.html +++ b/files/fr/web/api/clients/openwindow/index.html @@ -24,9 +24,7 @@ translation_of: Web/API/Clients/openWindow <h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dd>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.</dd> -</dl> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/clipboard/index.html b/files/fr/web/api/clipboard/index.html index a248206ee7..2dbef5414b 100644 --- a/files/fr/web/api/clipboard/index.html +++ b/files/fr/web/api/clipboard/index.html @@ -15,21 +15,20 @@ translation_of: Web/API/Clipboard --- <p>{{APIRef("Clipboard API")}}</p> -<div class="blockIndicator note"> -<p>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.<br> - 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> +<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> <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> -<p><span class="seoSummary">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.</span> L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.</p> +<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> <p>Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.</p> <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> <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> +<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> <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> @@ -55,7 +54,7 @@ translation_of: Web/API/Clipboard <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> -<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 class="external" href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/" lang="en-US">extensions in Firefox 63</a>.</p> +<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> <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> diff --git a/files/fr/web/api/clipboard/write/index.html b/files/fr/web/api/clipboard/write/index.html index c7b8435565..214a32eac6 100644 --- a/files/fr/web/api/clipboard/write/index.html +++ b/files/fr/web/api/clipboard/write/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Clipboard/write --- <div>{{APIRef("Clipboard API")}}</div> -<p><span class="seoSummary">La methode <strong><code>write()</code></strong> de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier.</span> Elle peut être utilisé pour implémenter une fonctionalité de copier coller.</p> +<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> <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> diff --git a/files/fr/web/api/clipboard/writetext/index.html b/files/fr/web/api/clipboard/writetext/index.html index 4b29e6ed6a..93b7310625 100644 --- a/files/fr/web/api/clipboard/writetext/index.html +++ b/files/fr/web/api/clipboard/writetext/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Clipboard/writeText <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> <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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/clipboard_api/index.html b/files/fr/web/api/clipboard_api/index.html index d87dd0d03c..bef8e4bafd 100644 --- a/files/fr/web/api/clipboard_api/index.html +++ b/files/fr/web/api/clipboard_api/index.html @@ -7,8 +7,8 @@ translation_of: 'Web/API/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> -<div class="notecard 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 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> <p>Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.</p> diff --git a/files/fr/web/api/closeevent/index.html b/files/fr/web/api/closeevent/index.html index 4713523bb0..3873ad5d76 100644 --- a/files/fr/web/api/closeevent/index.html +++ b/files/fr/web/api/closeevent/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/CloseEvent <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" name="Attributes">Constructeur</h2> +<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" name="Attributes">Propriétés</h2> +<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> diff --git a/files/fr/web/api/comment/comment/index.html b/files/fr/web/api/comment/comment/index.html index 3813e32b8e..8e4017c0d3 100644 --- a/files/fr/web/api/comment/comment/index.html +++ b/files/fr/web/api/comment/comment/index.html @@ -19,9 +19,9 @@ translation_of: Web/API/Comment/Comment <h2 id="Exemple">Exemple</h2> -<pre class="brush: js language-js"><code class="language-js">var comment <span class="operator token">=</span> new Comment<span class="function token"><span class="punctuation token">("Test"</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var comment = new Comment("Test");</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -47,7 +47,7 @@ translation_of: Web/API/Comment/Comment <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li> </ul> <p> </p> diff --git a/files/fr/web/api/comment/index.html b/files/fr/web/api/comment/index.html index 0e41471865..804bd44d58 100644 --- a/files/fr/web/api/comment/index.html +++ b/files/fr/web/api/comment/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Comment <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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -66,5 +66,5 @@ translation_of: Web/API/Comment <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> + <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> </ul> diff --git a/files/fr/web/api/compositionevent/index.html b/files/fr/web/api/compositionevent/index.html index 38a29c7202..cf94e5b643 100644 --- a/files/fr/web/api/compositionevent/index.html +++ b/files/fr/web/api/compositionevent/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/CompositionEvent --- <p>{{APIRef("DOM Events")}}</p> -<p>Le <code>CompositionEvent DOM</code> représente les évènements qui <span id="result_box" lang="fr"><span>se produisent en raison de l'utilisateur entrant indirectement le texte.</span></span></p> +<p>Le <code>CompositionEvent DOM</code> représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.</p> <h2 id="Constructeur">Constructeur</h2> @@ -24,9 +24,9 @@ translation_of: Web/API/CompositionEvent <dl> <dt>{{domxref("CompositionEvent.data")}} {{readonlyinline}}</dt> - <dd>Renvoie les caractères générés par la méthode d'entrée <span id="result_box" lang="fr"><span>qui a relevé l'événement ;</span> <span>cela varie en fonction du type d'événement ayant généré l'objet <code>CompositionEvent</code>.</span></span></dd> + <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><span id="result_box" lang="fr"><span>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).</span></span></dd> + <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> <h2 id="Méthodes">Méthodes</h2> @@ -74,6 +74,6 @@ translation_of: Web/API/CompositionEvent <li><code>compositionstart</code></li> <li><code>compositionend</code></li> <li><code>compositionupdate</code></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/UIEvent" title="UIEvent">UIEvent</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="Event">Event</a></li> + <li><a href="/fr/docs/Web/API/UIEvent">UIEvent</a></li> + <li><a href="/fr/docs/Web/API/Event">Event</a></li> </ul> diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html index 37fc75d36c..db81d236b2 100644 --- a/files/fr/web/api/console/assert/index.html +++ b/files/fr/web/api/console/assert/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/console/assert <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <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> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>assertion</code></dt> @@ -39,9 +39,9 @@ console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>sub <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> -<p>Allez voir <a href="https://developer.mozilla.org/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> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -62,11 +62,11 @@ console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>sub <p> </p> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité entre les navigateurs</h2> <p>{{Compat("api.Console.assert")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li> diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html index 8364fc83f4..6c10e8458f 100644 --- a/files/fr/web/api/console/count/index.html +++ b/files/fr/web/api/console/count/index.html @@ -77,9 +77,7 @@ console.count("alice");</pre> <dl> <dt><code>label</code></dt> - <dd>Une chaîne de caractères.</dd> - <dd>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é.</dd> - <dd>S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</dd> + <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> <h2 id="Spécifications">Spécifications</h2> @@ -103,8 +101,4 @@ console.count("alice");</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>{{Compat("api.Console.count")}}</p> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<p>{{Compat("api.Console.count")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html index 2a5106ebfd..7cf74195e7 100644 --- a/files/fr/web/api/console/countreset/index.html +++ b/files/fr/web/api/console/countreset/index.html @@ -25,21 +25,21 @@ translation_of: Web/API/Console/countReset <p>Si le paramètre label à été spécifié :</p> -<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre> +<pre> counter-name: 0</pre> <p>Si aucun label n'as été specifié</p> -<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre> +<pre>default: 0</pre> <h3 id="Warnings">Warnings</h3> -<p>Si <code>label</code> est specifié mais n'existe pas <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset()</code> renvoie cet avertissement :</span></span></span></p> +<p>Si <code>label</code> est specifié mais n'existe pas <code>countReset()</code> renvoie cet avertissement :</p> -<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre> +<pre><code>Counter "counter-name" doesn’t exist.</code></pre> <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> -<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre> +<pre><code>Counter "default" doesn’t exist.</code></pre> <h2 id="Examples">Examples</h2> diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html index fc2f692b32..03082131d9 100644 --- a/files/fr/web/api/console/debug/index.html +++ b/files/fr/web/api/console/debug/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Console/debug --- <div>{{APIRef("Console API")}}</div> -<p><span class="seoSummary">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.</span></p> +<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> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html index a7582315c6..82b45f36cf 100644 --- a/files/fr/web/api/console/dir/index.html +++ b/files/fr/web/api/console/dir/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Console/dir <p>{{AvailableInWorkers}}</p> -<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p> +<p><img src="console-dir.png"></p> <h2 id="Syntaxe">Syntaxe</h2> @@ -61,7 +61,7 @@ translation_of: Web/API/Console/dir <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</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://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li> </ul> diff --git a/files/fr/web/api/console/dirxml/index.html b/files/fr/web/api/console/dirxml/index.html index cad694b8a9..8571cc33a4 100644 --- a/files/fr/web/api/console/dirxml/index.html +++ b/files/fr/web/api/console/dirxml/index.html @@ -54,5 +54,5 @@ translation_of: Web/API/Console/dirxml <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> </ul> diff --git a/files/fr/web/api/console/error/index.html b/files/fr/web/api/console/error/index.html index 46eef2ccd3..21bfa8b40a 100644 --- a/files/fr/web/api/console/error/index.html +++ b/files/fr/web/api/console/error/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Console/error <p>{{AvailableInWorkers}}</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <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>]); @@ -29,7 +29,7 @@ console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p> </div> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>obj1</code> ... <code>objN</code></dt> @@ -40,9 +40,9 @@ console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <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> -<p>Voir <a href="https://developer.mozilla.org/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> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -61,11 +61,11 @@ console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <div>{{Compat("api.Console.error")}}</div> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html index 5b4a81302d..0a3e6f8265 100644 --- a/files/fr/web/api/console/group/index.html +++ b/files/fr/web/api/console/group/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/Console/group <p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> -<p><span id="result_box" lang="fr"><span>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants.</span> <span>Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>.</span> <span>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.</span></span></p> +<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> <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> @@ -39,22 +39,22 @@ translation_of: Web/API/Console/group <p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="string token">"More of level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">console.log("This is the outer level"); +console.group(); +console.log("Level 2"); +console.group(); +console.log("Level 3"); +console.warn("More of level 3"); +console.groupEnd(); +console.log("Back to level 2"); +console.groupEnd(); +console.log("Back to the outer level");</pre> -<p><span class="short_text" id="result_box" lang="fr"><span>La sortie ressemble à ceci :</span></span></p> +<p>La sortie ressemble à ceci :</p> -<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p> +<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="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</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> <h2 id="Spécifications">Spécifications</h2> @@ -82,5 +82,5 @@ console<span class="punctuation token">.</span><span class="function token">log< <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> </ul> diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html index 11679a50e2..5956aca479 100644 --- a/files/fr/web/api/console/groupcollapsed/index.html +++ b/files/fr/web/api/console/groupcollapsed/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/Console/groupCollapsed --- <div>{{APIRef("Console API")}}</div> -<p><span id="result_box" lang="fr"><span>Crée un nouveau groupe intégré dans la</span></span> console Web. <span id="result_box" lang="fr"><span>Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit.</span> <span>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.</span></span></p> +<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> -<p><span lang="fr"><span>Appellez </span></span> {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p> +<p>Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p> -<p>Voir <a href="https://developer.mozilla.org/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> +<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> <p>{{AvailableInWorkers}}</p> @@ -60,5 +60,5 @@ translation_of: Web/API/Console/groupCollapsed <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> </ul> diff --git a/files/fr/web/api/console/groupend/index.html b/files/fr/web/api/console/groupend/index.html index 5bd3f19cb9..bb64ea32cb 100644 --- a/files/fr/web/api/console/groupend/index.html +++ b/files/fr/web/api/console/groupend/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Console/groupEnd --- <p>{{APIRef("Console API")}}</p> -<p>Quitte le groupe en ligne actuel dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">console Web</a>. Voir <a href="https://developer.mozilla.org/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> +<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> <p>{{AvailableInWorkers}}</p> @@ -51,5 +51,5 @@ translation_of: Web/API/Console/groupEnd <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> </ul> diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html index 822d90a5da..3fea02614b 100644 --- a/files/fr/web/api/console/index.html +++ b/files/fr/web/api/console/index.html @@ -11,11 +11,11 @@ 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="https://developer.mozilla.org/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>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. <span id="result_box" lang="fr"><span>Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console.</span> <span>Par exemple :</span></span></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 line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Failed to open the specified link"</span><span class="punctuation token">)</span></code></pre> +<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> @@ -35,7 +35,7 @@ translation_of: Web/API/Console </dl> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</span></span></p> +<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> @@ -46,41 +46,41 @@ translation_of: Web/API/Console <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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , <span id="result_box" lang="fr"><span>cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir</span></span>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd> + <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="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd> + <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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd> + <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="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd> + <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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd> + <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="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd> + <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="https://developer.mozilla.org/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd> + <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="https://developer.mozilla.org/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> + <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" name="Usage">Exemples d'utilisation</h2> +<h2 id="Usage">Exemples d'utilisation</h2> -<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Afficher du texte dans la console</h3> +<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> @@ -115,7 +115,7 @@ console.info("My first car was a", car, ". The object is: ", someObject);</pre> <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> -<table class="standard-table" style="width: auto;"> +<table class="standard-table"> <tbody> <tr> <td class="header">caractère de substitution</td> @@ -127,7 +127,7 @@ console.info("My first car was a", car, ". The object is: ", someObject);</pre> </tr> <tr> <td>%d or %i</td> - <td>Affiche un entier. <span id="result_box" lang="fr"><span>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</span></span></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> @@ -160,23 +160,23 @@ console.info("My first car was a", car, ". The object is: ", someObject);</pre> <p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is %cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: yellow; font-style: italic; background-color: blue;padding: 2px"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div> +<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre> -<div> </div> +<p><img alt="" src="css-styling.png"></p> <div class="note"> -<p> <strong>Note :</strong> <span id="result_box" lang="fr"><span>Un certain nombre de propriétés CSS sont supportées par ce style;</span> <span>vous devriez expérimenter et voir lesquels s'avèrent utiles.</span></span></p> +<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> <p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p> <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> -<div class="note"><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.</div> +<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> -<p class="note">Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p> +<p>Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p> <pre class="brush: js">console.log("This is the outer level"); console.group(); @@ -192,7 +192,7 @@ console.debug("Back to the outer level"); <p>L'affichage ressemblera à ceci :</p> -<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p> +<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> @@ -207,11 +207,13 @@ console.timeEnd("answer time"); <p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p> -<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p> +<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> -<div class="note"><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.</div> +<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> <h3 id="Traces_d'appel">Traces d'appel</h3> @@ -229,9 +231,9 @@ function foo() { <p>L'affichage dans la console ressemblera à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p><img alt="" src="api-trace2.png"></p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -251,18 +253,18 @@ function foo() { <h2 id="Notes">Notes</h2> <ul> - <li><span id="result_box" lang="fr"><span>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</span></span></li> - <li><span id="result_box" lang="fr"><span>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte.</span> <span>À 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à.</span></span></li> - <li><span id="result_box" lang="fr"><span>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par</span></span> <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li> + <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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Outils" title="Tools">Outils de développement</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Console web</a> - <span id="result_box" lang="fr"><span>comment la console Web de Firefox gère les appels d'API de console</span></span></li> - <li><a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - <span id="result_box" lang="fr"><span>comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</span></span></li> - <li><a href="https://developer.mozilla.org/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Journalisation console sur l'appareil</a> - <span class="short_text" id="result_box" lang="fr"><span>comment se connecter sur les appareils Firefox OS</span></span></li> + <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> <h3 id="Autres_implémentations">Autres implémentations</h3> diff --git a/files/fr/web/api/console/info/index.html b/files/fr/web/api/console/info/index.html index 44cac76f82..a9263f8f27 100644 --- a/files/fr/web/api/console/info/index.html +++ b/files/fr/web/api/console/info/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/Console/info --- <p>{{ APIRef("Console API") }}{{Non-standard_header}}</p> -<h2 id="Summary" name="Summary">Résumé</h2> - <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> <p>{{AvailableInWorkers}}</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]); +<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> @@ -34,7 +32,7 @@ console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <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> -<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/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> +<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> <h2 id="Specification">Spécification</h2> diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html index e35031d483..d26727f201 100644 --- a/files/fr/web/api/console/profile/index.html +++ b/files/fr/web/api/console/profile/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/profile --- <p>{{APIRef("Console API")}}{{Non-standard_header}}</p> -<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance">performance de Firefox</a>).</p> +<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="/fr/docs/Outils/Performance">performance de Firefox</a>).</p> <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> diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html index dc76f8eac9..9b267eb029 100644 --- a/files/fr/web/api/console/profileend/index.html +++ b/files/fr/web/api/console/profileend/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/profileEnd <p>{{APIRef("Console API")}}{{Non-standard_header}}</p> <div class="warning"> -<p>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> +<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> <p>La méthode <code>profileEnd</code> arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p> diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html index dabdd1fa6d..1f5beabcd2 100644 --- a/files/fr/web/api/console/table/index.html +++ b/files/fr/web/api/console/table/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Console/table --- <div>{{APIRef("Console API")}}</div> -<p><span class="seoSummary">Affiche des données tabulaires sous la forme d'un tableau.</span></p> +<p>Affiche des données tabulaires sous la forme d'un tableau.</p> <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> @@ -30,7 +30,7 @@ translation_of: Web/API/Console/table console.table(["apples", "oranges", "bananas"]);</pre> -<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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 @@ -43,7 +43,7 @@ var me = new Person("John", "Smith"); console.table(me);</pre> -<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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> @@ -54,7 +54,7 @@ console.table(me);</pre> var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] console.table(people);</pre> -<p><img alt="" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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 @@ -71,7 +71,7 @@ console.table([john, jane, emily]);</pre> <p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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 @@ -83,7 +83,7 @@ family.daughter = new Person("Emily", "Smith"); console.table(family);</pre> -<p><img alt="" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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> @@ -102,7 +102,7 @@ var emily = new Person("Emily", "Jones"); console.table([john, jane, emily], ["firstName"]);</pre> -<p><img alt="" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<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> @@ -113,7 +113,7 @@ console.table([john, jane, emily], ["firstName"]);</pre> <pre class="syntaxbox">console.table(data [, <em>columns]</em>); </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>data</code></dt> @@ -122,7 +122,7 @@ console.table([john, jane, emily], ["firstName"]);</pre> <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd> </dl> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -141,12 +141,6 @@ console.table([john, jane, emily], ["firstName"]);</pre> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <div>{{Compat("api.Console.table")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> -<div id="compat-desktop"> </div> -</div> diff --git a/files/fr/web/api/console/time/index.html b/files/fr/web/api/console/time/index.html index 69c5e481d9..271b2e5497 100644 --- a/files/fr/web/api/console/time/index.html +++ b/files/fr/web/api/console/time/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Console/time --- <p>{{APIRef("Console API")}}</p> -<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 <span style="line-height: inherit;">dans la console.</span></p> +<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> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="en/DOM/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">console.time(<em>label</em>); </pre> @@ -29,7 +29,7 @@ translation_of: Web/API/Console/time <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -56,5 +56,5 @@ translation_of: Web/API/Console/time <ul> <li>{{ domxref("console.timeEnd()") }}</li> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> + <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> </ul> diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html index f4a94062cf..dc45ee8468 100644 --- a/files/fr/web/api/console/timeend/index.html +++ b/files/fr/web/api/console/timeend/index.html @@ -14,9 +14,9 @@ translation_of: Web/API/Console/timeEnd <p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="DOM/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">console.timeEnd(<em>label</em>); </pre> @@ -25,10 +25,10 @@ translation_of: Web/API/Console/timeEnd <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="https://developer.mozilla.org/fr/docs/Outils/Console_Web">Console Web</a>.</dd> + <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> -<h2 id="Spécification" name="Spécification">Spécification</h2> +<h2 id="Spécification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html index 0b06d664eb..cd1f33d3be 100644 --- a/files/fr/web/api/console/timelog/index.html +++ b/files/fr/web/api/console/timelog/index.html @@ -61,7 +61,7 @@ console.timeEnd("answer time");</pre> <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> -<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p> +<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> diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html index 2bc0f56843..ebf2f9bd83 100644 --- a/files/fr/web/api/console/timestamp/index.html +++ b/files/fr/web/api/console/timestamp/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Console/timeStamp --- <div>{{APIRef("Console API")}}{{Non-standard_header}}</div> -<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="https://developer.mozilla.org/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> +<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> <p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p> @@ -38,5 +38,5 @@ translation_of: Web/API/Console/timeStamp <ul> <li>{{domxref("Console.time()")}}</li> <li>{{domxref("Console.timeEnd()")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li> + <li><a href="/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li> </ul> diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html index 35e3cf2838..481fb9f954 100644 --- a/files/fr/web/api/console/trace/index.html +++ b/files/fr/web/api/console/trace/index.html @@ -13,35 +13,35 @@ translation_of: Web/API/Console/trace --- <p>{{ APIRef("Console API") }}</p> -<p>Affiche la <em>stack trace</em> dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Web Console</a>.</p> +<p>Affiche la <em>stack trace</em> dans la <a href="/fr/docs/Outils/Console_Web">Web Console</a>.</p> <p>{{AvailableInWorkers}}</p> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Stack_traces" title="en/DOM/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">console.trace(); </pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">trace</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +<pre class="brush: js">function foo() { + function bar() { + console.trace(); + } + bar(); +} -<span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +foo();</pre> <p>Dans la console, la trace suivante sera affichée :</p> -<pre class="line-numbers language-html"><code class="language-html">bar +<pre class="brush: html">bar foo -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>anonymous</span><span class="punctuation token">></span></span></code></pre> +<anonymous></pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -66,4 +66,4 @@ foo <h2 id="Voir_aussi">Voir aussi</h2> -<p><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p> +<p><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p> diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html index 4da87fa1a3..f67adb3582 100644 --- a/files/fr/web/api/console/warn/index.html +++ b/files/fr/web/api/console/warn/index.html @@ -16,9 +16,11 @@ translation_of: Web/API/Console/warn <p>{{AvailableInWorkers}}</p> -<div class="note"><strong>Note:</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</div> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <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>]); @@ -35,9 +37,9 @@ console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <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> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console" title="en/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -63,6 +65,6 @@ console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li> - <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</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> </ul> diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html index f261988da5..95de8bab21 100644 --- a/files/fr/web/api/console_api/index.html +++ b/files/fr/web/api/console_api/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Console_API --- <div>{{DefaultAPISidebar("Console API")}}</div> -<p><span class="seoSummary">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.</span></p> +<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> <h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> @@ -37,7 +37,7 @@ translation_of: Web/API/Console_API <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">let myString = 'Hello world' +<pre class="brush: js">let myString = 'Hello world' // Output "Hello world" to the console console.log(myString)</pre> @@ -68,7 +68,7 @@ console.log(myString)</pre> <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Tools" title="Tools">Outils</a></li> + <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> diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html index caabff8aaa..f5dd37c020 100644 --- a/files/fr/web/api/credential/index.html +++ b/files/fr/web/api/credential/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Credential <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")}})<span class="hidden"> </span></li> + <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})</li> </ul> </dd> </dl> diff --git a/files/fr/web/api/credential_management_api/index.html b/files/fr/web/api/credential_management_api/index.html index 2f57393cbc..643d918367 100644 --- a/files/fr/web/api/credential_management_api/index.html +++ b/files/fr/web/api/credential_management_api/index.html @@ -13,8 +13,7 @@ translation_of: Web/API/Credential_Management_API <div> <p>{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}</p> -<p class="summary">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> -</div> +<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> <h2 id="Concepts_et_utilisation_de_l'API_Credential_Management">Concepts et utilisation de l'API <em>Credential Management</em></h2> diff --git a/files/fr/web/api/credentialscontainer/create/index.html b/files/fr/web/api/credentialscontainer/create/index.html index 8ff6ad3bfc..88f609ad56 100644 --- a/files/fr/web/api/credentialscontainer/create/index.html +++ b/files/fr/web/api/credentialscontainer/create/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CredentialsContainer/create <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><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">password</span></font>: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}} + <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> @@ -41,7 +41,7 @@ translation_of: Web/API/CredentialsContainer/create <li><code>password</code>: (required) {{domxref("USVString")}}</li> </ul> </li> - <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">federated</span></font> : {{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 : + <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> diff --git a/files/fr/web/api/crypto/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html index 049be85f45..7c0b91e5d7 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.html +++ b/files/fr/web/api/crypto/getrandomvalues/index.html @@ -47,9 +47,9 @@ for (var i = 0; i < array.length; i++) { } </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spec-table standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> @@ -66,7 +66,7 @@ for (var i = 0; i < array.length; i++) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div id="compat-mobile">{{Compat("api.Crypto.getRandomValues")}}</div> +<div>{{Compat("api.Crypto.getRandomValues")}}</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/crypto/index.html b/files/fr/web/api/crypto/index.html index e7cbb32d09..f31a2ebaf6 100644 --- a/files/fr/web/api/crypto/index.html +++ b/files/fr/web/api/crypto/index.html @@ -25,32 +25,30 @@ translation_of: Web/API/Crypto <dl> <dt>{{domxref("RandomSource.getRandomValues()") }}</dt> <dd>Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.</dd> - <dt> - <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> - </dt> - <dt> - <h2 id="Voir_aussi">Voir aussi</h2> - - <ul> - <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> - </ul> - </dt> </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 diff --git a/files/fr/web/api/css/index.html b/files/fr/web/api/css/index.html index e63c612007..93f55c6ad4 100644 --- a/files/fr/web/api/css/index.html +++ b/files/fr/web/api/css/index.html @@ -5,15 +5,15 @@ translation_of: Web/API/CSS --- <div>{{APIRef("CSSOM")}}</div> -<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> possède les <span class="hps">méthodes</span> utiles au CSS<span>.</span> <span class="hps">Aucun objet</span> de <span class="hps">cette interface</span> <span class="hps">ne sont implémentés </span><span>:</span> <span class="hps">il ne contient que</span> <span class="hps">des méthodes statiques</span> <span class="hps">et</span> <span class="hps">est donc une interface</span> <span class="hps">abstraite</span><span>.</span></span></p> +<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> <h2 id="Propriétés">Propriétés</h2> -<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p> +<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> <h2 id="Méthodes">Méthodes</h2> -<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p> +<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> <h2 id="Static_methods">Static methods</h2> diff --git a/files/fr/web/api/css_font_loading_api/index.html b/files/fr/web/api/css_font_loading_api/index.html index deed5bdd38..664e4de90a 100644 --- a/files/fr/web/api/css_font_loading_api/index.html +++ b/files/fr/web/api/css_font_loading_api/index.html @@ -5,10 +5,10 @@ translation_of: Web/API/CSS_Font_Loading_API --- <div>{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}</div> -<p class="summary">L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.</p> +<p>L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.</p> -<div class="notecard 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 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> <h2 id="Interfaces">Interfaces</h2> diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index 04bb432759..4b0fc4ff56 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -9,27 +9,27 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements <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> -<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/width" title="https://developer.mozilla.org/fr/docs/Web/CSS/width">width</a></code> et <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/height" title="https://developer.mozilla.org/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p> +<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> -<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2> +<h2 id="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2> -<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" title="/en/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight" title="/en/DOM/element.offsetHeight">offsetHeight</a></code>.</p> +<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> -<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect" title="/en/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> +<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> <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> -<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> +<p><img src="dimensions-offset.png"></p> -<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2> +<h2 id="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2> -<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" title="/en/DOM/element.clientWidth">clientWidth</a></code> et <a href="/fr/DOM/element.clientHeight" title="/en/DOM/element.clientHeight"><code> clientHeight</code></a> :</p> +<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> -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> +<p><img src="dimensions-client.png"></p> -<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">Grandeur totale</h2> +<h2 id="How_big_is_the_content.3F">Grandeur totale</h2> -<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" title="/en/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight" title="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p> +<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> <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> @@ -38,6 +38,6 @@ translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li> + <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> diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html index 81547c72c2..ae59f591a9 100644 --- a/files/fr/web/api/css_object_model/index.html +++ b/files/fr/web/api/css_object_model/index.html @@ -13,7 +13,6 @@ translation_of: Web/API/CSS_Object_Model <h2 id="Référence">Référence</h2> -<div class="index"> <ul> <li>{{domxref("AnimationEvent")}}</li> <li>{{domxref("CaretPosition")}}</li> @@ -51,7 +50,6 @@ translation_of: Web/API/CSS_Object_Model <li>{{domxref("StylesheetList")}}</li> <li>{{domxref("TransitionEvent")}}</li> </ul> -</div> <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> diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html index 39b279e9d3..73406a99b5 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation <h2 id="Sommaire">Sommaire</h2> -<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/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> +<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> <p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p> <ul> - <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/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 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> @@ -132,7 +132,7 @@ li { <h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2> <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" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/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> +<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> <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> @@ -175,6 +175,6 @@ 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" title="en-US/CSS/Media queries#orientation">Media query orientation</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></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> diff --git a/files/fr/web/api/cssrulelist/index.html b/files/fr/web/api/cssrulelist/index.html index 0fcb6dc857..86f5f4cc8a 100644 --- a/files/fr/web/api/cssrulelist/index.html +++ b/files/fr/web/api/cssrulelist/index.html @@ -8,24 +8,22 @@ translation_of: Web/API/CSSRuleList --- <p>{{ APIRef("CSSOM") }}</p> -<h2 id="Summary" name="Summary">Résumé</h2> +<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> -<p>A <code>CSSRuleList</code> est un objet de type tableau contenant une collection ordonnée d'objects <code><a href="/en/DOM/cssRule" title="en/DOM/cssRule">CSSRule</a></code>.</p> - -<h2 id="Syntax" name="Syntax">Description</h2> +<h2 id="Syntax">Description</h2> <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: 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" name="Notes">Voir aussi</h2> +<h2 id="Notes">Voir aussi</h2> <ul> - <li><code><a href="/en/DOM/cssRule" title="en/DOM/CSSRule">CSSRule</a></code></li> + <li><code><a href="/en/DOM/cssRule">CSSRule</a></code></li> </ul> <h3 id="Implémentations_de_CSSRuleList">Implémentations de CSSRuleList</h3> @@ -39,11 +37,11 @@ var firstRule = document.styleSheets[0].cssRules[0]; <li>{{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}</li> </ul> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external" 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 class="external" 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 class="external" 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 class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">cssRules</a></code></li> - <li><a class="external" href="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule">CSS Animations: <code>CSSKeyframesRule</code> interface</a></li> + <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> diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.html b/files/fr/web/api/cssstyledeclaration/csstext/index.html index 509fcc5969..e8b9d228ae 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.html +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.html @@ -7,16 +7,14 @@ translation_of: Web/API/CSSStyleDeclaration/cssText <div>{{APIRef("CSSOM") }}</div> -<h2 id="Summary" name="Summary">Résumé</h2> +<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> -<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" title="DOM/Using_dynamic_styling_information">Utilisation d'informations de mise en forme dynamiques.</a></p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><em>chaine</em> = elem.style.cssText </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: html"><code><span id="s1" style="</code>color: red;"<code>> Du texte @@ -28,7 +26,7 @@ Du texte </script> </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <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> diff --git a/files/fr/web/api/cssstyledeclaration/index.html b/files/fr/web/api/cssstyledeclaration/index.html index a770fe95fc..e9169825d9 100644 --- a/files/fr/web/api/cssstyledeclaration/index.html +++ b/files/fr/web/api/cssstyledeclaration/index.html @@ -12,17 +12,15 @@ translation_of: Web/API/CSSStyleDeclaration --- <p>{{ APIRef("CSSOM") }}</p> -<h2 id="Summary" name="Summary">Résumé</h2> - <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" title="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>(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" name="Syntax">Attributs</h2> +<h2 id="Syntax">Attributs</h2> <dl> <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt> @@ -47,10 +45,10 @@ translation_of: Web/API/CSSStyleDeclaration <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><span style="color: #ff0000;">Uniquement supporté via getComputedStyle dans Firefox.</span> 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> + <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" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var objStyle = document.styleSheets[0].cssRules[0].style; console.log(objStyle.cssText); @@ -62,17 +60,17 @@ for (var i = objStyle.length; i--;) { console.log(objStyle.cssText);</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<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" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li> </ul> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/cssstylerule/index.html b/files/fr/web/api/cssstylerule/index.html index 28bf895067..01f85ea178 100644 --- a/files/fr/web/api/cssstylerule/index.html +++ b/files/fr/web/api/cssstylerule/index.html @@ -5,11 +5,11 @@ translation_of: Web/API/CSSStyleRule --- <p>{{ APIRef("CSSOM") }}</p> -<p><span id="noHighlight_0.9203101251653377">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).</span></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><span id="noHighlight_0.41769108826443613">La syntaxe est décrite à l'aide du format WebIDL.</span></p> +<p>La syntaxe est décrite à l'aide du format WebIDL.</p> <pre>interface CSSStyleRule : CSSRule { attribute DOMString selectorText; @@ -19,9 +19,9 @@ translation_of: Web/API/CSSStyleRule <h2 id="Properties">Properties</h2> <dl> - <dt id="selectorText">{{domxref("CSSStyleRule.selectorText")}}</dt> - <dd><span id="noHighlight_0.5203750065288182">Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".</span></dd> - <dt id="style">{{domxref("CSSStyleRule.style")}}</dt> + <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> diff --git a/files/fr/web/api/customevent/detail/index.html b/files/fr/web/api/customevent/detail/index.html index 0890ad04bb..17b2453a60 100644 --- a/files/fr/web/api/customevent/detail/index.html +++ b/files/fr/web/api/customevent/detail/index.html @@ -41,7 +41,7 @@ let myDetail = <em>event.detail</em>; <h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="height: 49px; width: 1000px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/customevent/index.html b/files/fr/web/api/customevent/index.html index d49584c1fb..5fcc5dc9a1 100644 --- a/files/fr/web/api/customevent/index.html +++ b/files/fr/web/api/customevent/index.html @@ -15,18 +15,18 @@ translation_of: Web/API/CustomEvent <p>{{AvailableInWorkers}}</p> -<h2 id="Method_overview" name="Method_overview">Constructeur</h2> +<h2 id="Method_overview">Constructeur</h2> <dl> <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt> <dd>Crée un <code>CustomEvent.</code></dd> </dl> -<h2 id="Attributes" name="Attributes">Propriétés</h2> +<h2 id="Attributes">Propriétés</h2> <dl> <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt> - <dd><span id="result_box" lang="fr"><span>Toute donnée transmise lors de l'initialisation de l'événement.</span></span></dd> + <dd>Toute donnée transmise lors de l'initialisation de l'événement.</dd> </dl> <p>Cette interface hérite des propriétés de son parent {{domxref("Event")}}:</p> @@ -37,7 +37,7 @@ translation_of: Web/API/CustomEvent <dl> <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt> - <dd><span id="result_box" lang="fr"><span>Initialise un objet CustomEvent.</span> <span>Si l'événement a déjà été distribué, cette méthode ne fait rien.</span></span></dd> + <dd>Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.</dd> </dl> <p>Cette interface hérite les méthodes de son parent {{domxref("Event")}}:</p> @@ -63,33 +63,29 @@ translation_of: Web/API/CustomEvent </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> - - +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.CustomEvent")}}</p> -<div id="compat-desktop"> <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> -</div> <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> -<p>Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/window">fenêtre</a> que celle où vous déclencherez l'évenement.</p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// doc est une référence au contenu du document</span> -<span class="keyword token">function</span> <span class="function token">dispatchCustomEvent</span><span class="punctuation token">(</span>doc<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> eventDetail <span class="operator token">=</span> Components<span class="punctuation token">.</span>utils<span class="punctuation token">.</span><span class="function token">cloneInto</span><span class="punctuation token">(</span><span class="punctuation token">{</span>foo<span class="punctuation token">:</span> <span class="string token">'bar'</span><span class="punctuation token">}</span><span class="punctuation token">,</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> myEvent <span class="operator token">=</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">CustomEvent</span><span class="punctuation token">(</span><span class="string token">"mytype"</span><span class="punctuation token">,</span> eventDetail<span class="punctuation token">)</span><span class="punctuation token">;</span> - doc<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>myEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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> -<h2 id="Specification" name="Specification">Voir aussi</h2> +<h2 id="Specification">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges" title="/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="https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li> + <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> diff --git a/files/fr/web/api/customevent/initcustomevent/index.html b/files/fr/web/api/customevent/initcustomevent/index.html index 4a1896eb5f..29dfb281d8 100644 --- a/files/fr/web/api/customevent/initcustomevent/index.html +++ b/files/fr/web/api/customevent/initcustomevent/index.html @@ -13,10 +13,10 @@ translation_of: Web/API/CustomEvent/initCustomEvent <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> -<div class="note"> -<p><strong>N'utilisez plus cette méthode car elle est dépréciée.</strong></p> +<div class="warning"> +<p><strong>Attention :</strong> N'utilisez plus cette méthode car elle est dépréciée.</p> -<p>À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page <a href="https://developer.mozilla.org/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> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/datatransfer/cleardata/index.html b/files/fr/web/api/datatransfer/cleardata/index.html index 30ec655f1f..c594fa95e7 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.html +++ b/files/fr/web/api/datatransfer/cleardata/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/DataTransfer/clearData <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> -<p class="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.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -37,7 +39,7 @@ translation_of: Web/API/DataTransfer/clearData <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><span class="tweaked" id="source" draggable="true"> +<pre class="brush: 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> @@ -47,7 +49,7 @@ translation_of: Web/API/DataTransfer/clearData <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css">span.tweaked { +<pre class="brush: css">span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; diff --git a/files/fr/web/api/datatransfer/files/index.html b/files/fr/web/api/datatransfer/files/index.html index 092a1a717e..122add4eae 100644 --- a/files/fr/web/api/datatransfer/files/index.html +++ b/files/fr/web/api/datatransfer/files/index.html @@ -29,8 +29,8 @@ translation_of: Web/API/DataTransfer/files <p>Voici deux exemples :</p> <ul> - <li>Seulement Firefox : <a class="external" href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li> - <li>Tous les navigateurs : <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li> + <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> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/api/datatransfer/index.html b/files/fr/web/api/datatransfer/index.html index 025c439831..45608285ef 100644 --- a/files/fr/web/api/datatransfer/index.html +++ b/files/fr/web/api/datatransfer/index.html @@ -6,11 +6,11 @@ tags: - Glisser-deposer translation_of: Web/API/DataTransfer --- -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'objet</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">DataTransfer</span></code> contient les <span class="hps" title="Cliquer ici pour voir d'autres traductions">données glissées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au cours d'une</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">opération de glisser-</span><span title="Cliquer ici pour voir d'autres traductions">déposer.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenir un ou plusieurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">éléments</span><span class="atn" title="Cliquer ici pour voir d'autres traductions">, du même type ou de types différents</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">Pour plus d'</span><span title="Cliquer ici pour voir d'autres traductions">informations sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser-déposer</span><span title="Cliquer ici pour voir d'autres traductions">, voir</span></span> <a class="internal" href="/fr/docs/Glisser_et_d%C3%A9poser" title="En/DragDrop/Drag and Drop">Glisser et déposer</a>.</p> +<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> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet objet est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponible depuis la propriété</span> <code>dataTransfer</code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de tous les événements de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">séparément.</span></span></p> +<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> -<h2 id="Properties" name="Properties">Aperçu des proprietés</h2> +<h2 id="Properties">Aperçu des proprietés</h2> <table class="standard-table"> <tbody> @@ -19,132 +19,134 @@ translation_of: Web/API/DataTransfer <td class="header">Type</td> </tr> <tr> - <td><code><a href="/En/DragDrop/DataTransfer#dropEffect" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td> - <td><code><a href="/en/String" title="en/String">String</a></code></td> + <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" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td> - <td><code><a href="/en/String" title="en/String">String</a></code></td> + <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" title="En/DragDrop/DataTransfer#files"><code>files</code></a></td> + <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" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }}</td> - <td><code><a href="/en/String" title="en/String">String</a></code></td> + <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" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td> + <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" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }}</td> + <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" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td> - <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td> + <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" title="En/DragDrop/DataTransfer#types">types</a></code></td> - <td><code><a href="/en/DOMStringList" title="en/DOMStringList">StringList</a></code></td> + <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" name="Method_overview">Aperçu des méthodes</h2> +<h2 id="Method_overview">Aperçu des méthodes</h2> <table class="standard-table"> <tbody> <tr> - <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> image)</code></td> + <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" title="en/String">String</a> type])</code></td> + <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" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td> + <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" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td> + <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" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td> + <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" title="en/String">String</a> type, in unsigned long index])</code></td> + <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" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td> + <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" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td> + <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" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td> + <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" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> -<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3> +<h3 id="dropEffect.28.29">dropEffect</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'effet</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> utilisé, qui</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> doit toujours être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'une des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeurs possibles de </span></span><code>effectAllowed</code>.</p> +<p>L'effet utilisé, qui doit toujours être l'une des valeurs possibles de <code>effectAllowed</code>.</p> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">initialisée en fonction des</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">actions initiées par l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à la plateforme</span><span title="Cliquer ici pour voir d'autres traductions">, mais en général</span><span title="Cliquer ici pour voir d'autres traductions">, l'utilisateur peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appuyer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les touches de modification</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ajuster</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'action </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un gestionnaire d'événement</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> peut être modifiée <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'action</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">de l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur demandée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">celle </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span></span></p> +<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> <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> -<p>Pour les évènements <code>drop</code> et <code>dragend</code> , <code>dropEffect</code> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">est initialisé</span> en fonction de l'action initiée, et correspond à la dernière valeur de <code>dropEffect</code> après le dernier<span class="hps" title="Cliquer ici pour voir d'autres traductions"> événement</span> <code>dragenter</code> ou <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <p>Valeurs possibles:</p> <ul> - <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est faite</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li> - <li><strong>move</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément est déplacé vers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nouvel emplacement.</span></span></li> - <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un lien est établi</span> depuis<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> vers le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li> - <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'élément ne peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pas être déposé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li> + <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> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Attribuer</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">conserve</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur.</span></span></p> +<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p> -<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3> +<h3 id="effectAllowed.28.29">effectAllowed</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Indique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont autorisés</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ce</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déplacer.</span> Il peut être spécifié<span class="hps" title="Cliquer ici pour voir d'autres traductions"> dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'évènement <code>dragstart</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la source</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>dragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la cible.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeur n'est pas utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour d'autres événements</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <p>Valeurs possibles:</p> <ul> - <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être faite à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">son nouvel emplacement.</span></span></li> - <li><strong>move</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être déplacé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vers un nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li> - <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lien peut être établi</span> vers<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">depuis le nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li> - <li><strong>copyLink</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou link</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li> - <li><strong>copyMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">move est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">autorisée.</span></span></li> - <li><strong>linkMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération link ou move </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li> - <li><strong>all</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Toutes les opérations</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont autorisées.</span></span></li> - <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut être</span> déposé<span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></li> - <li><strong>uninitialized</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lorsque l'effet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas été spécifié</span><span title="Cliquer ici pour voir d'autres traductions">, ce qui équivaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à all.</span></span></li> + <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> -<p><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">Attribuer</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">conserve</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur</span>.</p> +<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p> -<h3 id="files.28.29" name="files.28.29">files</h3> +<h3 id="files.28.29">files</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste de tous</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les fichiers locaux</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponibles sur le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'implique pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de fichiers</span><span title="Cliquer ici pour voir d'autres traductions">, cette propriété est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste vide.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès à un index</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">invalide sur le {{ domxref("FileList") }}</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié par cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">renvoie <code>null</code>.</span></span></p> +<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> <h4 id="Exemple">Exemple</h4> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet exemple</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retourne la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des fichiers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">traînée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la fenêtre du navigateur</span></span>: <a class="external external-icon" href="http://jsfiddle.net/9C2EF/" style="white-space: pre-line;" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p> +<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> -<h3 id="types.28.29" name="types.28.29">types</h3> +<h3 id="types.28.29">types</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le premier élément</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans le même ordre</span> oú <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données ont été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Une liste vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retournée si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">aucune donnée n'a été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <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> -<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode n'est actuellement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">implémentée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur Windows</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Cette méthode n'est actuellement implémentée que sur Windows.</p> +</div> <h4 id="Valeurs_possibles">Valeurs possibles</h4> @@ -155,81 +157,89 @@ translation_of: Web/API/DataTransfer <dd>Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.</dd> </dl> -<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Si vous spécifiez</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une valeur autre que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">"default"</span><span title="Cliquer ici pour voir d'autres traductions">, "auto"</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est supposé.</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Si vous spécifiez une valeur autre que "default", "auto" est supposé.</p> +</div> -<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3> +<h3 id="mozItemCount.28.29">mozItemCount</h3> -<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Le nombre d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glissés</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<p>Le nombre d'éléments glissés.</p> -<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> +</div> <h3 id="mozSourceNode">mozSourceNode</h3> -<p>le {{ domxref("Node") }} <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">au dessus duquel le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se trouvait lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le bouton</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été pressé</span> pour<span class="hps" title="Cliquer ici pour voir d'autres traductions"> initialiser le glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette valeur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est nulle pour</span> un glisser <span class="hps" title="Cliquer ici pour voir d'autres traductions">externe, ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accéder au</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud.</span></span></p> +<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> -<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> +</div> -<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3> +<h3 id="mozItemCount.28.29">mozUserCancelled</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété s'applique uniquement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'événement</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragend</span></code><span title="Cliquer ici pour voir d'autres traductions">, et est positionnée à <code>true</code></span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'utilisateur a annulé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">en appuyant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur la touche échappe.</span> Elle est <span class="hps" title="Cliquer ici pour voir d'autres traductions">positionnée à <code>false</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans les autres cas</span><span title="Cliquer ici pour voir d'autres traductions">, y compris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si le glisser</span> a <span class="hps" title="Cliquer ici pour voir d'autres traductions">échoué</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour toute autre raison</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">en raison d'</span><span title="Cliquer ici pour voir d'autres traductions">un déposer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un emplacement non valide</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas encore implémenté</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sous Linux.</span></span></p> +<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> -<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est spécifique a Gecko.</p> +</div> -<h2 id="Methods" name="Methods">Methods</h2> +<h2 id="Methods">Methods</h2> -<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3> +<h3 id="addElement.28.29">addElement()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Spécifie</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la source du glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci est rarement utilisé, <span class="hps" title="Cliquer ici pour voir d'autres traductions">mais</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a pour effet de modifier la cible des</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> événements</span> <code>drag</code> et <code>dragend</code><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La cible par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est le nœud qui</span> est<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glissé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <pre class="eval"> void addElement( in Element element ); </pre> -<h6 id="Parameters_addElement" name="Parameters_addElement">Parametres</h6> +<h4 id="Parameters_addElement">Parametres</h4> <dl> <dt><code>element </code></dt> <dd>L'élément à ajouter.</dd> </dl> -<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3> +<h3 id="clearData.28.29">clearData()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées au</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'argument type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est facultatif.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide ou non</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le type spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existent pas,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient pas de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">données,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'aura aucun effet</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <pre class="eval"> void clearData( [optional] in String type ); </pre> -<h6 id="Parameters_clearData" name="Parameters_clearData">Parametres</h6> +<h4 id="Parameters_clearData">Parametres</h4> <dl> <dt><code>type </code></dt> <dd>The type of data to remove.</dd> </dl> -<h3 id="getData.28.29" name="getData.28.29">getData()</h3> +<h3 id="getData.28.29">getData()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">type spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou une chaîne vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de ce type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient aucune donnée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">erreur de sécurité</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se produira si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vous tentez de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">récupérer des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lors d'un glisser</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir d'un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">domaine différent </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">ou auquel l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Ces données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne seront disponibles</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qu'à l'issue du</span> déposer<span class="atn hps" title="Cliquer ici pour voir d'autres traductions"> au cours d'un </span><span title="Cliquer ici pour voir d'autres traductions">événement drop.</span></span></p> +<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> <pre class="eval"> void getData( in String type ); </pre> -<h6 id="Parameters_getData" name="Parameters_getData">Parametres</h6> +<h4 id="Parameters_getData">Parametres</h4> <dl> <dt><code>type </code></dt> <dd>Le type de donnée à récupérer.</dd> </dl> -<h3 id="setData.28.29" name="setData.28.29">setData()</h3> +<h3 id="setData.28.29">setData()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit une donnée</span> pour le<span title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si des données pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas,</span> elle<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée à la fin</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de telle sorte que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le nouveau format.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si une donnée pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">existe déjà,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée existante est remplacée à</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> la même position</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">C'est-à-dire que </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ordre de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types ne change pas </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">lors du remplacement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'un même type</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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> <pre class="eval"> void setData( in String type, @@ -237,7 +247,7 @@ translation_of: Web/API/DataTransfer ); </pre> -<h6 id="Parameters_setData" name="Parameters_setData">Parametres</h6> +<h4 id="Parameters_setData">Parametres</h4> <dl> <dt><code>type </code></dt> @@ -246,13 +256,13 @@ translation_of: Web/API/DataTransfer <dd>La donnée à ajouter.</dd> </dl> -<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3> +<h3 id="setDragImage.28.29">setDragImage()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à utiliser pour</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">, si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image personnalisée </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est souhaitée.</span> Cette méthode est rarement utilisée, dans la mesure oú<span class="hps" title="Cliquer ici pour voir d'autres traductions"> une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image par défaut est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée à partir du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud </span>glissé<span title="Cliquer ici pour voir d'autres traductions">.</span><br> +<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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le nœud est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément HTML</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">img</span><span title="Cliquer ici pour voir d'autres traductions">, un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément canvas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">HTML ou un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément d'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">XUL,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Sinon,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">doit être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nœud</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">visible et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> utilisée pendant le glisser est <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir de ce noeud</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est null</span><span title="Cliquer ici pour voir d'autres traductions">, toute image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">personnalisé est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">effacée et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à la place.</span><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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les coordonnées</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> spécifient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le décalage à l'intérieur de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image spécifiant la position du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour centrer l'image</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">utiliser des valeurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la moitié de la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">largeur et de la hauteur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de l'image.</span></span></p> + 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> <pre class="eval"> void setDragImage( in Element image, @@ -261,7 +271,7 @@ translation_of: Web/API/DataTransfer ); </pre> -<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Parametres</h6> +<h4 id="Parameters_setDragImage">Parametres</h4> <dl> <dt><code>image </code></dt> @@ -272,16 +282,18 @@ translation_of: Web/API/DataTransfer <dd>Décalage vertical à l'intérieur de l'image.</dd> </dl> -<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3> +<h3 id="mozClearDataAt.28.29">mozClearDataAt()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'index est</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> et le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span><br> +<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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément est supprimé</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément entier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est retiré</span><span title="Cliquer ici pour voir d'autres traductions">, réduisant</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par un.</span><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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste <code>format</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide, alors</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les formats</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas trouvé,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">alors cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet.</span></span><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> -<div class="note"><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Note:</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span><span style="line-height: 1.5;">.</span></div> +<div class="note"> + <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> +</div> <pre class="eval"> void mozClearDataAt( [optional] in String type, @@ -289,7 +301,7 @@ translation_of: Web/API/DataTransfer ); </pre> -<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6> +<h4 id="Parameters_mozClearDataAt">Parametres</h4> <dl> <dt><code>type </code></dt> @@ -298,11 +310,13 @@ translation_of: Web/API/DataTransfer <dd>L'index de la donnée à supprimer.</dd> </dl> -<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3> +<h3 id="mozGetDataAt.28.29">mozGetDataAt()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">donné pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou null si elle</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'indice devrait être</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span></span></p> +<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"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p> +</div> <pre class="eval"> nsIVariant mozGetDataAt( [optional] in String type, @@ -310,7 +324,7 @@ translation_of: Web/API/DataTransfer ); </pre> -<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6> +<h4 id="Parameters_mozClearDataAt">Parametres</h4> <dl> <dt><code>type </code></dt> @@ -319,15 +333,17 @@ translation_of: Web/API/DataTransfer <dd>L'indice de la donnée à récupérer.</dd> </dl> -<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3> +<h3 id="mozSetDataAt.28.29">mozSetDataAt()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut stocker</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">plusieurs éléments</span><span title="Cliquer ici pour voir d'autres traductions">, chacun</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">index commençant à zéro</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozSetDataAt</span><span class="atn hps" title="Cliquer ici pour voir d'autres traductions">(</span></code><span title="Cliquer ici pour voir d'autres traductions"><code>)</code> ne peut être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appelé</span> qu'<span class="hps" title="Cliquer ici pour voir d'autres traductions">avec un index</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> inférieur à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément existant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est modifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou égal à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nouvel élément est ajouté</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est incrémenté de un</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br> +<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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les données doivent</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être ajoutées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par ordre de préférence</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">avec le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le plus spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en premier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en dernier.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">du format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié existe</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déjà, elle est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">remplacée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la même position que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée précédente</span><span title="Cliquer ici pour voir d'autres traductions">.</span><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> - <span class="hps" title="Cliquer ici pour voir d'autres traductions">La donnée doit</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">,</span> ou <span class="hps" title="Cliquer ici pour voir d'autres traductions">un type primitif</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">booléen,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou un type numérique </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">(qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera converti en</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">), ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span></span> <a href="/fr/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a>.</p> + 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"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div> +<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, @@ -336,7 +352,7 @@ translation_of: Web/API/DataTransfer ); </pre> -<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parametres</h6> +<h4 id="Parameters_mozSetDataAt">Parametres</h4> <dl> <dt><code>type </code></dt> @@ -347,24 +363,26 @@ translation_of: Web/API/DataTransfer <dd>L'index de la donnée à ajouter.</dd> </dl> -<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3> +<h3 id="mozTypesAt.28.29">mozTypesAt()</h3> -<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'index n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans compris entre</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> 0</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">et le nombre d'</span><span title="Cliquer ici pour voir d'autres traductions">éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">chaîne vide est retournée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p> +<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"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div> +<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> -<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6> +<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" name="See_also">Voir Aussi</h2> +<h2 id="See_also">Voir Aussi</h2> -<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p> +<p><a href="/En/DragDrop/Drag_and_Drop">Drag and Drop</a></p> diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html index c698546a65..919907cd8f 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html +++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope/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> <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> +<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> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html index bc385e15c3..64ab8dff1d 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html @@ -13,26 +13,26 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity --- <p>{{ ApiRef("Device Orientation Events") }}</p> -<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" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">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 <span id="result_box" lang="fr"><span>de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.</span></span></p> +<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> <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">var acceleration = <em>instanceOfDeviceMotionEvent</em>.accelerationIncludingGravity; </pre> -<h2 id="Example" name="Example">Valeur</h2> +<h2 id="Example">Valeur</h2> <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> <dl> <dt><code>x</code></dt> - <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe x qui est l'axe est-ouest.</span></span></dd> + <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 <span id="result_box" lang="fr"><span>sur l'axe </span></span> y qui est l'axe nord-sud</dd> + <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 <span id="result_box" lang="fr"><span>sur l'axe</span></span> z qui est l'axe haut-bas</dd> + <dd>Représente l'accélération sur l'axe z qui est l'axe haut-bas</dd> </dl> <h2 id="Spécifications">Spécifications</h2> @@ -66,6 +66,6 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity <li>{{ domxref("window.ondevicemotion") }}</li> <li>{{ event("deviceorientation") }}</li> <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></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> diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html index 51f9674109..c8fa453f7e 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html @@ -20,15 +20,14 @@ translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent <h3 id="Paramètres">Paramètres</h3> -<p><em>type</em></p> - <dl> + <dt><em>type</em></dt> <dd>Doit être <code>"devicemotion"</code>.</dd> <dt><em>options</em> {{optional_inline}}</dt> - <dd>Les options sont les suivantes : + <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" title="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" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li> + <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> diff --git a/files/fr/web/api/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/index.html index 67d449fc90..259f1c68b0 100644 --- a/files/fr/web/api/devicemotionevent/index.html +++ b/files/fr/web/api/devicemotionevent/index.html @@ -19,32 +19,32 @@ translation_of: Web/API/DeviceMotionEvent <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> <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> +<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> <h2 id="Constructeur">Constructeur</h2> <dl> <dt>{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}</dt> - <dd>Crée un nouvel <code>DeviceMotionEvent</code>.</dd> + <dd><p>Crée un nouvel <code>DeviceMotionEvent</code>.</p></dd> </dl> <h2 id="Propriétés">Propriétés</h2> <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" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd> + <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" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd> + <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><span class="tlid-translation translation" lang="fr"><span title="">Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma.</span></span> Le taux de rotation est exprimé en degrés par seconde.</dd> + <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> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">window.addEventListener('devicemotion', function(event) { +<pre class="brush: js">window.addEventListener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); });</pre> diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.html b/files/fr/web/api/devicemotionevent/rotationrate/index.html index 929f04f6fa..d12e2c76d7 100644 --- a/files/fr/web/api/devicemotionevent/rotationrate/index.html +++ b/files/fr/web/api/devicemotionevent/rotationrate/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/DeviceMotionEvent/rotationRate <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> -<div class="note"><strong>Note </strong>: Si le matériel n'est pas capable de fournir cette information, la propriété renvoie <code>null</code>.</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -65,6 +67,6 @@ translation_of: Web/API/DeviceMotionEvent/rotationRate <li>{{ domxref("window.ondevicemotion") }}</li> <li>{{ event("deviceorientation") }}</li> <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></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> diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html index 1cfc5d6a75..219e4cc1e9 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/DeviceRotationRate/alpha <p>Cette propriété est en lecture seule.</p> -<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3> +<h3 id="Return_Value">Valeur retournée</h3> <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="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd> + <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> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html index 5b9460a141..a5868c5ca1 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html @@ -29,7 +29,7 @@ original_slug: Web/API/DeviceRotationRate/beta <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="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd> + <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> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html index 4ebd62ee90..09b40183ba 100644 --- a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html @@ -25,11 +25,11 @@ original_slug: Web/API/DeviceRotationRate/gamma <p>Cette propriété est en lecture seule.</p> -<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3> +<h3 id="Return_Value">Valeur retournée</h3> <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="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation d'un appareil</a> pour plus de détails.</dd> + <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> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.html b/files/fr/web/api/deviceorientationevent/absolute/index.html index a60703c262..9feaac1fdd 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.html +++ b/files/fr/web/api/deviceorientationevent/absolute/index.html @@ -6,11 +6,9 @@ original_slug: Web/API/DeviceOrientationEvent.absolute --- <p>{{ ApiRef() }}</p> -<h2 id="Summary" name="Summary">Sommaire</h2> +<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> -<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" title="Orientation et mouvement expliqué">Orientation et mouvement expliqué</a> pour plus de détails.</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">var absolute = <em>instanceOfDeviceOrientationEvent</em>.absolute; </pre> @@ -49,8 +47,8 @@ original_slug: Web/API/DeviceOrientationEvent.absolute <ul> <li>{{ domxref("DeviceOrientationEvent") }}</li> - <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li> - <li><a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></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> diff --git a/files/fr/web/api/deviceorientationevent/index.html b/files/fr/web/api/deviceorientationevent/index.html index c5fd5b44e7..fed84dfd6d 100644 --- a/files/fr/web/api/deviceorientationevent/index.html +++ b/files/fr/web/api/deviceorientationevent/index.html @@ -72,6 +72,6 @@ translation_of: Web/API/DeviceOrientationEvent <li>{{ event("deviceorientation") }}</li> <li>{{ domxref("DeviceMotionEvent") }}</li> <li>{{ event("devicemotion") }}</li> - <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li> - <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></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> diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html index fe982e77d7..2b09fac218 100644 --- a/files/fr/web/api/document/activeelement/index.html +++ b/files/fr/web/api/document/activeelement/index.html @@ -8,19 +8,14 @@ translation_of_original: Web/API/Document/activeElement original_slug: Web/API/DocumentOrShadowRoot/activeElement --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<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" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var elemCourant = document.activeElement; </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Exemple">Exemple</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li> -</ul> -<p> </p> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}</p> + <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 diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html index 16b8760df2..3c5270aa80 100644 --- a/files/fr/web/api/document/adoptnode/index.html +++ b/files/fr/web/api/document/adoptnode/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Document/adoptNode <div> </div> -<p><span id="result_box" lang="fr"><span>Adopte un noeud.</span> <span>Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son </span></span> <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> <span lang="fr"><span> (<em>document propriétaire</em>) est remplacé par le document en cours.</span> <span>Le noeud peut ensuite être inséré dans le document en cours.</span></span></p> +<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> <p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>); </pre> <dl> - <dt><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>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" title="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.<span class="hidden"> </span><span class="hidden"> </span></dd> + <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var iframe = document.getElementById('my-iframe'); var iframeImages = iframe.contentDocument.getElementsByTagName('img'); @@ -42,20 +42,20 @@ for (var i = 0; i < iframeImages.length; i++) { } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<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> -<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" title="La méthode Document importNode() crée une nouvelle copie du Node ou 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 appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec - <a href="/fr/docs/Web/API/Document/adoptNode" title="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 (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><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" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p> +<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" title="La méthode Document importNode() crée une nouvelle copie du Node ou 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 appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="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 (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 + <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 class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p><p></p> + <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <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> diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html index d80fd7c834..5f8b845548 100644 --- a/files/fr/web/api/document/alinkcolor/index.html +++ b/files/fr/web/api/document/alinkcolor/index.html @@ -25,9 +25,9 @@ translation_of: Web/API/Document/alinkColor <p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p> -<p><code>document.alinkColor</code> est obsolète dans <a class="external" 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> +<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> -<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a class="external" 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> +<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> <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> diff --git a/files/fr/web/api/document/anchors/index.html b/files/fr/web/api/document/anchors/index.html index 0fc1039a41..ea16e0f96f 100644 --- a/files/fr/web/api/document/anchors/index.html +++ b/files/fr/web/api/document/anchors/index.html @@ -8,12 +8,12 @@ original_slug: Web/API/Document/Document.anchors <p><code>anchors</code> retourne une liste de toutes les ancres du document.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>nodeList</var> = document.anchors; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">if ( document.anchors.length >= 5 ) { dump("Trop d'ancres trouvées !"); @@ -70,11 +70,11 @@ function init() { <p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li> diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html index dfbb22d9b7..ea763af9a4 100644 --- a/files/fr/web/api/document/applets/index.html +++ b/files/fr/web/api/document/applets/index.html @@ -4,14 +4,14 @@ slug: Web/API/Document/applets translation_of: Web/API/Document/applets --- <p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Résumé</h3> + <p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p> -<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<h3 id="Syntax">Syntaxe</h3> <pre class="eval"><em>nodeList</em> = document.applets </pre> -<h3 id="Example" name="Example">Exemple</h3> +<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" name="Specification">Spécification</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> +<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> diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html index 65b872d225..57a6cdfe79 100644 --- a/files/fr/web/api/document/body/index.html +++ b/files/fr/web/api/document/body/index.html @@ -8,12 +8,11 @@ translation_of: Web/API/Document/body --- <div> {{ApiRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> <p>Retourne l'élément <code><body></code> ou <code><frameset></code> du document courant.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var objRef</em> = document.body; document.body = <em>objRef;</em></pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">// dans le HTML: <body id="ancienElementBody"></body> alert(document.body.id); // "ancienElementBody" @@ -23,10 +22,10 @@ unNouvelElementBody .id = "nouvelElementBody"; document.body = unNouvelElementBody ; alert(document.body.id); // "nouvelElementBody" </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<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" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li> + <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> diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html index e0166becb3..ed72fe6bd7 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.html +++ b/files/fr/web/api/document/caretrangefrompoint/index.html @@ -33,10 +33,10 @@ translation_of: Web/API/Document/caretRangeFromPoint <dt>x</dt> <dd>Une position horizontale dans la fenêtre courante.</dd> <dt>y</dt> - <dd>Une position verticale <span class="short_text" id="result_box" lang="fr"><span>dans la fenêtre courante.</span></span></dd> + <dd>Une position verticale dans la fenêtre courante.</dd> </dl> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p> diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html index fb023e7871..d43772b7fb 100644 --- a/files/fr/web/api/document/characterset/index.html +++ b/files/fr/web/api/document/characterset/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/characterSet --- <p>{{ApiRef("DOM")}}</p> -<p><code><strong>Document.characterSet</strong></code> <span id="result_box" lang="fr"><span>propriété en lecture seule, renvoie l'encodage du document en cours</span></span>. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p> +<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> <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> diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html index a8489b0248..24fab67361 100644 --- a/files/fr/web/api/document/clear/index.html +++ b/files/fr/web/api/document/clear/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Document/clear <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> + <li><a href="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> </ul> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html index 0197c02c50..fd984565fe 100644 --- a/files/fr/web/api/document/compatmode/index.html +++ b/files/fr/web/api/document/compatmode/index.html @@ -10,9 +10,9 @@ translation_of: Web/API/Document/compatMode --- <p>{{ ApiRef("DOM") }}</p> -<p>Indique si le document est affiché en mode dégradé (<a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla" title="en/Mozilla's Quirks Mode">Quirks mode</a>) ou dans le respect des standards.</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>mode</em> = document.compatMode </pre> @@ -20,7 +20,7 @@ translation_of: Web/API/Document/compatMode <h2 id="Valeurs">Valeurs</h2> <ul> - <li><code>"BackCompat"</code> si le document est a<span class="hidden"> </span>ffiché en mode<span class="hidden"> </span><span class="hidden"> </span> "quirks" ;<span class="hidden"> </span></li> + <li><code>"BackCompat"</code> si le document est a ffiché en mode "quirks" ; </li> </ul> <dl> @@ -29,25 +29,25 @@ translation_of: Web/API/Document/compatMode </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<span class="hidden"> </span>de "proche du standard").</li> + <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> <dl> </dl> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">if (document.compatMode == "BackCompat") { // en mode Quirks } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> + <li><a href="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> </ul> diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html index 3301c615c1..32d072bbae 100644 --- a/files/fr/web/api/document/contenttype/index.html +++ b/files/fr/web/api/document/contenttype/index.html @@ -14,17 +14,17 @@ translation_of: Web/API/Document/contentType <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><var>contentType</var> = <var>document</var>.contentType; </pre> <p><code>contentType</code> est une propriété en lecture seule.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>La propriété n'est pas affectée par les balises META.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p> diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html index fa0f93d1e0..bfec33bfa2 100644 --- a/files/fr/web/api/document/createattribute/index.html +++ b/files/fr/web/api/document/createattribute/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Document/createAttribute <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> <div class="note"> -<p> <strong>Note : </strong>La chaîne de caractères donnée dans le paramètre est convertie en minuscules. </p> +<p><strong>Note :</strong> La chaîne de caractères donnée dans le paramètre est convertie en minuscules.</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>attribut</em> = document.createAttribute(nom) </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li> @@ -48,7 +48,7 @@ console.log(node.getAttribute("my_attrib")); // "newVal" </pre> <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html index ea4fb083ea..f1a44c9a07 100644 --- a/files/fr/web/api/document/createcdatasection/index.html +++ b/files/fr/web/api/document/createcdatasection/index.html @@ -16,17 +16,17 @@ translation_of: Web/API/Document/createCDATASection <p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data) </pre> <ul> - <li><code>CDATASectionNode</code> est un noeud de <a href="https://developer.mozilla.org/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li> + <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") @@ -38,14 +38,14 @@ alert(new XMLSerializer().serializeToString(docu)); // Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li> diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html index 8aaa2be9f3..5e16be2ecb 100644 --- a/files/fr/web/api/document/createcomment/index.html +++ b/files/fr/web/api/document/createcomment/index.html @@ -12,19 +12,19 @@ translation_of: Web/API/Document/createComment <p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data) </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>data</code></dt> <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd> </dl> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml"); var comment = docu.createComment('Voici un commentaire pas très bien caché'); @@ -37,5 +37,5 @@ alert(new XMLSerializer().serializeToString(docu)); <h2 id="Spécification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li> </ul> diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html index 806a9db921..629d26ed27 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.html +++ b/files/fr/web/api/document/createdocumentfragment/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/createDocumentFragment <p>Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment(); </pre> @@ -27,29 +27,29 @@ translation_of: Web/API/Document/createDocumentFragment <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Cet exemple crée une liste des principaux navigateurs du web.</p> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ul<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><ul id="ul"> +</ul></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// en supposant qu'ul existe</span> -<span class="keyword token">var</span> fragment <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> browsers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">'Chrome'</span><span class="punctuation token">,</span> <span class="string token">'Opera'</span><span class="punctuation token">,</span> - <span class="string token">'Safari'</span><span class="punctuation token">,</span> <span class="string token">'Internet Explorer'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush: js">var element = document.getElementById('ul'); // en supposant qu'ul existe +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; -browsers<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>browser<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - li<span class="punctuation token">.</span>textContent <span class="operator token">=</span> browser<span class="punctuation token">;</span> - fragment<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); -element<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>fragment<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +element.appendChild(fragment);</pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html index e62a086f10..aaf9bf831b 100644 --- a/files/fr/web/api/document/createelement/index.html +++ b/files/fr/web/api/document/createelement/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/createElement --- <div>{{APIRef("DOM")}}</div> -<p>Dans un document <a href="https://developer.mozilla.org/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> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -95,7 +95,7 @@ customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre> <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> <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> +<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> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html index 74f17956dd..4949f5203e 100644 --- a/files/fr/web/api/document/createelementns/index.html +++ b/files/fr/web/api/document/createelementns/index.html @@ -15,31 +15,28 @@ translation_of: Web/API/Document/createElementNS <p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p> -<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement" title="createElement">createElement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement"> </a>.</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span>namespaceURI<span class="punctuation token">,</span> qualifiedName<span class="punctuation token">[</span><span class="punctuation token">,</span> options<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var element = document.createElementNS(namespaceURI, qualifiedName[, options]);</pre> <h3 id="Paramètres">Paramètres</h3> <dl> <dt><code>namespaceURI</code></dt> - <dd>est une chaîne de caractères qui spécifie <a class="external" 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="https://developer.mozilla.org/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> + <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="https://developer.mozilla.org/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><span class="inlineIndicator optional optionalInline">Facultatif</span></dt> - <dd>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, <span id="result_box" lang="fr"><span>dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de </span></span> <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 class="external external-icon" 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.</dd> - <dd><span id="result_box" lang="fr"><span>Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé.</span> <span>Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</span></span></dd> + <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> <h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dd>Le nouvel <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="DOM/element">element</a></code>.</dd> -</dl> +<p>Le nouvel <code><a href="/fr/docs/Web/API/Element">element</a></code>.</p> -<h2 id="Example" name="Example"><a id="URI_d'espaces_de_nom_valides" name="URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></h2> +<h2 id="Example">URI d'espaces de nom valides</h2> <ul> <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li> @@ -48,17 +45,17 @@ translation_of: Web/API/Document/createElementNS <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Cet exemple crée un nouvel élément <div> dans l'espace de noms <a href="https://developer.mozilla.org/fr/docs/XHTML" title="XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL" title="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> +<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> -<pre class="brush:xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>page</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span> - <span class="attr-name token"><span class="namespace token">xmlns:</span>html</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span> - <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>||Working with elements||<span class="punctuation token">"</span></span> - <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<pre class="brush: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()"> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="cdata token"><![CDATA[ +<script type="text/javascript"><![CDATA[ var container; var newdiv; var txtnode; @@ -71,21 +68,21 @@ translation_of: Web/API/Document/createElementNS container.appendChild(newdiv); } -]]></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +]]></script> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>vbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>ContainerBox<span class="punctuation token">'</span></span> <span class="attr-name token">flex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>1<span class="punctuation token">'</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">html:</span>div</span><span class="punctuation token">></span></span> + <vbox id='ContainerBox' flex='1'> + <html:div> Le script sur cette page ajoutera du contenu dynamique ci-dessous : - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">html:</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>vbox</span><span class="punctuation token">></span></span> + </html:div> + </vbox> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>page</span><span class="punctuation token">></span></span></code></pre> +</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" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -111,6 +108,6 @@ translation_of: Web/API/Document/createElementNS <ul> <li><a href="document.createElement">document.createElement</a></li> <li><a href="document.createTextNode">document.createTextNode</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li> - <li><a class="external external-icon" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</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> diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html index c8881dddcb..46269f94bc 100644 --- a/files/fr/web/api/document/createentityreference/index.html +++ b/files/fr/web/api/document/createentityreference/index.html @@ -7,8 +7,8 @@ translation_of: Web/API/Document/createEntityReference <p>{{ obsolete_header("7.0") }}</p> -<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="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_escape_sequences">Les caractères d'échappement</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode">fromCharCode()</a> si nécessaire.</p> +<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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p> diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html index b07312c314..3cccde91e3 100644 --- a/files/fr/web/api/document/createevent/index.html +++ b/files/fr/web/api/document/createevent/index.html @@ -9,26 +9,24 @@ tags: translation_of: Web/API/Document/createEvent --- <div class="warning"> -<p>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" title="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/CustomEvent"> </a>à la place.</p> +<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> <div>{{ ApiRef("DOM") }}</div> -<div> </div> +<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> -<p>Crée un <a href="/en-US/docs/DOM/event" title="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" title="DOM/element.dispatchEvent">element.dispatchEvent</a>.</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>); </pre> <ul> - <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event" title="DOM/event">Event</a> créé.</li> + <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre>// Crée l'événement. var event = document.createEvent('Event'); @@ -36,7 +34,7 @@ var event = document.createEvent('Event'); // Nomme l'événement 'build'. event.initEvent('build', true, true); -// <span class="short_text" id="result_box" lang="fr"><span>Écoute l'événement</span></span>. +// Écoute l'événement. elem.addEventListener('build', function (e) { // e.target correspond à elem }, false); @@ -47,9 +45,9 @@ elem.dispatchEvent(event); <h3 id="Notes">Notes</h3> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</span></span></p> +<p>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</p> <table class="fullwidth-table"> <tbody> @@ -79,12 +77,12 @@ elem.dispatchEvent(event); <h2 id="Spécification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li> + <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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</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> diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html index 57bd734923..778ef4bdd4 100644 --- a/files/fr/web/api/document/createexpression/index.html +++ b/files/fr/web/api/document/createexpression/index.html @@ -10,14 +10,14 @@ translation_of: Web/API/Document/createExpression --- <p>{{ ApiRef("DOM") }}</p> -<p>Cette méthode compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>); </pre> -<h3 id="Arguments" name="Arguments">Paramètres</h3> +<h3 id="Arguments">Paramètres</h3> <ul> <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li> @@ -26,6 +26,6 @@ translation_of: Web/API/Document/createExpression <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> -<h3 id="Return" name="Return">Valeur retournée</h3> +<h3 id="Return">Valeur retournée</h3> -<p><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></p> +<p><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></p> diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html index b43b427f36..7183969144 100644 --- a/files/fr/web/api/document/createnodeiterator/index.html +++ b/files/fr/web/api/document/createnodeiterator/index.html @@ -9,11 +9,11 @@ translation_of: Web/API/Document/createNodeIterator --- <p>{{APIRef("DOM")}}</p> -<p>Renvoie un nouvel objet <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code></a>.</p> +<p>Renvoie un nouvel objet <a href="/fr/docs/Web/API/NodeIterator"><code>NodeIterator</code></a>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval script">var nodeIterator = document.createNodeIterator(root, whatToShow, filter); +<pre class="brush: js">var nodeIterator = document.createNodeIterator(root, whatToShow, filter); </pre> <h3 id="Valeurs">Valeurs</h3> @@ -22,7 +22,7 @@ translation_of: Web/API/Document/createNodeIterator <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" title="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>. + <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> @@ -102,9 +102,11 @@ translation_of: Web/API/Document/createNodeIterator <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"><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.</div> +<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 id="Example" name="Example"><a id="Exemple" name="Exemple"></a>Exemple</h2> +<h2>Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -122,16 +124,16 @@ while (currentNode = nodeIterator.nextNode()) { </pre> -<h3 id="Specification" name="Specification">Compatibilité des navigateurs</h3> +<h3 id="Specification">Compatibilité des navigateurs</h3> <p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p> -<h2 id="Specification" name="Specification">Voir aussi</h2> +<h2 id="Specification">Voir aussi</h2> <ul> - <li><a class="external" href="https://developer.mozilla.org/fr/docs/Web/API/Document/createNodeIterator" title="http://msdn.microsoft.com/en-us/library/ie/ff975301(v=vs.85).aspx">createNodeIterator sur MDN</a></li> + <li><a href="/fr/docs/Web/API/Document/createNodeIterator">createNodeIterator sur MDN</a></li> </ul> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p> diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html index d9546328ae..1311c87a86 100644 --- a/files/fr/web/api/document/creatensresolver/index.html +++ b/files/fr/web/api/document/creatensresolver/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/createNSResolver <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>); </pre> @@ -29,21 +29,21 @@ translation_of: Web/API/Document/createNSResolver <li><code>nsResolver</code> est un objet XPathNSResolver.</li> </ul> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="en/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> +<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> -<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><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></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()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> (<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace" title="en/Introduction_to_using_XPath_in_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="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur" title="en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">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> +<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> <p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript" title="en/Introduction_to_using_XPath_in_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li> + <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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p> diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html index 91c7652457..0bdd5ee83f 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.html +++ b/files/fr/web/api/document/createprocessinginstruction/index.html @@ -12,16 +12,16 @@ tags: - instructions translation_of: Web/API/Document/createProcessingInstruction --- -<p id="Summary">{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}</div> <p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data) </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li> @@ -29,7 +29,7 @@ translation_of: Web/API/Document/createProcessingInstruction <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> -<h3 id="Notes" name="Notes">Exceptions</h3> +<h3 id="Notes">Exceptions</h3> <dl> <dt><code>NOT_SUPPORTED_ERR</code></dt> @@ -38,7 +38,7 @@ translation_of: Web/API/Document/createProcessingInstruction <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre>var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") @@ -50,6 +50,6 @@ alert(new XMLSerializer().serializeToString(docu)); // Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/> </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p> +<p><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p> diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html index 5a187c5f3a..9ef3bffc27 100644 --- a/files/fr/web/api/document/createrange/index.html +++ b/files/fr/web/api/document/createrange/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/createRange <p>Retourne un objet {{domxref("Range")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">range = document.createRange(); </pre> <p><code>range</code> devient un objet {{domxref("Range")}}.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var range = document.createRange(); @@ -27,12 +27,12 @@ range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external external-icon" 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> + <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> diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html index 2455a75c30..7fc4bfe701 100644 --- a/files/fr/web/api/document/createtextnode/index.html +++ b/files/fr/web/api/document/createtextnode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Document/createTextNode <p>Crée un nouveau nœud de texte.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>); </pre> @@ -22,34 +22,34 @@ translation_of: Web/API/Document/createTextNode <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>createTextNode example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">addTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> newtext <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">,</span> - p1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"p1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: 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<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newtext<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + p1.appendChild(newtext); +} +</script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>YES! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>YES!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>NO! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>NO!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>WE CAN! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>WE CAN!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> +<body> + <button onclick="addTextNode('YES! ');">YES!</button> + <button onclick="addTextNode('NO! ');">NO!</button> + <button onclick="addTextNode('WE CAN! ');">WE CAN!</button> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>hr</span> <span class="punctuation token">/></span></span> + <hr /> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>p1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>First line of paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + <p id="p1">First line of paragraph.</p> +</body> +</html></pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html index e956485e62..fce4d88134 100644 --- a/files/fr/web/api/document/defaultview/index.html +++ b/files/fr/web/api/document/defaultview/index.html @@ -3,16 +3,15 @@ title: document.defaultView slug: Web/API/Document/defaultView translation_of: Web/API/Document/defaultView --- -<h2 id="Summary" name="Summary">Résumé</h2> -<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<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" name="Notes">Notes</h2> -<p>D'après <a class="external" 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" name="Specification">Spécification</h2> +<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" title="HTML/HTML5">HTML5: defaultView</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="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> + <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> diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html index e91fdfdf7a..0a4edb5920 100644 --- a/files/fr/web/api/document/designmode/index.html +++ b/files/fr/web/api/document/designmode/index.html @@ -5,11 +5,7 @@ translation_of: Web/API/Document/designMode --- <div>{{ ApiRef() }}</div> -<div> </div> - -<h2 id="Summary" name="Summary">Résumé</h2> - -<p><span id="result_box" lang="fr"><span class="hps">document.designMode</span> <span class="hps">contrôle si</span> <span class="hps">l'ensemble du document</span> <span class="hps">est modifiable.</span> <span class="hps">Les valeurs valides sont</span> <span class="hps">"on"</span> <span class="hps">et "off"</span><span>.</span> <span class="hps">Conformément à la spécification</span><span>,</span> <span class="hps">cette propriété</span> <span class="hps">est par</span> <span class="hps">défaut</span> <span class="hps">sur "off"</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">suit</span> <span class="hps">cette norme</span><span>.</span> <span class="hps">Les</span> <span class="hps">versions antérieures de</span> <span class="hps">Chrome</span> <span class="hps">et IE</span> <span class="hps">ont par défaut la valeur</span><span class="atn hps"> "</span></span><code>inherit</code><span lang="fr"><span>"</span><span>.</span> Pour les versions entre <span class="hps">IE6-10</span><span>,</span> <span class="hps">la valeur</span> <span class="hps">est en majuscule</span><span>.</span></span></p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -17,7 +13,7 @@ translation_of: Web/API/Document/designMode document.designMode = "on"; document.designMode = "off";</pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Rendre un document {{HTMLElement("iframe")}} éditable</p> diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html index e1a40ecb59..03e94f3230 100644 --- a/files/fr/web/api/document/dir/index.html +++ b/files/fr/web/api/document/dir/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Document/dir --- <p>{{ApiRef("")}}</p> -<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} <span class="tlid-translation translation" lang="fr"><span title="">représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche.</span> <span title="">Les valeurs possibles sont</span></span> <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -18,7 +18,7 @@ translation_of: Web/API/Document/dir <em>document.dir</em> = <em>dirStr;</em> </pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html index b3da3b5f6b..7b0e3c2501 100644 --- a/files/fr/web/api/document/document/index.html +++ b/files/fr/web/api/document/document/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Document/Document <p>None.</p> -<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Spécifications</span></p> +<p>Spécifications</p> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html index e345027b13..84e62d8bea 100644 --- a/files/fr/web/api/document/documentelement/index.html +++ b/files/fr/web/api/document/documentelement/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/documentElement --- <p>{{ ApiRef("DOM") }}</p> -<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="https://developer.mozilla.org/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code><html></code> pour les documents HTML).</p> +<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> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var<em> element</em> = document.documentElement; </pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="eval">var racine = document.documentElement; var premierNiveau = racine.childNodes; @@ -30,13 +30,13 @@ for (var i = 0; i < premierNiveau.length; i++) { } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p><span id="result_box" lang="fr"><span>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}.</span> <span>Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</span></span></p> +<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> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html index 3c9f6fcb6f..cc5030a977 100644 --- a/files/fr/web/api/document/documenturiobject/index.html +++ b/files/fr/web/api/document/documenturiobject/index.html @@ -10,17 +10,17 @@ translation_of: Web/API/Document/documentURIObject --- <p>{{ ApiRef("DOM") }}</p> -<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="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>.</p> +<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> <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> -<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="https://developer.mozilla.org/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var uri = doc.documentURIObject;</code></pre> +<pre class="brush: js">var uri = doc.documentURIObject;</pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <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 @@ -33,6 +33,6 @@ if (uriObj.schemeIs('http')) { } </pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html index 94d4f1775b..94575c1b4b 100644 --- a/files/fr/web/api/document/domain/index.html +++ b/files/fr/web/api/document/domain/index.html @@ -14,48 +14,46 @@ translation_of: Web/API/Document/domain --- <div>{{ApiRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> +<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> -<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">politique d'origine identique</a>.</p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush:js" dir="rtl">// Pour le document www.example.xxx/good.html, +<pre class="brush: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> -<pre class="brush:js">// Pour l'URI http://developer.mozilla.org/en-US/docs/Web, ce qui +<pre class="brush: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" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p> -<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" title="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> +<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> <p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p> -<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 class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <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" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</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> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Politique de même origine pour JavaScriptHTML</a></li> + <li><a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">Politique de même origine pour JavaScriptHTML</a></li> </ul> diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html index 29c8b67905..516c713b20 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.html +++ b/files/fr/web/api/document/domcontentloaded_event/index.html @@ -82,10 +82,7 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div></pre> -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { display: grid; grid-template-areas: "control log"; } @@ -114,7 +111,6 @@ label, button { } </pre> -</div> <h4 id="JS">JS</h4> diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html index 958df729b3..e244f365a0 100644 --- a/files/fr/web/api/document/drag_event/index.html +++ b/files/fr/web/api/document/drag_event/index.html @@ -35,28 +35,28 @@ translation_of: Web/API/Document/drag_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -207,7 +207,7 @@ translation_of: Web/API/Document/drag_event }, false); document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir<span class="short_text" id="result_box" lang="fr"><span> comme lien pour certains éléments)</span></span> + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) event.preventDefault(); // Déplace l'élément traîné vers la cible du drop sélectionnée if ( event.target.className == "dropzone" ) { diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html index ac2681db24..ce28cf1673 100644 --- a/files/fr/web/api/document/dragend_event/index.html +++ b/files/fr/web/api/document/dragend_event/index.html @@ -5,19 +5,19 @@ 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 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2> +<h2>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;">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;">Varie</dd> + <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> @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragend_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragend_event </style> <script> - <span>var dragged; + var dragged; - /* </span>Les événements sont déclenchés sur les objets glissables<span> */ + /* Les événements sont déclenchés sur les objets glissables */ document.addEventListener("drag", function( event ) { }, false); document.addEventListener("dragstart", function( event ) { - // </span>Stocke une référence sur l'objet glissable<span> + // Stocke une référence sur l'objet glissable dragged = event.target; - // </span>transparence 50%<span> + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // </span>reset de la transparence<span> + // reset de la transparence event.target.style.opacity = ""; }, false); - /* </span>Les événements sont déclenchés sur les cibles du drop<span> */ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // </span>Empêche default d'autoriser le drop<span> + // Empêche default d'autoriser le drop event.preventDefault(); }, false); document.addEventListener("dragenter", function( event ) { - // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre if ( event.target.className == "dropzone" ) { event.target.style.background = "purple"; } @@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragend_event }, false); document.addEventListener("dragleave", function( event ) { - // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> + // 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 = ""; } @@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragend_event }, false); document.addEventListener("drop", function( event ) { - // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) event.preventDefault(); - // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + // Déplace l'élément traîné vers la cible du drop sélectionnée if ( event.target.className == "dropzone" ) { event.target.style.background = ""; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); } - }, false);</span> + }, false); </script> </pre> diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html index 2bdc66e42e..7f95865724 100644 --- a/files/fr/web/api/document/dragenter_event/index.html +++ b/files/fr/web/api/document/dragenter_event/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/Document/dragenter_event <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 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2> +<h2>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;">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 style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd> + <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> @@ -35,28 +35,28 @@ translation_of: Web/API/Document/dragenter_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -165,33 +165,33 @@ translation_of: Web/API/Document/dragenter_event </style> <script> - <span>var dragged; + var dragged; - /* </span>Les événements sont déclenchés sur les objets glissables<span> */ + /* Les événements sont déclenchés sur les objets glissables */ document.addEventListener("drag", function( event ) { }, false); document.addEventListener("dragstart", function( event ) { - // </span>Stocke une référence sur l'objet glissable<span> + // Stocke une référence sur l'objet glissable dragged = event.target; - // </span>transparence 50%<span> + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // </span>reset de la transparence<span> + // reset de la transparence event.target.style.opacity = ""; }, false); - /* </span>Les événements sont déclenchés sur les cibles du drop<span> */ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // </span>Empêche default d'autoriser le drop<span> + // Empêche default d'autoriser le drop event.preventDefault(); }, false); document.addEventListener("dragenter", function( event ) { - // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre if ( event.target.className == "dropzone" ) { event.target.style.background = "purple"; } @@ -199,7 +199,7 @@ translation_of: Web/API/Document/dragenter_event }, false); document.addEventListener("dragleave", function( event ) { - // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> </span><span> + // 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 = ""; } @@ -207,16 +207,16 @@ translation_of: Web/API/Document/dragenter_event }, false); document.addEventListener("drop", function( event ) { - // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) event.preventDefault(); - // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + // Déplace l'élément traîné vers la cible du drop sélectionnée if ( event.target.className == "dropzone" ) { event.target.style.background = ""; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); } - }, false);</span> + }, false); </script> </pre> diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html index dfccbbc044..9221441d5f 100644 --- a/files/fr/web/api/document/dragleave_event/index.html +++ b/files/fr/web/api/document/dragleave_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/dragleave_event <dl> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <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> @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragleave_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -163,33 +163,33 @@ translation_of: Web/API/Document/dragleave_event </style> <script> - <span>var dragged; + var dragged; - /* </span>Les événements sont déclenchés sur les objets glissables <span>*/ + /* Les événements sont déclenchés sur les objets glissables */ document.addEventListener("drag", function( event ) { }, false); document.addEventListener("dragstart", function( event ) { - // </span>Stocke une référence sur l'objet glissable<span> + // Stocke une référence sur l'objet glissable dragged = event.target; - // </span>transparence 50%<span> + // transparence 50% event.target.style.opacity = .5; }, false); document.addEventListener("dragend", function( event ) { - // </span>reset de la transparence<span> + // reset de la transparence event.target.style.opacity = ""; }, false); - /* </span>Les événements sont déclenchés sur les cibles du drop <span>*/ + /* Les événements sont déclenchés sur les cibles du drop */ document.addEventListener("dragover", function( event ) { - // </span>Empêche default d'autoriser le drop<span> + // Empêche default d'autoriser le drop event.preventDefault(); }, false); document.addEventListener("dragenter", function( event ) { - // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span> + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre if ( event.target.className == "dropzone" ) { event.target.style.background = "purple"; } @@ -197,7 +197,7 @@ translation_of: Web/API/Document/dragleave_event }, false); document.addEventListener("dragleave", function( event ) { - //</span> reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent <span> + // 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 = ""; } @@ -205,16 +205,16 @@ translation_of: Web/API/Document/dragleave_event }, false); document.addEventListener("drop", function( event ) { - // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span> + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) event.preventDefault(); - // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span> + // Déplace l'élément traîné vers la cible du drop sélectionnée if ( event.target.className == "dropzone" ) { event.target.style.background = ""; dragged.parentNode.removeChild( dragged ); event.target.appendChild( dragged ); } - }, false);</span> + }, false); </script> </pre> diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html index 86df0e5440..aca2e8a435 100644 --- a/files/fr/web/api/document/dragover_event/index.html +++ b/files/fr/web/api/document/dragover_event/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Document/dragover_event <dl> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <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> @@ -35,28 +35,28 @@ translation_of: Web/API/Document/dragover_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -138,86 +138,86 @@ translation_of: Web/API/Document/dragover_event <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span> - <span class="operator token"><</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">></span> +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - <span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<span class="operator token"><</span>style<span class="operator token">></span> - #draggable <span class="punctuation token">{</span> - width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> - height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> - text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span> - background<span class="punctuation token">:</span> white<span class="punctuation token">;</span> - <span class="punctuation token">}</span> +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } - <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span> - width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> - height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> - background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span> - margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> - padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="operator token"><</span><span class="operator token">/</span>style<span class="operator token">></span> + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> -<span class="operator token"><</span>script<span class="operator token">></span> - <span class="keyword token">var</span> dragged<span class="punctuation token">;</span> +<script> + var dragged; - <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Stocke une référence sur l'objet glissable</span> - dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span> - <span class="comment token">// transparence 50%</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// reset de la transparence</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); - <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Empêche default d'autoriser le drop</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche default d'autoriser le drop + event.preventDefault(); + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("dragleave", function( event ) { + // 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 = ""; + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span></code></pre> + }, false); +</script></pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html index 4eed44888d..f45827df5c 100644 --- a/files/fr/web/api/document/dragstart_event/index.html +++ b/files/fr/web/api/document/dragstart_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/dragstart_event <dl> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <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> @@ -33,28 +33,28 @@ translation_of: Web/API/Document/dragstart_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html index 68d66c8116..bb3c695f26 100644 --- a/files/fr/web/api/document/drop_event/index.html +++ b/files/fr/web/api/document/drop_event/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Document/drop_event <dl> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd> + <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="https://developer.mozilla.org/fr/docs/Web/API/Document" title="Toute page web chargée dans un navigateur web a son propre objet document. Cet objet sert de point d'entrée au contenu de la page et apporte des fonctions générales au document."><code>Document</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="Ce chapitre fournit une brève référence des méthodes, propriétés et évènements généraux disponibles pour la plupart des éléments HTML et XML au sein du DOM des navigateurs utilisant Gecko."><code>Element</code></a></dd> + <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> @@ -35,28 +35,28 @@ translation_of: Web/API/Document/drop_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -138,88 +138,86 @@ translation_of: Web/API/Document/drop_event <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span> - <span class="operator token"><</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">></span> +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> Cette div peut être glissée - <span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> -<span class="operator token"><</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>div<span class="operator token">></span> + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> -<span class="operator token"><</span>style<span class="operator token">></span> - #draggable <span class="punctuation token">{</span> - width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> - height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> - text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span> - background<span class="punctuation token">:</span> white<span class="punctuation token">;</span> - <span class="punctuation token">}</span> +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } - <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span> - width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span> - height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span> - background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span> - margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> - padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="operator token"><</span><span class="operator token">/</span>style<span class="operator token">></span> + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> -<span class="operator token"><</span>script<span class="operator token">></span> - <span class="keyword token">var</span> dragged<span class="punctuation token">;</span> +<script> + var dragged; - <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Stocke une référence sur l'objet glissable</span> - dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span> - <span class="comment token">// transparence 50%</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// réinitialisation de la transparence</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document.addEventListener("dragend", function( event ) { + // réinitialisation de la transparence + event.target.style.opacity = ""; + }, false); - <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Empêche le comportement par défaut afin d'autoriser le drop</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche le comportement par défaut afin d'autoriser le drop + event.preventDefault(); + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("dragleave", function( event ) { + // 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 = ""; + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + }, false); - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> - event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span></code></pre> - -<p> </p> + }, false); +</script></pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html index 8da838500d..6a4a1f9dfd 100644 --- a/files/fr/web/api/document/elementfrompoint/index.html +++ b/files/fr/web/api/document/elementfrompoint/index.html @@ -8,9 +8,9 @@ translation_of_original: Web/API/Document/elementFromPoint original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<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" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>); </pre> <p>where</p> @@ -18,7 +18,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint <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" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><html> <head> <title>Exemple d'utilisation d'elementFromPoint</title> @@ -40,15 +40,11 @@ function changeColor(newColor) </body> </html> </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<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" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <ul> - <li>Spécification préliminaire : <code><a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li> -</ul> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}</p> + <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 diff --git a/files/fr/web/api/document/elementsfrompoint/index.html b/files/fr/web/api/document/elementsfrompoint/index.html index 106b80d8f1..259d9da6fc 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.html +++ b/files/fr/web/api/document/elementsfrompoint/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">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>).</span></p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -35,7 +35,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint <p>Un tableau (<em>array</em>) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.</p> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <h3 id="HTML">HTML</h3> @@ -48,7 +48,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); +<pre class="brush: js">var output = document.getElementById("output"); if (document.elementsFromPoint) { var elements = document.elementsFromPoint(30, 20); for(var i = 0; i < elements.length; i++) { diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html index d6fb8bc63f..f0aca39903 100644 --- a/files/fr/web/api/document/enablestylesheetsforset/index.html +++ b/files/fr/web/api/document/enablestylesheetsforset/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/enableStyleSheetsForSet <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">document.enableStyleSheetsForSet(<em>name</em>) </pre> @@ -35,15 +35,15 @@ translation_of: Web/API/Document/enableStyleSheetsForSet <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre>document.enableStyleSheetsForSet("Some style sheet set name"); </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> @@ -55,5 +55,5 @@ translation_of: Web/API/Document/enableStyleSheetsForSet <li>{{ domxref("document.preferredStyleSheetSet") }}</li> <li>{{ domxref("document.selectedStyleSheetSet") }}</li> <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes" title="en/Correctly Using Titles With External Stylesheets">Utiliser des titres corrects avec des feuilles de styles externes</a></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> diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html index 3cdf394e5b..03cc732e3e 100644 --- a/files/fr/web/api/document/evaluate/index.html +++ b/files/fr/web/api/document/evaluate/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Document/evaluate --- <p>{{ ApiRef("DOM") }}</p> -<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="XPath">XPath</a> et d'autres paramètres donnés.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/Document/evaluate <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 class="external external-icon" href="http://www.w3.org/TR/xpath" rel="freelink">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</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> @@ -33,7 +33,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Exemples">Exemples</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"> var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); +<pre class="brush: 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,17 +42,17 @@ translation_of: Web/API/Document/evaluate alertText + = thisHeading . textContent + "\n" ; thisHeading = headings . iterateNext ( ) ; } - alert ( alertText ) ; // Alerte le texte de tout élément h2 </code></pre> + alert ( alertText ) ; // Alerte le texte de tout élément h2 </pre> <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> <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> -<pre class="brush: js line-numbers language-js"><code class="language-js">document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); </code></pre> +<pre class="brush: js">document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); </pre> <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> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript" title="Introduction to using XPath in JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a> pour plus d'informations.</p> +<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> <h2 id="Notes">Notes</h2> @@ -155,7 +155,7 @@ translation_of: Web/API/Document/evaluate <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createExpression" title="DOM/document.createExpression">DOM : document.createExpression</a></li> - <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li> + <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> diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html index 77a39c36d2..c581db094d 100644 --- a/files/fr/web/api/document/execcommand/index.html +++ b/files/fr/web/api/document/execcommand/index.html @@ -11,13 +11,7 @@ translation_of: Web/API/Document/execCommand --- <div>{{ApiRef("DOM")}}{{deprecated_header}}</div> -<p><span class="seoSummary">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> - .</span></p> +<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 @@ -36,7 +30,7 @@ translation_of: Web/API/Document/execCommand 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 + <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 à @@ -62,169 +56,100 @@ translation_of: Web/API/Document/execCommand <dl> <dt><code>backColor</code></dt> - <dd>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.</dd> + <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>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")}}.</dd> + <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>Supprime toutes les informations d'authentification (<i>credentials</i>) du cache.</dd> + <dd><p>Supprime toutes les informations d'authentification <i>credentials</i>) du cache.</p></dd> <dt><code>contentReadOnly</code></dt> - <dd>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)</dd> + <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>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.</dd> + <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>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>.)</dd> + <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>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.</dd> + <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>Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point - d'insertion. (Non pris en charge par Internet Explorer.)</dd> + <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>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.</dd> + <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>Supprimer la sélection courante.</dd> + <dd><p>Supprimer la sélection courante.</p></dd> <dt><code>enableAbsolutePositionEditor</code></dt> - <dd>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)}}). - </dd> + <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>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)}}).</dd> + <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>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)}}).</dd> + <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>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>).</dd> + <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>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.</dd> + <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>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.</dd> + <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>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>.)</dd> + <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>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.</dd> + <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>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.)</dd> + <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>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.)</dd> + <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>Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point - d'insertion. (Non pris en charge par Internet Explorer).</dd> + <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>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.</dd> + <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>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.)</dd> + <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>Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la - sélection courante par cet élément.</dd> + <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>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.)</dd> + <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>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>.</dd> + <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>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.</dd> + <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>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.</dd> + <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>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.)</dd> + <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>Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle - sélection courante).</dd> + <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>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")}}.)</dd> + <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>Centre la sélection ou le point d'insertion.</dd> + <dd><p>Centre la sélection ou le point d'insertion.</p></dd> <dt><code>justifyFull</code></dt> - <dd>Justifie la sélection ou le point d'insertion.</dd> + <dd><p>Justifie la sélection ou le point d'insertion.</p></dd> <dt><code>justifyLeft</code></dt> - <dd>Justifie à gauche la sélection ou le point d'insertion.</dd> + <dd><p>Justifie à gauche la sélection ou le point d'insertion.</p></dd> <dt><code>justifyRight</code></dt> - <dd>Justifie à droite la sélection ou le point d'insertion.</dd> + <dd><p>Justifie à droite la sélection ou le point d'insertion.</p></dd> <dt><code>outdent</code></dt> - <dd>Effectue un retrait d'indentation pour la ligne courante.</dd> + <dd><p>Effectue un retrait d'indentation pour la ligne courante.</p></dd> <dt><code>paste</code></dt> - <dd>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.</dd> + <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>Rejoue l'action annulée par la précédente commande <code>undo</code>.</dd> + <dd><p>Rejoue l'action annulée par la précédente commande <code>undo</code>.</p></dd> <dt><code>removeFormat</code></dt> - <dd>Supprime toute mise en forme pour la sélection courante.</dd> + <dd><p>Supprime toute mise en forme pour la sélection courante.</p></dd> <dt><code>selectAll</code></dt> - <dd>Sélectionne l'ensemble du contenu de la région éditable.</dd> + <dd><p>Sélectionne l'ensemble du contenu de la région éditable.</p></dd> <dt><code>strikeThrough</code></dt> - <dd>Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.</dd> + <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>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</dd> + <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>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</dd> + <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>Active ou désactive <a href="/fr/docs/Web/HTML/Element/u">le soulignement</a> pour - la sélection ou au point d'insertion.</dd> + <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>Annule la dernière commande exécutée.</dd> + <dd><p>Annule la dernière commande exécutée.</p></dd> <dt><code>unlink</code></dt> - <dd>Retire l'<a href="/fr/docs/Web/HTML/Element/a">ancre</a> de l'hyperlien sélectionné. - </dd> + <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>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.</dd> - <dd>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>.</dd> - <dt><code>styleWithCSS</code></dt> - <dd>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.</dd> + <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> diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html index e91d987e34..5bff1f4f8c 100644 --- a/files/fr/web/api/document/exitfullscreen/index.html +++ b/files/fr/web/api/document/exitfullscreen/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Document/exitFullscreen <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> -<div class="note"><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.</div> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -55,7 +57,7 @@ document.onclick = function (event) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="en/DOM/Using full-screen mode">Utiliser le mode plein écran</a></li> + <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> diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html index c892b63976..69a310feb2 100644 --- a/files/fr/web/api/document/forms/index.html +++ b/files/fr/web/api/document/forms/index.html @@ -17,17 +17,17 @@ translation_of: Web/API/Document/forms <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>collection</var> = document.forms;</pre> -<h3 id="Example" name="Example">Valeur</h3> +<h3 id="Example">Valeur</h3> <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> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> -<h3 id="Example" name="Example">Récupérer les informations d'un formulaire</h3> +<h3 id="Example">Récupérer les informations d'un formulaire</h3> <pre class="brush:html"><!DOCTYPE html> <html lang="en"> @@ -60,31 +60,31 @@ translation_of: Web/API/Document/forms var selectFormElement = document.forms[index].elements[index]; </pre> -<h3 id="Specification" name="Specification">Accéder aux formulaires nommés</h3> +<h3 id="Specification">Accéder aux formulaires nommés</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>document.forms example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <title>document.forms example</title> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>login<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Log in<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<form name="login"> + <input name="email" type="email"> + <input name="password" type="password"> + <button type="submit">Log in</button> +</form> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> loginForm <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">.</span>login<span class="punctuation token">;</span> <span class="comment token">// Ou document.forms['login']</span> - loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>email<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'test@example.com'</span><span class="punctuation token">;</span> - loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>password<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'password'</span><span class="punctuation token">;</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<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" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> @@ -108,9 +108,9 @@ var selectFormElement = document.forms[index].elements[index]; </tbody> </table> -<h2 id="See_Also" name="See_Also">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li> <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li> </ul> diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html index ca78a615cd..a2606c65b2 100644 --- a/files/fr/web/api/document/fullscreenchange_event/index.html +++ b/files/fr/web/api/document/fullscreenchange_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/fullscreenchange_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <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> diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html index 5f88b26992..dafb34cf85 100644 --- a/files/fr/web/api/document/fullscreenerror_event/index.html +++ b/files/fr/web/api/document/fullscreenerror_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Document/fullscreenerror_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <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> diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html index 97b613781e..5160c98e2a 100644 --- a/files/fr/web/api/document/getboxobjectfor/index.html +++ b/files/fr/web/api/document/getboxobjectfor/index.html @@ -13,9 +13,11 @@ translation_of: Web/API/Document/getBoxObjectFor <p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p> -<div class="note"><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</div> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>); </pre> @@ -25,7 +27,7 @@ translation_of: Web/API/Document/getBoxObjectFor <li><code>element</code> est un {{domxref("element","DOMElement")}}</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var myDiv = document.getElementById("myDiv"), boxObj = document.getBoxObjectFor (myDiv); @@ -37,6 +39,6 @@ alert ( ", Height:" + boxObj.height );</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p> +<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p> diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html index 74f004989b..eacf9ef0a2 100644 --- a/files/fr/web/api/document/getelementbyid/index.html +++ b/files/fr/web/api/document/getelementbyid/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/getElementById <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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>); </pre> @@ -25,41 +25,40 @@ translation_of: Web/API/Document/getElementById <dl> <dt><code>id</code></dt> - <dd>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é.</dd> - <dt> - <h3 id="Valeur_de_retour">Valeur de retour</h3> - </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> +<h3 id="Valeur_de_retour">Valeur de retour</h3> + <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>getElementById example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>para<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Some text here<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>blue<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>blue<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>red<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>red<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<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> <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">changeColor</span><span class="punctuation token">(</span>newColor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'para'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - elem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> newColor<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +}</pre> -<h3 id="Notes" name="Notes">Résultat</h3> +<h3 id="Notes">Résultat</h3> <p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> -<h2 id="Notes" name="Notes">Notes d'utilisation</h2> +<h2 id="Notes">Notes d'utilisation</h2> <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> @@ -67,39 +66,39 @@ translation_of: Web/API/Document/getElementById <h2 id="Exemple_2">Exemple</h2> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent-id'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> test1<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">//</span></span></code><span class="short_text" id="result_box" lang="fr"><span>erreur de lancement</span></span> <code class="language-html"><span class="language-javascript script token"> - <span class="comment token">//</span></span></code><span id="result_box" lang="fr"><span>TypeError inattendu </span></span><span lang="fr"><span>: parentDOM.getElementById n'est pas une fonction</span></span> <code class="language-html"><span class="language-javascript script token"> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<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> + 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> <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> <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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -element<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">'testqq'</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'testqq'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// el vaudra null !</span></code></pre> +<pre class="brush: 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" title="fr/XHTML">XHTML</a> ou <a href="/fr/XUL" title="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> +<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" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <tbody> @@ -131,7 +130,7 @@ element<span class="punctuation token">.</span>id <span class="operator token">= </tbody> </table> -<p>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p> +<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> @@ -142,5 +141,5 @@ element<span class="punctuation token">.</span>id <span class="operator token">= <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" title="fr/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> + <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> diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html index 7296b18b88..43ff0fb18a 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.html +++ b/files/fr/web/api/document/getelementsbyclassname/index.html @@ -10,20 +10,20 @@ translation_of: Web/API/Document/getElementsByClassName --- <p>{{APIRef("DOM")}}</p> -<p><span id="result_box" lang="fr"><span>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés.</span> <span>Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine.</span> <span>Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément;</span> <span>il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: <var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> <ul> - <li><var>elements</var> <span id="result_box" lang="fr"><span>est une {{domxref ("HTMLCollection")}} des éléments trouvés.</span></span></li> + <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><span id="result_box" lang="fr"><span>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document.</span> <span>L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</span></span></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> -<h2 id="Exemples" name="Exemples">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <p>Trouve tous les éléments ayant la classe « test » :</p> @@ -40,43 +40,43 @@ translation_of: Web/API/Document/getElementsByClassName <pre class="eval"> document.getElementById('main').getElementsByClassName('test') </pre> -<p><span id="result_box" lang="fr"><span>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode.</span> <span>Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</span></span></p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> testElements <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> testDivs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>filter<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>testElements<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>testElement<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">return</span> testElement<span class="punctuation token">.</span>nodeName <span class="operator token">===</span> <span class="string token">'DIV'</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +});</pre> -<p><span class="comment">XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code></span></p> +<p>XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code></p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span class="short_text" id="result_box" lang="fr"><span>Obtenir la classe des éléments test</span></span></h2> +<h2 id="Sp.C3.A9cification">Obtenir la classe des éléments test</h2> -<p><span id="result_box" lang="fr"><span>C'est la méthode d'opération la plus couramment utilisée</span></span>.</p> +<p>C'est la méthode d'opération la plus couramment utilisée.</p> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="punctuation token">></span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"parent-id"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<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> + var parentDOM = document.getElementById("parent-id"); - <span class="keyword token">var</span> test<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//test is not target element</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>test<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//HTMLCollection[1]</span> + var test=parentDOM.getElementsByClassName("test");//test is not target element + console.log(test);//HTMLCollection[1] - <span class="keyword token">var</span> testTarget<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span><span class="comment token">//here , this element is target</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>testTarget<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//<p class="test">hello word2</p></span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target + console.log(testTarget);//<p class="test">hello word2</p> + </script> +</body> +</html></pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> @@ -85,8 +85,8 @@ translation_of: Web/API/Document/getElementsByClassName -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external external-icon">W3C: getElementsByClassName</span></a></li> + <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname">W3C: getElementsByClassName</a></li> </ul> diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html index c8136c8de7..d2087a0d22 100644 --- a/files/fr/web/api/document/getelementsbyname/index.html +++ b/files/fr/web/api/document/getelementsbyname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/getElementsByName <p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>) </pre> @@ -23,36 +23,36 @@ translation_of: Web/API/Document/getElementsByName <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> ... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>up<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>down<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<body> +<form name="up"><input type="text"></form> +<div name="down"><input type="text"></div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">var</span> up_forms <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByName</span><span class="punctuation token">(</span><span class="string token">"up"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>up_forms<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// retourne "FORM"</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<script> +var up_forms = document.getElementsByName("up"); +console.log(up_forms[0].tagName); // retourne "FORM" +</script> +</body> +</html></pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p><span id="result_box" lang="fr"><span>L'attribut <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML.</span> <span>La méthode renvoie une collection </span></span> {{domxref("NodeList")}} <span lang="fr"><span> en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que </span></span> {{htmlelement("meta")}} <span lang="fr"><span> ou </span></span> {{htmlelement("object")}} <span lang="fr"><span> ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</span></span></p> +<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><span id="result_box" lang="fr"><span>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs.</span> <span>Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée.</span> <span>Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</span></span></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" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a class="external" 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" title="http://www.whatwg.org/html/">HTML5 : getElementsByName</a></li> + <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"> @@ -75,7 +75,7 @@ console<span class="punctuation token">.</span><span class="function token">log< </tbody> </table> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<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> diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html index 268a5a6453..b90d19fbe0 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.html +++ b/files/fr/web/api/document/getelementsbytagname/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/Document/getElementsByTagName <div> </div> -<p><span id="result_box" lang="fr"><span>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné.</span> <span>Le document complet est recherché, y compris le nœud racine.</span> <span>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 ().</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> @@ -27,79 +27,79 @@ translation_of: Web/API/Document/getElementsByTagName <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> - -<p><span id="result_box" lang="fr"><span>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>.</span> <span>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.</span></span></p> - -<p><span id="result_box" lang="fr"><span>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).</span></span></p> - -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>getElementsByTagName example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">function</span> <span class="function token">getAllParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> allParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> num <span class="operator token">=</span> allParas<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in this document'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">div1ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> div1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> div1Paras <span class="operator token">=</span> div1<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> num <span class="operator token">=</span> div1Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">div2ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> div2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> div2Paras <span class="operator token">=</span> div2<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> num <span class="operator token">=</span> div2Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid green <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid blue <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid red <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getAllParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - show all p elements in document<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span> <span class="punctuation token">/></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - show all p elements in div1 element<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span> <span class="punctuation token">/></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - show all p elements in div2 element<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Notes</h2> - -<p><span id="result_box" lang="fr"><span>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML.</span> <span>{{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas.</span> <span>Voir aussi {{Bug (499656)}}.</span><br> +<h2 id="Exemple">Exemple</h2> + +<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> + +<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> + function getAllParaElems() { + var allParas = document.getElementsByTagName('p'); + var num = allParas.length; + alert('There are ' + num + ' paragraph in this document'); + } + + function div1ParaElems() { + var div1 = document.getElementById('div1'); + var div1Paras = div1.getElementsByTagName('p'); + var num = div1Paras.length; + alert('There are ' + num + ' paragraph in #div1'); + } + + function div2ParaElems() { + var div2 = document.getElementById('div2'); + var div2Paras = div2.getElementsByTagName('p'); + 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> + + <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> + + <p>Some outer text</p> + <p>Some outer text</p> + + <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="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html></pre> + +<h2 id="Sp.C3.A9cification">Notes</h2> + +<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> - <span><code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</span></span></p> + <code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li> + <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> diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html index 537bc24875..7397cc7507 100644 --- a/files/fr/web/api/document/getelementsbytagnamens/index.html +++ b/files/fr/web/api/document/getelementsbytagnamens/index.html @@ -16,28 +16,30 @@ translation_of: Web/API/Document/getElementsByTagNameNS <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>) </pre> <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" title="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" title="En/DOM/Node.localName">element.localName</a></code>).</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> -<div class="note"><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 class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869" title="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</div> +<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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <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> -<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="https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p> +<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> <p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p> -<pre class="brush: html"><html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"> +<pre>http://www.w3.org/1999/xhtml</a>"> <head> <title>getElementsByTagNameNS example</title> @@ -46,7 +48,7 @@ translation_of: Web/API/Document/getElementsByTagNameNS function getAllParaElems() { - var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + var allParas = document.getElementsByTagNameNS("<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>", "p"); var num = allParas.length; @@ -57,7 +59,7 @@ function getAllParaElems() function div1ParaElems() { var div1 = document.getElementById("div1") - var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + var div1Paras = div1.getElementsByTagNameNS("<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>", "p"); var num = div1Paras.length; @@ -68,7 +70,7 @@ function div1ParaElems() function div2ParaElems() { var div2 = document.getElementById("div2") - var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + var div2Paras = div2.getElementsByTagNameNS("<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>", "p"); var num = div2Paras.length; @@ -109,9 +111,9 @@ function div2ParaElems() </html> </pre> -<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2> +<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> -<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 class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">cette classe wrapper</a>.)</p> +<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> <pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { if (!doc) { @@ -131,6 +133,6 @@ function div2ParaElems() } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html index 676ba4d351..e485df22ae 100644 --- a/files/fr/web/api/document/getselection/index.html +++ b/files/fr/web/api/document/getselection/index.html @@ -13,4 +13,4 @@ original_slug: Web/API/DocumentOrShadowRoot/getSelection --- <p>{{APIRef("DOM")}}</p> -<p><span id="result_box" lang="fr"><span>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ;</span> elle<span> renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</span></span></p> +<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> diff --git a/files/fr/web/api/document/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html index f33a56bb10..fb6088c0a9 100644 --- a/files/fr/web/api/document/hasfocus/index.html +++ b/files/fr/web/api/document/hasfocus/index.html @@ -11,59 +11,59 @@ translation_of: Web/API/Document/hasFocus --- <p>{{ ApiRef() }}</p> -<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant <span id="result_box" lang="fr"><span>si le document ou tout élément à l'intérieur du document a le focus.</span> <span>Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</span></span></p> +<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> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>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.</span> <span>Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval">focused = document.hasFocus(); </pre> -<h3 id="Exemple" name="Exemple">Valeur retournée</h3> +<h3 id="Exemple">Valeur retournée</h3> <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> - -<pre class="brush:html;highlight:[17] line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>TEST<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token"><span class="id token">#message</span> </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="function token">setInterval</span><span class="punctuation token">(</span> checkPageFocus<span class="punctuation token">,</span> <span class="number token">200</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">checkPageFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> info <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"message"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span> document<span class="punctuation token">.</span><span class="function token">hasFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document has the focus."</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document doesn't have the focus."</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">openWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - window<span class="punctuation token">.</span>open <span class="punctuation token">(</span> - <span class="string token">"http://developer.mozilla.org/"</span><span class="punctuation token">,</span> - <span class="string token">"mozdev"</span><span class="punctuation token">,</span> - <span class="string token">"width=640,height=300,left=150,top=260"</span> - <span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>JavaScript hasFocus example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>message<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Waiting for user action<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>openWindow()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Open a new window<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>TEST</title> +<style> +#message { font-weight: bold; } +</style> +<script> +setInterval( checkPageFocus, 200 ); + +function checkPageFocus() { + var info = document.getElementById("message"); + + if ( document.hasFocus() ) { + info.innerHTML = "The document has the focus."; + } else { + info.innerHTML = "The document doesn't have the focus."; + } +} + +function openWindow() { + window.open ( + "https://developer.mozilla.org/", + "mozdev", + "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> diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html index 9927db3f3b..ef80950d76 100644 --- a/files/fr/web/api/document/head/index.html +++ b/files/fr/web/api/document/head/index.html @@ -7,16 +7,15 @@ tags: - HTML5 translation_of: Web/API/Document/head --- -<h2 id="Summary" name="Summary">Résumé</h2> <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var objRef</em> = document.head; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// en HTML: <head id="my-document-head"> var aHead = document.head; @@ -26,7 +25,7 @@ alert(aHead.id); // "my-document-head"; alert( document.head === document.querySelector("head") ); // true </pre> -<h2 id="Example" name="Example">Notes</h2> +<h2 id="Example">Notes</h2> <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> diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html index 8f69f2dbbc..6dbe1f47e8 100644 --- a/files/fr/web/api/document/height/index.html +++ b/files/fr/web/api/document/height/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/height <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>height_value</em> = document.height </pre> diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html index 56ae7fba48..1b127eb980 100644 --- a/files/fr/web/api/document/images/index.html +++ b/files/fr/web/api/document/images/index.html @@ -6,23 +6,28 @@ tags: translation_of: Web/API/Document/images --- <p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> -<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> renvoie une collection des images du document HTML courant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> -<pre class="eval"><a class="internal" href="/fr/DOM/HTMLCollection" title="fr/DOM/HTMLCollection"><em>HTMLCollection</em></a> = <a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images">document.images</a> -</pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> -<pre class="eval">var listeimg = document.images; + +<p><code>document.images</code> renvoie une collection des images du document HTML courant.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">HTMLCollection =document.images</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: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" name="Notes">Notes</h2> -<p><a class="internal" href="/fr/DOM/document.images" title="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" name="Sp.C3.A9cification">Spécification</h2> + +<h2 id="Notes">Notes</h2> + +<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 class="external" 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 class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li> + <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> diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html index 5f7d1a8bff..f7684fa56f 100644 --- a/files/fr/web/api/document/implementation/index.html +++ b/files/fr/web/api/document/implementation/index.html @@ -19,21 +19,21 @@ translation_of: Web/API/Document/implementation <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> modName <span class="operator token">=</span> <span class="string token">"HTML"</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> modVer <span class="operator token">=</span> <span class="string token">"2.0"</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> conformTest <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">hasFeature</span><span class="punctuation token">(</span> modName<span class="punctuation token">,</span> modVer <span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var modName = "HTML"; +var modVer = "2.0"; +var conformTest = document.implementation.hasFeature( modName, modVer ); -<span class="function token">alert</span><span class="punctuation token">(</span> <span class="string token">"DOM "</span> <span class="operator token">+</span> modName <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> modVer <span class="operator token">+</span> <span class="string token">" supported?: "</span> <span class="operator token">+</span> conformTest <span class="punctuation token">)</span><span class="punctuation token">;</span> +alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest ); -<span class="comment token">// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</span></code></pre> +// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</pre> -<p><span id="result_box" lang="fr"><span>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la </span></span> <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> <span lang="fr"><span> DOM niveau 2.</span></span></p> +<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> -<h2 id="Notes"><span lang="fr"><span>Notes</span></span></h2> +<h2 id="Notes">Notes</h2> -<p><span id="result_box" lang="fr"><span>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 ?).</span> <span>Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique.</span> <span>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.</span></span></p> +<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> -<h2 id="Spécifications"><span lang="fr"><span>Spécifications</span></span></h2> +<h2 id="Spécifications">Spécifications</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li> @@ -43,5 +43,5 @@ translation_of: Web/API/Document/implementation <h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2> <ul> - <li><span id="result_box" lang="fr"><span>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</span></span></li> + <li>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</li> </ul> diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html index 32bef68f4a..afda055041 100644 --- a/files/fr/web/api/document/importnode/index.html +++ b/files/fr/web/api/document/importnode/index.html @@ -12,46 +12,46 @@ translation_of: Web/API/Document/importNode --- <p>{{APIRef("DOM")}}</p> -<p><span id="result_box" lang="fr"><span>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</span> <span>être inséré dans le document actuel.</span> <span>Il n'est pas encore inclus dans l'arbre des documents;</span> <span>Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</span></span></p> +<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> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); </pre> <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="https://developer.mozilla.org/fr/docs/Web/API/Node/parentNode" title="DOM/Node.parentNode">parentNode</a></code> du noeud est <code>null</code>, <span id="result_box" lang="fr"><span>car il n'a pas encore été inséré dans l'arborescence du document.</span></span></dd> + <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 <span id="result_box" lang="fr"><span>qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>.</span> <span>Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés;</span> <span>si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</span></span></dd> + <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> <div class="note"> -<p><strong>Note :</strong> Dans la spécification DOM4, <span id="result_box" lang="fr"><span><code>deep</code> est répertorié en tant qu'argument facultatif.</span> <span>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.</span> <span>Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.</span><br> +<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> - <span>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>.</span> <span>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.</span> <span>Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument.</span> <span>À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</span></span></p> + 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> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> oldNode <span class="operator token">=</span> iframe<span class="punctuation token">.</span>contentWindow<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myNode"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">importNode</span><span class="punctuation token">(</span>oldNode<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"container"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newNode<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: 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> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p><span id="result_box" lang="fr"><span>Le noeud d'origine n'est pas supprimé du document d'origine.</span> <span>Le noeud importé est un clone de l'original.</span></span></p> +<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> -<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou 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 appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode" title="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 (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><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" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</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" title="La méthode Document importNode() crée une nouvelle copie du Node ou 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 appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="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 (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><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 class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</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> <p> </p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html index 795b4fc76d..186904db9e 100644 --- a/files/fr/web/api/document/index.html +++ b/files/fr/web/api/document/index.html @@ -11,26 +11,26 @@ translation_of: Web/API/Document --- <p>{{ApiRef}}</p> -<p><span id="result_box" lang="fr"><span>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.</span> <span>L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres.</span> <span>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.</span></span></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><span id="result_box" lang="fr"><span>L'interface Document décrit les propriétés et méthodes communes à tout type de document.</span> <span>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</span> l<span>es documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</span></span></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"><span lang="fr"><span>Constructeur</span></span></h2> +<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" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> +<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. <span id="result_box" lang="fr"><span>C'est une interface héritée non standard qui ne doit pas être utilisée.</span></span></dd> + <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> @@ -74,15 +74,15 @@ translation_of: Web/API/Document <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. <span id="result_box" lang="fr"><span>A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de </span></span> {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <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, <span id="result_box" lang="fr"><span>tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</span></span></dd> + <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><span id="result_box" lang="fr"><span>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé.</span> <span><code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</span></span></dd> + <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> @@ -96,7 +96,7 @@ translation_of: Web/API/Document <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> <span id="result_box" lang="fr"><span>indiquant l'état de visibilité du document.</span> <span>Les valeurs possibles sont </span></span> <code>visible</code> <span lang="fr"><span>, </span></span> <code>hidden <em>(masqué)</em></code> <span lang="fr"><span>, prerender <em>(pré-rendu)</em> et </span></span> <code>unloaded</code> <em>(</em><span lang="fr"><span><em>déchargées</em>).</span></span></dd> + <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> @@ -137,7 +137,7 @@ translation_of: Web/API/Document <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 <span class="short_text" id="result_box" lang="fr"><span>du document entier.</span></span></dd> + <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> @@ -224,17 +224,17 @@ translation_of: Web/API/Document <h2 id="Méthodes">Méthodes</h2> -<p><em><span id="result_box" lang="fr"><span>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</span></span></em></p> +<p><em>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</em></p> <dl> <dt>{{domxref("Document.adoptNode()")}}</dt> - <dd><span class="short_text" id="result_box" lang="fr"><span>adopte le noeud d'un document externe.</span></span></dd> + <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><span id="result_box" lang="fr"><span>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</span></span></dd> + <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> @@ -300,15 +300,15 @@ translation_of: Web/API/Document <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><span class="short_text" id="result_box" lang="fr"><span>Enregistre un composant Web.</span></span></dd> + <dd>Enregistre un composant Web.</dd> <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd><span id="result_box" lang="fr"><span>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</span></span></dd> + <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><span id="result_box" lang="fr"><span>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</span></span></dd> + <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> @@ -317,7 +317,7 @@ translation_of: Web/API/Document <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><span id="result_box" lang="fr"><span>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</span></span></dd> + <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> @@ -326,7 +326,7 @@ translation_of: Web/API/Document <dl> <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> - <dd>compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd> + <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> @@ -337,9 +337,9 @@ translation_of: Web/API/Document <dl> <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd><span id="result_box" lang="fr"><span>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</span></span></dd> + <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><span class="short_text" id="result_box" lang="fr"><span>ferme un flux de document pour l'écriture.</span></span></dd> + <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> @@ -453,38 +453,38 @@ translation_of: Web/API/Document <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é <span id="result_box" lang="fr"><span>a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</span></span></dd> + <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 <span class="short_text" id="result_box" lang="fr"><span>qui est la cible de l'info-bulle actuelle.</span></span></dd> + <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><span id="result_box" lang="fr"><span>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")}}.</span></span></dd> + <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="https://developer.mozilla.org/fr/docs/Overlays_XUL" title="XUL_Overlays">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd> + <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><span id="result_box" lang="fr"><span>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")}}.</span></span></dd> + <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"><span lang="fr"><span>Notes concernant Internet Explorer</span></span></h3> +<h3 id="Notes_concernant_Internet_Explorer">Notes concernant Internet Explorer</h3> -<p><span lang="fr"><span>Microsoft a défini quelques propriétés non standard :</span></span></p> +<p>Microsoft a défini quelques propriétés non standard :</p> <dl> <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd><span id="result_box" lang="fr"><span>Retourne la taille en octets du document.</span> <span>À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge.</span> <span>Voir </span></span> <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <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><span id="result_box" lang="fr"><span>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</span></span></p> +<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><span id="result_box" lang="fr"><span>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</span></span></dd> + <dd>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</dd> </dl> diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html index e0560ef1df..76807b1f92 100644 --- a/files/fr/web/api/document/keypress_event/index.html +++ b/files/fr/web/api/document/keypress_event/index.html @@ -11,10 +11,10 @@ translation_of: Web/API/Document/keypress_event --- <div>{{APIRef}} {{deprecated_header}}</div> -<p><span class="seoSummary">L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée.</span> 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> +<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> -<div class="blockIndicator 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 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> <table class="properties"> diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html index c9f26ad21b..90a7738bb3 100644 --- a/files/fr/web/api/document/lastmodified/index.html +++ b/files/fr/web/api/document/lastmodified/index.html @@ -7,12 +7,12 @@ translation_of: Web/API/Document/lastModified <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>string</var> = document.lastModified; </pre> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3> @@ -20,7 +20,7 @@ translation_of: Web/API/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" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3> +<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> <pre class="brush:js">var oLastModif = new Date(document.lastModified); </pre> @@ -30,9 +30,9 @@ translation_of: Web/API/Document/lastModified <pre class="brush:js">var nLastModif = Date.parse(document.lastModified); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<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" title="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p> +<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> <pre class="brush: 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; @@ -53,12 +53,13 @@ if (isNaN(nLastVisit) || nLastModif > nLastVisit) { } }</pre> -<div class="note"><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.<br> -(Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363" title="Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</div> +<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> -<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" title="/en-US/docs/Web/API/document.lastModified">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>HTML5</p> diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html index 2f24656c13..dce73ac17e 100644 --- a/files/fr/web/api/document/laststylesheetset/index.html +++ b/files/fr/web/api/document/laststylesheetset/index.html @@ -12,16 +12,18 @@ translation_of: Web/API/Document/lastStyleSheetSet <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet </pre> <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> -<div class="note"><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</div> +<div class="note"> + <p><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet; if (!lastSheetSet) { @@ -30,7 +32,7 @@ if (!lastSheetSet) { console.log("The last sheet set is: " + lastSheetSet); </pre> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{ domxref("document.preferredStyleSheetSet") }}</li> @@ -39,8 +41,8 @@ console.log("The last sheet set is: " + lastSheetSet); <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> </ul> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> </ul> diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html index 932929b720..2a6f3e51c3 100644 --- a/files/fr/web/api/document/location/index.html +++ b/files/fr/web/api/document/location/index.html @@ -10,23 +10,23 @@ tags: - lecture seule translation_of: Web/API/Document/location --- -<p><span style="font-size: 14px; line-height: 1.5;">La propriété en lecture seule </span><strong style="font-size: 14px; line-height: 1.5;"><code>Document.location</code></strong><code style="font-size: 14px;"> renvoie un objet</code><span style="font-size: 14px; line-height: 1.5;"> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</span></p> +<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> -<p><span style="font-size: 14px; line-height: 1.5;">Bien que </span><code style="font-size: 14px;">Document.location</code><span style="font-size: 14px; line-height: 1.5;"> soit un objet </span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="font-size: 14px;">Location</code><span style="font-size: 14px; line-height: 1.5;"> en <em>lecture seule</em>, vous pouvez lui assigner un</span><span style="font-size: 14px; line-height: 1.5;"> {{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: </span><code style="font-size: 14px;">document.location = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;"> est un synonyme de </span><code style="font-size: 14px;">document.location.href = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;">.</span></p> +<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> -<p><span style="font-size: 14px; line-height: 1.5;">Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété </span><span style="font-size: 14px; line-height: 1.5;">{{domxref("document.URL")}} peut également être utilisée.</span></p> +<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> -<p><span style="font-size: 14px; line-height: 1.5;">Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</span></p> +<p>Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>locationObj</em> = document.location +<pre class="syntaxbox"><em>locationObj</em> = document.location document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org' </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush: js notranslate">console.log(document.location); +<pre class="brush: js">console.log(document.location); // Affiche un string-like // "http://www.example.com/juicybits.html" dans la console </pre> diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html index 1c35bcbcc5..aa70b99736 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.html +++ b/files/fr/web/api/document/mozsetimageelement/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/mozSetImageElement <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement); </pre> @@ -28,11 +28,11 @@ translation_of: Web/API/Document/mozSetImageElement <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p> -<p><a href="/samples/domref/mozSetImageElement.html" title="https://developer.mozilla.org/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p> +<p><a href="/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p> <pre class="brush: html"><style type="text/css"> #mybox { @@ -70,11 +70,11 @@ function clicked() { <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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>Ne fait partie d'aucune spécification.</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{ cssxref("-moz-element") }}</li> diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html index 443c3ca5e0..c8847269ca 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.html +++ b/files/fr/web/api/document/mozsyntheticdocument/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/mozSyntheticDocument <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument; </pre> <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <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> @@ -30,6 +30,6 @@ if (isSynthetic) { } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html index 52494ee50e..9c3d8d138a 100644 --- a/files/fr/web/api/document/onafterscriptexecute/index.html +++ b/files/fr/web/api/document/onafterscriptexecute/index.html @@ -37,7 +37,7 @@ document.addEventListener("afterscriptexecute", finished, true); <h2 id="Spécification">Spécification</h2> <ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html index f0fc8ee381..8527a38555 100644 --- a/files/fr/web/api/document/onbeforescriptexecute/index.html +++ b/files/fr/web/api/document/onbeforescriptexecute/index.html @@ -35,7 +35,7 @@ document.addEventListener("beforescriptexecute", starting, true); <h2 id="Spécification">Spécification</h2> <ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html index c8bfb9026a..4e9ac673aa 100644 --- a/files/fr/web/api/document/onoffline/index.html +++ b/files/fr/web/api/document/onoffline/index.html @@ -10,4 +10,4 @@ translation_of: Web/API/Document/onoffline --- <p>{{APIRef("DOM")}}</p> -<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="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p> +<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> diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html index ba10ffd969..251bf34aab 100644 --- a/files/fr/web/api/document/ononline/index.html +++ b/files/fr/web/api/document/ononline/index.html @@ -16,24 +16,24 @@ translation_of: Web/API/Document/ononline <p>window.navigator.onLine 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> <div class="note"> -<p>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> +<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> <p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p> <ul> - <li>en utilisant <code><a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li> + <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Il existe <a class="external link-https external-icon" 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> +<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> -<h2 id="Example" name="Example">Références</h2> +<h2 id="Example">Références</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li> + <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> diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html index bb5aba9bc3..c8da92836a 100644 --- a/files/fr/web/api/document/open/index.html +++ b/files/fr/web/api/document/open/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/Document/open <div> </div> -<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">l'écriture</a>.</p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval">document.open(); </pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// Dans cet exemple, le contenu du document est // écrasé au cours de la réinitialisation avec open() @@ -28,15 +28,15 @@ document.open(); // Le document est vide. </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p> -<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="https://developer.mozilla.org/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. <span class="comment">documenter les paramètres à document.open ne figurant pas dans la spécification</span></p> +<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> -<p>Cette méthode ne doit pas être confondue avec <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a>.</p> +<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> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks" title="en/Security check basics">Security check basics</a> pour plus d'informations sur les principaux.</p> +<p>Voir <a href="/fr/docs/Mozilla/Gecko/Script_security#Security_checks">Security check basics</a> pour plus d'informations sur les principaux.</p> <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> diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html index 8b6af6e137..be0b64250e 100644 --- a/files/fr/web/api/document/popupnode/index.html +++ b/files/fr/web/api/document/popupnode/index.html @@ -12,9 +12,11 @@ translation_of: Web/API/Document/popupNode --- <div>{{ApiRef("DOM")}}{{deprecated_header}}</div> -<div class="note"><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.</div> +<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> -<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é. <span id="result_box" lang="fr"><span>Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle.</span> <span>Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null.</span> <span>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.</span></span></p> +<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> <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> @@ -34,7 +36,7 @@ translation_of: Web/API/Document/popupNode </menupopup> </pre> -<p>Voir <a class="external" href="http://www.mozilla.org/xpfe/xptoolkit/popups.html" rel="freelink">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p> +<p>Voir <a href="http://www.mozilla.org/xpfe/xptoolkit/popups.html">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html index 969a9b39b0..ab47840dd3 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.html +++ b/files/fr/web/api/document/preferredstylesheetset/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Document/preferredStyleSheetSet <p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet </pre> @@ -23,7 +23,7 @@ translation_of: Web/API/Document/preferredStyleSheetSet <p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">if (document.preferredStyleSheetSet) { console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet); @@ -32,13 +32,13 @@ translation_of: Web/API/Document/preferredStyleSheetSet } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> </ul> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{domxref("document.lastStyleSheetSet")}}</li> diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html index ee8af716d0..ca874815cb 100644 --- a/files/fr/web/api/document/querycommandstate/index.html +++ b/files/fr/web/api/document/querycommandstate/index.html @@ -44,6 +44,6 @@ translation_of: Web/API/Document/queryCommandState <ul> <li>{{domxref("HTMLElement.contentEditable")}}</li> <li>{{domxref("document.designMode")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></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> diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html index 986cbd52e3..ddd356a31b 100644 --- a/files/fr/web/api/document/querycommandsupported/index.html +++ b/files/fr/web/api/document/querycommandsupported/index.html @@ -19,10 +19,9 @@ translation_of: Web/API/Document/queryCommandSupported <pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>); </pre> +<h3 id="Paramètres">Paramètres</h3> + <dl> - <dt> - <h3 id="Paramètres">Paramètres</h3> - </dt> <dt><code>command</code></dt> <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd> </dl> diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html index 4d25c91d2b..bb81eb32c0 100644 --- a/files/fr/web/api/document/queryselector/index.html +++ b/files/fr/web/api/document/queryselector/index.html @@ -17,10 +17,10 @@ translation_of: Web/API/Document/querySelector <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> <div class="note"> -<p><strong>Note :</strong> La correspondance <span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js">element = document.querySelector(sélecteurs); </pre> @@ -29,7 +29,7 @@ translation_of: Web/API/Document/querySelector <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="https://developer.mozilla.org/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> + <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> <div class="note"> @@ -38,7 +38,7 @@ translation_of: Web/API/Document/querySelector <h3 id="Valeur_retournée">Valeur retournée</h3> -<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="https://developer.mozilla.org/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> +<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> <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> @@ -49,13 +49,13 @@ translation_of: Web/API/Document/querySelector <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd> </dl> -<h2 id="Notes" name="Notes">Notes d'utilisation</h2> +<h2 id="Notes">Notes d'utilisation</h2> <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> -<p>Les <a href="https://developer.mozilla.org/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> +<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> -<h3 id="Caractère_spécial_d'échappement"><a id="Caractère spécial d'échappement" name="Caractère spécial d'échappement"></a>Caractère spécial d'échappement</h3> +<h3 id="Caractère_spécial_d'échappement">Caractère spécial d'échappement</h3> <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> @@ -75,7 +75,7 @@ translation_of: Web/API/Document/querySelector </script> </pre> -<h2 id="Exemple" name="Exemple">Exemples</h2> +<h2 id="Exemple">Exemples</h2> <h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3> @@ -83,13 +83,13 @@ translation_of: Web/API/Document/querySelector <pre class="brush: js">var el = document.querySelector(".maclasse");</pre> -<h3 id="Notes" name="Notes">Un sélecteur plus complexe</h3> +<h3 id="Notes">Un sélecteur plus complexe</h3> -<p><span id="result_box" lang="fr"><span>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant.</span> <span>Ici, le premier élément <code><input name="identifiant"/></code> dans un <code><div class="panneau-utilisateur principal"></code> dans le document est retourné :</span></span></p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div.panneau-utilisateur.principal input[name='</span></code><span id="result_box" lang="fr"><span><code>identifiant</code></span></span><code class="language-js"><span class="string token">']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var el = document.querySelector("div.panneau-utilisateur.principal input[name='<code>identifiant</code>']");</pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spécifications</h2> +<h2 id="Browser_Compatibility">Spécifications</h2> <table class="standard-table"> <tbody> @@ -118,9 +118,9 @@ translation_of: Web/API/Document/querySelector <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/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><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="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> + <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> </ul> diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html index 6347a584c8..7b73477245 100644 --- a/files/fr/web/api/document/queryselectorall/index.html +++ b/files/fr/web/api/document/queryselectorall/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Document/querySelectorAll <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); </pre> @@ -30,7 +30,7 @@ translation_of: Web/API/Document/querySelectorAll </dl> <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> +<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> <h3 id="Valeur_renvoyée">Valeur renvoyée</h3> @@ -38,7 +38,7 @@ translation_of: Web/API/Document/querySelectorAll <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> <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> +<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> <h3 id="Exceptions">Exceptions</h3> @@ -48,7 +48,7 @@ translation_of: Web/API/Document/querySelectorAll <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd> </dl> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}} dans le document :</p> @@ -64,7 +64,7 @@ translation_of: Web/API/Document/querySelectorAll <pre class="brush: js">const container = document.querySelector("#test"); const matches = container.querySelectorAll("div.highlighted > p");</pre> -<p>Cet exemple utilise un <a href="https://developer.mozilla.org/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> +<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> <pre class="brush: js">const matches = document.querySelectorAll("iframe[data-src]");</pre> @@ -85,7 +85,7 @@ highlightedItems.forEach(function(userItem) { deleteUser(userItem); });</pre> -<h2 id="Notes" name="Notes">Notes d'utilisation</h2> +<h2 id="Notes">Notes d'utilisation</h2> <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> diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html index 57f7b28538..36d01f7c11 100644 --- a/files/fr/web/api/document/readystate/index.html +++ b/files/fr/web/api/document/readystate/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Document/readyState <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState; +<pre class="syntaxbox">var <var>string</var> = <var>document</var>.readyState; </pre> <h3 id="Valeurs">Valeurs</h3> @@ -32,11 +32,11 @@ translation_of: Web/API/Document/readyState <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd> </dl> -<h2 id="Exemples"><span>Exemples</span></h2> +<h2 id="Exemples">Exemples</h2> <h3 id="Différents_états_de_chargement">Différents états de chargement</h3> -<pre class="brush: js notranslate"><span>switch (document.readyState) { +<pre class="brush: js">switch (document.readyState) { case "loading": // Encore en chargement. break; @@ -50,12 +50,12 @@ translation_of: Web/API/Document/readyState // La page est pleinement chargée. console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText); break; -}</span> +} </pre> <h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à DOMContentLoaded</h3> -<pre class="brush:js notranslate">// alternative à DOMContentLoaded +<pre class="brush:js">// alternative à DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); @@ -64,7 +64,7 @@ document.onreadystatechange = function () { <h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3> -<pre class="brush: js notranslate">// alternative à load +<pre class="brush: js">// alternative à load document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); @@ -73,7 +73,7 @@ document.onreadystatechange = function () { <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> -<pre class="brush: js notranslate">// Modification du document <body> dès que possible en utilisant un script externe +<pre class="brush: 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(); } @@ -83,7 +83,7 @@ document.addEventListener('readystatechange', bootstrap, false); <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécifications</th> @@ -110,12 +110,8 @@ document.addEventListener('readystatechange', bootstrap, false); <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - <div>{{Compat("api.Document.readyState")}}</div> -<div id="compat-desktop"></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> diff --git a/files/fr/web/api/document/readystatechange_event/index.html b/files/fr/web/api/document/readystatechange_event/index.html index 251487fc4b..95c60dae30 100644 --- a/files/fr/web/api/document/readystatechange_event/index.html +++ b/files/fr/web/api/document/readystatechange_event/index.html @@ -6,13 +6,13 @@ 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" title="/fr/docs/DOM/document.readyState"> <code>readyState</code> </a> d'un document a changé.</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 class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> + <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> diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html index d8699ada15..075f837b2a 100644 --- a/files/fr/web/api/document/referrer/index.html +++ b/files/fr/web/api/document/referrer/index.html @@ -10,14 +10,14 @@ translation_of: Web/API/Document/referrer --- <div> {{APIRef}}</div> -<h2 id="Syntax" name="Syntax">Résumé</h2> +<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" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>string</var> = document.referrer; </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<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" name="Specification">Spécification</h2> +<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> diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html index 352cc8b6e9..8512a48f5f 100644 --- a/files/fr/web/api/document/registerelement/index.html +++ b/files/fr/web/api/document/registerelement/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Document/registerElement <p>{{APIRef("DOM")}} {{Deprecated_header}}</p> <div class="warning"> -<p><strong>Warning : </strong>document.registerElement() est déprécié en faveur de <a href="https://developer.mozilla.org/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p> +<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> <p>{{draft}}</p> -<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p> +<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> <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="https://developer.mozilla.org/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -32,9 +32,7 @@ translation_of: Web/API/Document/registerElement <dl> <dt><em>nom-tag</em></dt> - <dd> - <div class="syntaxbox">Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</div> - </dd> + <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> @@ -63,5 +61,5 @@ montag.textContent = "Je suis un élément mon-tag."; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li> + <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li> </ul> diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html index 8c2a9d5bc5..bb7cafb599 100644 --- a/files/fr/web/api/document/releasecapture/index.html +++ b/files/fr/web/api/document/releasecapture/index.html @@ -16,22 +16,22 @@ translation_of: Web/API/Document/releaseCapture <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">document.releaseCapture() </pre> <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <p>Basé sur l'implémentation Internet Explorer.</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{domxref("element.setCapture()")}}</li> diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html index e6b957e69d..cf019c81d2 100644 --- a/files/fr/web/api/document/scripts/index.html +++ b/files/fr/web/api/document/scripts/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Document/scripts --- <div>{{ApiRef}}</div> -<p class="summary">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> +<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> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html index 8e1a13b3db..21c5ba592e 100644 --- a/files/fr/web/api/document/scroll_event/index.html +++ b/files/fr/web/api/document/scroll_event/index.html @@ -9,8 +9,9 @@ tags: - requestAnimationFrame translation_of: Web/API/Document/scroll_event --- -<p>{{APIRef}}<br> - <span class="seoSummary">L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</span></p> +<div>{{APIRef}}</div> + +<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> <h2 id="Informations_générales">Informations générales</h2> @@ -39,8 +40,8 @@ translation_of: Web/API/Document/scroll_event </tbody> </table> -<div class="blockIndicator note"> -<p>Note : 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 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> <h2 id="Propriétés">Propriétés</h2> @@ -95,7 +96,7 @@ translation_of: Web/API/Document/scroll_event <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> -<pre class="brush: js notranslate">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/ +<pre class="brush: js">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/ var derniere_position_de_scroll_connue = 0; var ticking = false; diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html index 8c66beecb4..270c7d8821 100644 --- a/files/fr/web/api/document/selectedstylesheetset/index.html +++ b/files/fr/web/api/document/selectedstylesheetset/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Document/selectedStyleSheetSet <p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet @@ -22,20 +22,24 @@ document.selectedStyleSheet = <em>newStyleSheetSet</em> <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> -<p><span id="result_box" lang="fr"><span>La définition de la valeur de cette propriété équivaut à appeler</span></span> {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p> +<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> -<div class="note"><strong>Note :</strong> Cette valeur d'attribut est directe : <span id="result_box" lang="fr"><span>sa modification affectera la valeur de l'attribut.</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.</p> +</div> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet); document.selectedStyleSheetSet = "Some other style sheet"; </pre> -<div class="note"><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()") }}.</div> +<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> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{ domxref("document.lastStyleSheetSet") }}</li> @@ -44,8 +48,8 @@ document.selectedStyleSheetSet = "Some other style sheet"; <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> </ul> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> </ul> diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html index 2965e4eb43..44b8d92e15 100644 --- a/files/fr/web/api/document/stylesheets/index.html +++ b/files/fr/web/api/document/stylesheets/index.html @@ -11,7 +11,7 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets <div> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets; </pre> @@ -20,7 +20,7 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets <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" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -46,12 +46,12 @@ original_slug: Web/API/DocumentOrShadowRoot/styleSheets </tbody> </table> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<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 class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> + <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> diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html index 14adac7a18..f584192df8 100644 --- a/files/fr/web/api/document/stylesheetsets/index.html +++ b/files/fr/web/api/document/stylesheetsets/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/Document/styleSheetSets <p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>sets</em> = document.styleSheetSets </pre> <p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <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> @@ -40,13 +40,13 @@ for (var i = 0; i < sheets.length; i++) { <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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li> </ul> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{domxref("Stylesheet")}}</li> diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html index 98cb79bb34..003f214380 100644 --- a/files/fr/web/api/document/title/index.html +++ b/files/fr/web/api/document/title/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Document/title <p>Obtient ou défini le titre de la page.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title; </pre> @@ -19,7 +19,7 @@ translation_of: Web/API/Document/title <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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js"><!DOCTYPE html> <html> @@ -38,7 +38,7 @@ alert(document.title); // Affiche "Goodbye World!" </html> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p> @@ -46,9 +46,9 @@ alert(document.title); // Affiche "Goodbye World!" <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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li> - <li><a class="external" href="http://www.whatwg.org/html/#document.title" title="http://www.whatwg.org/html/#document.title">HTML5</a></li> + <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> diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html index 681797c298..13c0927cff 100644 --- a/files/fr/web/api/document/tooltipnode/index.html +++ b/files/fr/web/api/document/tooltipnode/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Document/tooltipNode <p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p> -<h2 id="Usage" name="Usage">Syntaxe</h2> +<h2 id="Usage">Syntaxe</h2> <pre class="eval">document.tooltipNode; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p> diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html index f31ff40c44..a12b93005e 100644 --- a/files/fr/web/api/document/touchend_event/index.html +++ b/files/fr/web/api/document/touchend_event/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Document/touchend_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd> + <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> @@ -62,7 +62,7 @@ translation_of: Web/API/Document/touchend_event <tr> <td><code>view</code> {{readonlyInline}}</td> <td>WindowProxy</td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -110,7 +110,7 @@ translation_of: Web/API/Document/touchend_event <h2 id="Exemples">Exemples</h2> -<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events">Touch events</a>.</p> +<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> diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html index 7b8d5c9395..55916580ec 100644 --- a/files/fr/web/api/document/transitionend_event/index.html +++ b/files/fr/web/api/document/transitionend_event/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/Document/transitionend_event <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> -<p>La cible originale pour cet évènement est l’<code><a href="https://developer.mozilla.org/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> +<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> <h2 id="Exemples">Exemples</h2> @@ -40,13 +40,13 @@ translation_of: Web/API/Document/transitionend_event console.log('Transition terminée'); });</pre> -<p>La même chose, mais en utilisant la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p> +<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> <pre class="brush: js">document.ontransitionend = () => { console.log('Transition terminée'); };</pre> -<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example" lang="en-US">Voir un exemple en direct sur cet évènement.</a></p> +<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> @@ -77,7 +77,7 @@ translation_of: Web/API/Document/transitionend_event <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="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li> - <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li> - <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></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> diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html index 32b79c706d..1b599ff794 100644 --- a/files/fr/web/api/document/url/index.html +++ b/files/fr/web/api/document/url/index.html @@ -7,17 +7,17 @@ translation_of: Web/API/Document/URL <p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js">var <em>string</em> = document.URL </pre> -<h2 id="Specification" name="Specification">Exemple</h2> +<h2 id="Specification">Exemple</h2> <pre><code>var currentURL = document.URL; alert(currentURL);</code></pre> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li> diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html index 2ff5dcc883..d8ea3d1139 100644 --- a/files/fr/web/api/document/visibilitystate/index.html +++ b/files/fr/web/api/document/visibilitystate/index.html @@ -30,10 +30,10 @@ translation_of: Web/API/Document/visibilityState <h2 id="Exemples">Exemples</h2> -<pre class="brush:js; line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"visibilitychange"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> document<span class="punctuation token">.</span>visibilityState <span class="punctuation token">)</span><span class="punctuation token">; - // Modifier le comportement...</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">document.addEventListener("visibilitychange", function() { + console.log( document.visibilityState ); + // Modifier le comportement... +});</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html index 94c91d793d..8be64c2109 100644 --- a/files/fr/web/api/document/width/index.html +++ b/files/fr/web/api/document/width/index.html @@ -6,37 +6,37 @@ translation_of: Web/API/Document/width <div>{{APIRef("DOM")}} {{Obsolete_header}}</div> <div class="note"> -<p><strong>Remarque:</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> +<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> <p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p> <p>Non pris en charge par Internet Explorer.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>pixels</em> = document.width; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">function init() { alert("La largeur du document est " + document.width + " pixels."); } </pre> -<h2 id="Alternatives" name="Alternatives">Alternatives</h2> +<h2 id="Alternatives">Alternatives</h2> <pre class="syntaxbox">document.body.clientWidth /* largeur de <body> */ document.documentElement.clientWidth /* largeur de <html> */ window.innerWidth /* largeur de la fenêtre */ </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>HTML5</p> -<h2 id="See_also" name="See_also">Voir également</h2> +<h2 id="See_also">Voir également</h2> <ul> <li>{{domxref("document.height")}}</li> diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html index e0aec07be3..30a3d4da6b 100644 --- a/files/fr/web/api/document/write/index.html +++ b/files/fr/web/api/document/write/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Document/write --- <p>{{ ApiRef("DOM") }}</p> -<p>Écrit une chaîne de texte dans un document ouvert par <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a>.</p> +<p>Écrit une chaîne de texte dans un document ouvert par <a href="/fr/docs/Web/API/Document/open">document.open()</a>.</p> <div class="note"> -<p><strong>Note :</strong> comme <code>document.write</code> écrit <span class="short_text" id="result_box" lang="fr"><span>dans le flux de documents,</span></span> appeler <code>document.write</code> <span id="result_box" lang="fr"><span>sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval">document.write(<em>balisage</em>); </pre> @@ -29,7 +29,7 @@ translation_of: Web/API/Document/write <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd> </dl> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><html> @@ -55,22 +55,22 @@ document.close(); </html> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/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> +<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> <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> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - document<span class="punctuation token">.</span><span class="function token">write</span><span class="punctuation token">(</span><span class="string token">"<h1>Main title</h1>"</span><span class="punctuation token">)</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script></pre> <div class="note"> -<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p> +<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> <div class="note"> -<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="https://developer.mozilla.org/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> +<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> <div class="note"> @@ -78,14 +78,14 @@ document.close(); </div> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À 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.</span></span></p> +<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> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external external-icon" 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 class="external external-icon" 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> + <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> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html index 046c069cbc..eb06d11321 100644 --- a/files/fr/web/api/document/writeln/index.html +++ b/files/fr/web/api/document/writeln/index.html @@ -12,29 +12,27 @@ translation_of: Web/API/Document/writeln <p>Écrit une chaine de caractères suivie d'un retour de ligne.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval notranslate">document.writeln(<em>ligne</em>); +<pre class="eval">document.writeln(<em>ligne</em>); </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>ligne</code> est la chaine de caractère contenant le texte.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="notranslate">document.writeln("<p>Entrez votre mot de passe :</p>"); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> -<div class="note"><strong>Note :</strong> <strong>document.writeln</strong> (comme <strong>document.write</strong>) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> - -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html index e3b98135f1..a7236fc2f6 100644 --- a/files/fr/web/api/document/xmlencoding/index.html +++ b/files/fr/web/api/document/xmlencoding/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/Document/xmlEncoding <p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p> -<div class="warning"><strong>Warning :</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") }}.</div> +<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> <p>Si la déclaration XML indique :</p> @@ -23,13 +25,11 @@ translation_of: Web/API/Document/xmlEncoding <p>... le résultat doit être "UTF-16".</p> -<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, <u><em>dans le cadre de la déclaration XML</em></u>, l'encodage de ce document.").</p> - -<p> </p> +<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> <h3 id="Spécification">Spécification</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li> + <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> diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html index ce2a197b51..4145a61548 100644 --- a/files/fr/web/api/document/xmlversion/index.html +++ b/files/fr/web/api/document/xmlversion/index.html @@ -21,9 +21,9 @@ translation_of: Web/API/Document/xmlVersion } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li> + <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> diff --git a/files/fr/web/api/document_object_model/examples/index.html b/files/fr/web/api/document_object_model/examples/index.html index a1d62f4019..9754cae903 100644 --- a/files/fr/web/api/document_object_model/examples/index.html +++ b/files/fr/web/api/document_object_model/examples/index.html @@ -9,132 +9,132 @@ 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> -<h2 id="Exemple_1_:_height_et_width" name="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> +<h2 id="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2> <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> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>width/height example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> arrImages <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Array</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - arrImages<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - arrImages<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - arrImages<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> objOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> strHtml <span class="operator token">=</span> <span class="string token">"<ul>"</span><span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> arrImages<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"<li>image"</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i<span class="operator token">+</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">+</span> - <span class="string token">": height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>height <span class="operator token">+</span> - <span class="string token">", width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>width <span class="operator token">+</span> - <span class="string token">", style.height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">+</span> - <span class="string token">", style.width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>width <span class="operator token">+</span> - <span class="string token">"<\/li>"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"<\/ul>"</span><span class="punctuation token">;</span> - - objOutput<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> strHtml<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Image 1: no height, width, or style - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Image 2: height="50", width="500", but no style - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image2<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span> - <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Image 3: no height, width, but style="height: 50px; width: 500px;" - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image3<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> - <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Exemple_2_:_attributs_d.27image" name="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> - -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Modifying an image border<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">setBorderWidth</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"img1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>borderWidth <span class="operator token">=</span> width <span class="operator token">+</span> <span class="string token">"px"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img1<span class="punctuation token">"</span></span> - <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> - <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span>px solid green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span> - <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>border test<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>FormName<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 20px-wide<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(20);<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 5px-wide<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(5);<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> - -<h2 id="Exemple_3_:_manipulation_de_styles" name="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + 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>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</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 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> + +<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> + +<div id="output"> </div> +</body> +</html></pre> + +<h2 id="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + 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> + +</body> +</html></pre> + +<h2 id="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2> <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> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Changing color and font-size example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">changeText</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"pid"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script> +function changeText() { + var p = document.getElementById("pid"); - p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"blue"</span> - p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontSize <span class="operator token">=</span> <span class="string token">"18pt"</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pid<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>window.location.href <span class="punctuation token">=</span> <span class="punctuation token">'</span>http://www.cnn.com/<span class="punctuation token">'</span>;<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>linker<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rec<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeText();<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style" name="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> +<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2> <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> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> ss <span class="operator token">=</span> document<span class="punctuation token">.</span>styleSheets<span class="punctuation token">;</span> +<pre class="brush:js">var ss = document.styleSheets; -<span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> ss<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">.</span>length<span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">dump</span><span class="punctuation token">(</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">[</span>j<span class="punctuation token">]</span><span class="punctuation token">.</span>selectorText <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +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> @@ -150,221 +150,221 @@ P #LUMPY </pre> -<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements" name="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements"><a id="Exemple_5_:_propagation_d'évènements" name="Exemple_5_:_propagation_d'évènements"></a>Exemple 5 : propagation d'évènements</h2> +<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements">Exemple 5 : propagation d'évènements</h2> <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> <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> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Event Propagation<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token"><span class="id token">#t-daddy</span> </span><span class="punctuation token">{</span> <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid red <span class="punctuation token">}</span> -<span class="selector token"><span class="id token">#c1</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">stopEvent</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"c2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - c2<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"hello"</span><span class="punctuation token">;</span> +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; - <span class="comment token">// cela devrait empêcher t-daddy d'obtenir le click.</span> - ev<span class="punctuation token">.</span><span class="function token">stopPropagation</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"event propagation halted."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + // cela devrait empêcher t-daddy d'obtenir le click. + ev.stopPropagation(); + alert("event propagation halted."); +} -<span class="keyword token">function</span> <span class="function token">load</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"tbl1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - elem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> stopEvent<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>load();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<body onload="load();"> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t-daddy<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert(<span class="punctuation token">'</span>hi<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tbl1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>one<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>two<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_6_:_getComputedStyle" name="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> +<h2 id="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2> -<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="https://developer.mozilla.org/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p> +<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> <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> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>getComputedStyle example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<title>getComputedStyle example</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">function</span> <span class="function token">cStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> RefDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"d1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> txtHeight <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> h_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"height"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); - txtHeight<span class="punctuation token">.</span>value <span class="operator token">=</span> h_style<span class="punctuation token">;</span> + txtHeight.value = h_style; - <span class="keyword token">var</span> txtWidth <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> w_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"width"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); - txtWidth<span class="punctuation token">.</span>value <span class="operator token">=</span> w_style<span class="punctuation token">;</span> + txtWidth.value = w_style; - <span class="keyword token">var</span> txtBackgroundColor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> b_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"background-color"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); - txtBackgroundColor<span class="punctuation token">.</span>value <span class="operator token">=</span> b_style<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + txtBackgroundColor.value = b_style; +} +</script> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token"><span class="id token">#d1</span> </span><span class="punctuation token">{</span> - <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">173</span>, <span class="number token">216</span>, <span class="number token">230</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> - <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>d1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="entity token" title=" ">&nbsp;</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<div id="d1">&nbsp;</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cStyles();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>getComputedStyle<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - height<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - max-width<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - bg-color<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<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> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event" name="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> +<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> <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> -<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a class="external" 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> +<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> <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> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Show Event properties<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="selector token">table </span><span class="punctuation token">{</span> <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token">thead </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token">td </span><span class="punctuation token">{</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">10</span>px <span class="number token">2</span>px <span class="number token">10</span>px<span class="punctuation token">;</span> <span class="punctuation token">}</span> +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } -<span class="selector token"><span class="class token">.odd</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#efdfef</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="selector token"><span class="class token">.even</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<script> -<span class="keyword token">function</span> <span class="function token">showEventProperties</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">function</span> <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } - <span class="keyword token">var</span> e <span class="operator token">=</span> e <span class="operator token">||</span> window<span class="punctuation token">.</span>event<span class="punctuation token">;</span> - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'eventType'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> e<span class="punctuation token">.</span>type<span class="punctuation token">;</span> + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; - <span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'table'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> thead <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">createTHead</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> row <span class="operator token">=</span> thead<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> lableList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'#'</span><span class="punctuation token">,</span> <span class="string token">'Property'</span><span class="punctuation token">,</span> <span class="string token">'Value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> len <span class="operator token">=</span> lableList<span class="punctuation token">.</span>length<span class="punctuation token">;</span> + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token"><</span>len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> lableList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } - <span class="keyword token">var</span> tbody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'tbody'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - table<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbody<span class="punctuation token">)</span><span class="punctuation token">;</span> + var tbody = document.createElement('tbody'); + table.appendChild(tbody); - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> p <span class="keyword token">in</span> e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - row <span class="operator token">=</span> tbody<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - row<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="punctuation token">(</span>row<span class="punctuation token">.</span>rowIndex <span class="operator token">%</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="operator token">?</span> <span class="string token">'odd'</span><span class="punctuation token">:</span><span class="string token">'even'</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> row<span class="punctuation token">.</span>rowIndex<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> p<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> e<span class="punctuation token">[</span>p<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } - document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>table<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + document.body.appendChild(table); +} -window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="function token">showEventProperties</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Properties of the DOM <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>eventType<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> Event Object<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</html></pre> -<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table" name="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> +<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2> <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> <p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>table0<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Row 0 Cell 0<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span>Row 0 Cell 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'table0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> row <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> cell<span class="punctuation token">,</span> - text<span class="punctuation token">;</span> +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; -<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - text <span class="operator token">=</span> <span class="string token">'Row '</span> <span class="operator token">+</span> row<span class="punctuation token">.</span>rowIndex <span class="operator token">+</span> <span class="string token">' Cell '</span> <span class="operator token">+</span> i<span class="punctuation token">;</span> - cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script></pre> -<h4 id="Notes" name="Notes">Notes</h4> +<h4 id="Notes">Notes</h4> <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="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</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> <h2 id="Subnav">Subnav</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li> + <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> diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html index d599a27ad5..ed1a422071 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -10,9 +10,9 @@ original_slug: Comment_créer_un_arbre_DOM --- <p> </p> -<p>Cet article décrit comment utiliser l'API <a class="external" 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> +<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" name="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> +<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3> <p>Considérons le document XML suivant :</p> @@ -85,63 +85,63 @@ peopleElem.appendChild(personElem2); doc.appendChild(peopleElem); </pre> -<p>Voir également le chapitre <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p> +<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 line-numbers language-js"><code class="language-js"><span class="punctuation token">{</span> - <span class="string token">"people"</span><span class="punctuation token">:</span> <span class="punctuation token">{</span> - <span class="string token">"person"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 main st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"arlington"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ma"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> - <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"eric"</span><span class="punctuation token">,</span> - <span class="string token">"@middle-initial"</span><span class="punctuation token">:</span> <span class="string token">"H"</span><span class="punctuation token">,</span> - <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"jung"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"address"</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 north st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"atlanta"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"ga"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"123 west st"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"seattle"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"wa"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="string token">"@street"</span><span class="punctuation token">:</span> <span class="string token">"321 south avenue"</span><span class="punctuation token">,</span> - <span class="string token">"@city"</span><span class="punctuation token">:</span> <span class="string token">"denver"</span><span class="punctuation token">,</span> - <span class="string token">"@state"</span><span class="punctuation token">:</span> <span class="string token">"co"</span><span class="punctuation token">,</span> - <span class="string token">"@country"</span><span class="punctuation token">:</span> <span class="string token">"usa"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span><span class="punctuation token">,</span> - <span class="string token">"@first-name"</span><span class="punctuation token">:</span> <span class="string token">"jed"</span><span class="punctuation token">,</span> - <span class="string token">"@last-name"</span><span class="punctuation token">:</span> <span class="string token">"brown"</span> - <span class="punctuation token">}</span><span class="punctuation token">]</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="Alors_quoi_.3F" name="Alors_quoi_.3F">Et après ?</h3> - -<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="https://developer.mozilla.org/fr/docs/XSLT">XSLT</a>, <a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">XLink</a>, convertis en un objet JavaScript à travers un <a href="https://developer.mozilla.org/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p> +<pre class="brush: js">{ + "people": { + "person": [{ + "address": [{ + "@street": "321 south st", + "@city": "denver", + "@state": "co", + "@country": "usa" + }, { + "@street": "123 main st", + "@city": "arlington", + "@state": "ma", + "@country": "usa" + }], + "@first-name": "eric", + "@middle-initial": "H", + "@last-name": "jung" + }, { + "address": [{ + "@street": "321 north st", + "@city": "atlanta", + "@state": "ga", + "@country": "usa" + }, { + "@street": "123 west st", + "@city": "seattle", + "@state": "wa", + "@country": "usa" + }, { + "@street": "321 south avenue", + "@city": "denver", + "@state": "co", + "@country": "usa" + }], + "@first-name": "jed", + "@last-name": "brown" + }] + } +}</pre> + +<h3 id="Alors_quoi_.3F">Et après ?</h3> + +<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> <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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Glossaire/XML" title="en/XML">XML</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/JXON" title="en/JXON">JXON</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> + <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> diff --git a/files/fr/web/api/document_object_model/index.html b/files/fr/web/api/document_object_model/index.html index cf44a48c6d..dad3cd1a68 100644 --- a/files/fr/web/api/document_object_model/index.html +++ b/files/fr/web/api/document_object_model/index.html @@ -10,13 +10,12 @@ 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. <span id="result_box" lang="fr"><span>Les nœuds peuvent être associés à des gestionnaires d'événements.</span> <span>Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</span></span></p> +<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="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</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> -<div class="index"> <ul> <li>{{domxref("Attr")}}</li> <li>{{domxref("CharacterData")}}</li> @@ -60,13 +59,11 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("Worker")}}</li> <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> </ul> -</div> <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> -<div class="index"> <ul> <li>{{domxref("CDATASection")}}</li> <li>{{domxref("DocumentTouch")}}</li> @@ -87,7 +84,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("TypeInfo")}}</li> <li>{{domxref("UserDataHandler")}}</li> </ul> -</div> <h2 id="Interfaces_HTML">Interfaces HTML</h2> @@ -97,7 +93,6 @@ translation_of: Web/API/Document_Object_Model <h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3> -<div class="index"> <ul> <li>{{domxref("HTMLAnchorElement")}}</li> <li>{{domxref("HTMLAppletElement")}}</li> @@ -170,11 +165,9 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("HTMLUnknownElement")}}</li> <li>{{domxref("HTMLVideoElement")}}</li> </ul> -</div> <h3 id="Autres_interfaces">Autres interfaces</h3> -<div class="index"> <ul> <li>{{domxref("CanvasRenderingContext2D")}}</li> <li>{{domxref("CanvasGradient")}}</li> @@ -191,22 +184,18 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("RadioNodeList")}}</li> <li>{{domxref("MediaError")}}</li> </ul> -</div> <h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3> -<div class="index"> <ul> <li>{{domxref("HTMLBaseFontElement")}}</li> <li>{{domxref("HTMLIsIndexElement")}}</li> </ul> -</div> -<h2 id="Interfaces_SVG"><a id="SVG_interfaces" name="SVG_interfaces">Interfaces SVG</a></h2> +<h2 id="Interfaces_SVG">Interfaces SVG</a></h2> <h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3> -<div class="index"> <ul> <li>{{domxref("SVGAElement")}}</li> <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> @@ -307,7 +296,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGViewElement")}}</li> <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> </ul> -</div> <h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3> @@ -319,7 +307,6 @@ translation_of: Web/API/Document_Object_Model <h4 id="Interfaces_statiques">Interfaces statiques</h4> -<div class="index"> <ul> <li>{{domxref("SVGAngle")}}</li> <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> @@ -362,11 +349,9 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGTransform")}}</li> <li>{{domxref("SVGTransformList")}}</li> </ul> -</div> <h4 id="Interfaces_animées">Interfaces animées</h4> -<div class="index"> <ul> <li>{{domxref("SVGAnimatedAngle")}}</li> <li>{{domxref("SVGAnimatedBoolean")}}</li> @@ -383,20 +368,16 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGAnimatedString")}}</li> <li>{{domxref("SVGAnimatedTransformList")}}</li> </ul> -</div> <h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3> -<div class="index"> <ul> <li>{{domxref("ElementTimeControl")}}</li> <li>{{domxref("TimeEvent")}}</li> </ul> -</div> <h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3> -<div class="index"> <ul> <li>{{domxref("GetSVGDocument")}}</li> <li>{{domxref("ShadowAnimation")}}</li> @@ -419,7 +400,6 @@ translation_of: Web/API/Document_Object_Model <li>{{domxref("SVGZoomAndPan")}}</li> <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> </ul> -</div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html index a33909ef06..fa1af30b15 100644 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ b/files/fr/web/api/document_object_model/introduction/index.html @@ -87,15 +87,15 @@ p_list = doc.getElementsByTagName("para"); <p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Parceque la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. 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 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> <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> <p>Le tableau suivant décrit brièvement ces types de données.</p> -<table class="standard-table" dir="ltr" style="height: 234px; width: 852px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Type de donnée (Interface)</th> diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index f8be47d2bc..72893cd5ab 100644 --- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -13,22 +13,24 @@ original_slug: >- --- <div>{{ gecko_minversion_header("1.9.1") }}</div> -<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/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> +<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> <h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2> -<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a> ou <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> :</p> +<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> <dl> <dt><code>querySelector</code></dt> - <dd>Renvoie le premier noeud <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/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> + <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 class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/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> + <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> -<div class="note"><strong>Note :</strong> La <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> retournée par <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/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.</div> +<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> -<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> et <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a>, ainsi que dans l'article <a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour querySelector</a>.</p> +<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> <h2 id="Sélecteurs">Sélecteurs</h2> @@ -47,10 +49,10 @@ original_slug: >- <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Extraits de code pour querySelector</a></li> + <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> diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html index b84186a767..e21ba347fa 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -13,54 +13,56 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript --- <p> </p> -<h2 id="Introduction" name="Introduction">Introduction</h2> +<h2 id="Introduction">Introduction</h2> <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> -<div class="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> +<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> -<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> +<h2 id="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2> <h3 id="Contenu_HTML">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Generate a table.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>generate_table()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><input type="button" value="Generate a table." onclick="generate_table()"></pre> <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">generate_table</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// get the reference for the body</span> - <span class="keyword token">var</span> body <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - - <span class="comment token">// creates a <table> element and a <tbody> element</span> - <span class="keyword token">var</span> tbl <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> tblBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// creating all cells</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// creates a table row</span> - <span class="keyword token">var</span> row <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token"><</span> <span class="number token">2</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Create a <td> element and a text node, make the text</span> - <span class="comment token">// node the contents of the <td>, and put the <td> at</span> - <span class="comment token">// the end of the table row</span> - <span class="keyword token">var</span> cell <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> cellText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"cell in row "</span><span class="operator token">+</span>i<span class="operator token">+</span><span class="string token">", column "</span><span class="operator token">+</span>j<span class="punctuation token">)</span><span class="punctuation token">;</span> - cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cellText<span class="punctuation token">)</span><span class="punctuation token">;</span> - row<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>cell<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">// add the row to the end of the table body</span> - tblBody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>row<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">// put the <tbody> in the <table></span> - tbl<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tblBody<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// appends <table> into <body></span> - body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbl<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// sets the border attribute of tbl to 2;</span> - tbl<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">"border"</span><span class="punctuation token">,</span> <span class="string token">"2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function generate_table() { + // get the reference for the body + var body = document.getElementsByTagName("body")[0]; + + // 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++) { + // 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 + // the end of the table row + var cell = document.createElement("td"); + var cellText = document.createTextNode("cell in row "+i+", column "+j); + cell.appendChild(cellText); + row.appendChild(cell); + } + + // add the row to the end of the table body + tblBody.appendChild(row); + } + + // put the <tbody> in the <table> + tbl.appendChild(tblBody); + // appends <table> into <body> + body.appendChild(tbl); + // sets the border attribute of tbl to 2; + tbl.setAttribute("border", "2"); +}</pre> <p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> @@ -108,36 +110,36 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p> -<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> +<p><img src="sample1-tabledom.jpg"></p> <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" name="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : <span id="result_box" lang="fr"><span>Définition de la couleur d'arrière-plan d'un paragraphe</span></span></h2> +<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : Définition de la couleur d'arrière-plan d'un paragraphe</h2> -<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. <span id="result_box" lang="fr"><span>Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette.</span> <span>Le premier élément de la liste se trouve à la position [0] dans le tableau.</span></span></p> +<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> <h3 id="Contenu_HTML_2">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Set paragraph background color<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>set_background()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hi<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>hello<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><body> + <input type="button" value="Set paragraph background color" onclick="set_background()"> + <p>hi</p> + <p>hello</p> +</body></pre> <h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">set_background</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// </span></code>récupère une liste de tous les éléments body (il n'y en aura qu'un)<code class="language-js"><span class="comment token">,</span> - <span class="comment token">// </span></code>et sélectionne le premier (indice 0) de ces éléments<code class="language-js"> - myBody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush: 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]; - <span class="comment token">// </span></code>à présent, trouve tous les éléments p enfants de cet élément body<code class="language-js"> - myBodyElements <span class="operator token">=</span> myBody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // à présent, trouve tous les éléments p enfants de cet élément body + myBodyElements = myBody.getElementsByTagName("p"); - <span class="comment token">// </span></code>récupère le second élément de cette liste d'éléments p<code class="language-js"> - myP <span class="operator token">=</span> myBodyElements<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - myP<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"rgb(255,0,0)"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + // 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> <p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> @@ -145,17 +147,17 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <ol> <li>On récupère d'abord une liste de tous les éléments body avec - <pre class="line-numbers language-html"><code class="language-html">myBody = document.getElementsByTagName("body")[0]</code></pre> + <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="line-numbers language-html"><code class="language-html">myBodyElements = myBody.getElementsByTagName("p");</code></pre> + <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="line-numbers language-html"><code class="language-html">myP = myBodyElements[1];</code></pre> + <pre class="brush:html">myP = myBodyElements[1];</pre> </li> </ol> -<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p> +<p><img src="sample2a2.jpg"></p> <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> @@ -163,15 +165,15 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript // ajoute une propriété de style inline </pre> -<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29" name="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> +<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> <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="line-numbers language-html"><code class="language-html">myTextNode = document.createTextNode("world");</code></pre> +<pre class="brush:html">myTextNode = document.createTextNode("world");</pre> <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> -<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29" name="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> +<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3> <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> @@ -180,11 +182,13 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript <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> -<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p> +<p><img src="sample2b2.jpg"></p> -<div class="note">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>.</div> +<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> -<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29" name="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> +<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> <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> @@ -192,9 +196,9 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript body.appendChild(nouveauNoeudBALISEP); </pre> -<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p> +<p><img src="sample2c.jpg"></p> -<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29" name="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> +<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> <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> @@ -208,17 +212,17 @@ body.appendChild(nouveauNoeudBALISEP); <p>L'arborescence des objets se présente désormais comme ceci :</p> -<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p> +<p><img src="sample2d.jpg"></p> -<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29" name="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> +<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2> <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> -<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML" name="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> +<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3> -<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> +<p><img src="sample1-tabledom.jpg"></p> -<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence" name="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3> +<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> <p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p> @@ -230,7 +234,9 @@ body.appendChild(nouveauNoeudBALISEP); <p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p> -<div class="note">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.</div> +<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> <pre><head> <title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title> @@ -276,34 +282,36 @@ body.appendChild(nouveauNoeudBALISEP); </html> </pre> -<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS" name="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> +<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2> -<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau" name="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3> +<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> <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> -<div class="note">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>.</div> +<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> -<pre class="brush:js line-numbers language-js"><code class="language-js">mybody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mytable <span class="operator token">=</span> mybody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mytablebody <span class="operator token">=</span> mytable<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tbody"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -myrow <span class="operator token">=</span> mytablebody<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"tr"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -mycel <span class="operator token">=</span> myrow<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush:js">mybody = document.getElementsByTagName("body")[0]; +mytable = mybody.getElementsByTagName("table")[0]; +mytablebody = mytable.getElementsByTagName("tbody")[0]; +myrow = mytablebody.getElementsByTagName("tr")[1]; +mycel = myrow.getElementsByTagName("td")[1]; -<span class="comment token">// premier élément du noeud liste des enfants de mycel</span> -myceltext<span class="operator token">=</span>mycel<span class="punctuation token">.</span>childNodes<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +// premier élément du noeud liste des enfants de mycel +myceltext=mycel.childNodes[0]; -<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>contenu de currenttext est le contenu des données de</span></span><code class="language-js"><span class="comment token"> myceltext</span> -currenttext<span class="operator token">=</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>myceltext<span class="punctuation token">.</span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> -mybody<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currenttext<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +// 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" name="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3> +<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="line-numbers language-html"><code class="language-html">mytable.getAttribute("border");</code></pre> +<pre class="brush:html">mytable.getAttribute("border");</pre> -<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style" name="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> +<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> @@ -340,7 +348,7 @@ mybody<span class="punctuation token">.</span><span class="function token">appen </html> </pre> -<h4 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h4> +<h4 id="Original_Document_Information">Original Document Information</h4> <dl> <dt>Author(s)</dt> @@ -350,4 +358,4 @@ mybody<span class="punctuation token">.</span><span class="function token">appen </dl> <p><br> - <span class="comment">Interwik</span></p> + Interwik</p> diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html index a509d0525b..c59fe45427 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -11,9 +11,9 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ --- <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> -<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu" name="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> +<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2> -<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="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p> +<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> <pre class="eval"><html> <head> @@ -26,68 +26,59 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_ </html> </pre> -<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="https://developer.mozilla.org/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> +<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> <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> -<h2 id="Ce_que_permet_le_DOM_Level_1_Core" name="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> +<h2 id="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2> -<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 class="external" 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> +<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> -<h2 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h2> +<h2 id="Un_exemple_simple">Un exemple simple</h2> <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> <h3 id="Contenu_HTML">Contenu HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Change this document.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>change()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Header<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body></pre> <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">function</span> <span class="function token">change</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// </span></code><span id="result_box" lang="fr"><span>document.getElementsByTagName ("H2") renvoie un NodeList du</span></span><code class="language-js"><span class="comment token"> <h2></span> - <span class="comment token">// éléments dans le document, et le premier est le nombre 0:</span> - - <span class="keyword token">var</span> header <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"H2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// le firstChild de l'en-tête est un noeud texte::</span> - header<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"A dynamic document"</span><span class="punctuation token">;</span> - <span class="comment token">// maintenant l'en-tête est "Un document dynamique".</span> - - <span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - para<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"This is the first paragraph."</span><span class="punctuation token">;</span> - - <span class="comment token">// crée un nouveau noeud texte pour le second paragraphe</span> - <span class="keyword token">var</span> newText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"This is the second paragraph."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// crée un nouvel Element pour le second paragraphe</span> - <span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// pose le texte dans le paragraphe</span> - newElement<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newText<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token">// et pose le paragraphe à la fin du document en l'ajoutant</span> - <span class="comment token">// au BODY (qui est le parent de para)</span> - para<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span></code></pre> +<pre class="brush: 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); + // le firstChild de l'en-tête est un noeud texte:: + header.firstChild.data = "A dynamic document"; + // maintenant l'en-tête est "Un document dynamique". + + var para = document.getElementsByTagName("P").item(0); + para.firstChild.data = "This is the first paragraph."; + + // crée un nouveau noeud texte pour le second paragraphe + var newText = document.createTextNode("This is the second paragraph."); + // crée un nouvel Element pour le second paragraphe + var newElement = document.createElement("P"); + // pose le texte dans le paragraphe + newElement.appendChild(newText); + // 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> -<p>Vous pouvez voir ce script dans <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> +<p>Vous pouvez voir ce script dans <a href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p> -<h3 id="Pour_en_savoir_plus" name="Pour_en_savoir_plus">Pour en apprendre plus</h3> +<h3 id="Pour_en_savoir_plus">Pour en apprendre plus</h3> -<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="https://developer.mozilla.org/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> +<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> -<p>Consultez également la <a class="external" 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="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p> - -<div class="originaldocinfo"> -<p><strong>Informations sur le document original</strong></p> - -<ul> - <li>Auteur(s) : L. David Baron <dbaron at dbaron dot org></li> - <li>Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li> -</ul> -</div> +<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 diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html index d13a541dc7..9529722049 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.html +++ b/files/fr/web/api/document_object_model/whitespace/index.html @@ -5,7 +5,7 @@ tags: - DOM translation_of: Web/API/Document_Object_Model/Whitespace --- -<h2 id="Le_probl.C3.A8me" name="Le_probl.C3.A8me">Le problème</h2> +<h2 id="Le_probl.C3.A8me">Le problème</h2> <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> @@ -30,38 +30,38 @@ translation_of: Web/API/Document_Object_Model/Whitespace </html> </pre> -<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> +<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> -<h2 id="Rendre_les_choses_plus_faciles" name="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> +<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2> -<p><span id="result_box" lang="fr"><span>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</span></span></p> +<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!-- jolie impression conventionnelle +<pre class="brush: html"><!-- jolie impression conventionnelle avec des espaces entre les balises: - --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="comment token"><!-- jolie impression adaptée au problème : - --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span> - <span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span> -<span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + --> +<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 line-numbers language-js"><code class="language-js"><span class="comment token">/** +<pre class="brush: js">/** * Tout au long, les espaces sont définis comme l'un des caractères * "\t" TAB \u0009 * "\n" LF \u000A @@ -70,25 +70,25 @@ translation_of: Web/API/Document_Object_Model/Whitespace * * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement * espaces (et aussi d'autres caractères). - */</span> + */ -<span class="comment token">/** +/** * Détermine si le contenu du texte d'un nœud est entièrement blanc. * * @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>. - */</span> -<span class="keyword token">function</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - <span class="keyword token">return</span> <span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[^\t\n\r ]/</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>nod<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + */ +function is_all_ws( nod ) +{ + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + return !(/[^\t\n\r ]/.test(nod.textContent)); +} -<span class="comment token">/** +/** * 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|. @@ -96,15 +96,15 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| * et autrement false <em>(faux)</em>. - */</span> + */ -<span class="keyword token">function</span> <span class="function token">is_ignorable</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="punctuation token">(</span> nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">8</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="comment token">// un nœud commentaire</span> - <span class="punctuation token">(</span> <span class="punctuation token">(</span>nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span>nod<span class="punctuation token">)</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// un nœud texte, tout espace</span> -<span class="punctuation token">}</span> +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 +} -<span class="comment token">/** +/** * Version de |previousSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |previousSibling| est une propriété * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est @@ -116,16 +116,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_before</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * @@ -134,16 +134,16 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">node_after</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** * Version de |lastChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire. (Normalement |lastChild| est une propriété * de tous les nœuds DOM qui donnent le dernier des nœuds contenus @@ -154,18 +154,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">last_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>previousSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * @@ -174,18 +174,18 @@ translation_of: Web/API/Document_Object_Model/Whitespace * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou * 2) null si aucun nœud n'existe. - */</span> -<span class="keyword token">function</span> <span class="function token">first_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span> - res <span class="operator token">=</span> res<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">/** + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** * Version de |data| cela n'inclut pas les espaces au début * et termine et normalise tous les espaces dans un seul espace. (Normalement * |data | est une propriété des nœuds de texte qui donne le texte du nœud.) @@ -193,40 +193,30 @@ translation_of: Web/API/Document_Object_Model/Whitespace * @param txt Le nœud de texte dont les données doivent être renvoyées * @return Une chaîne donnant le contenu du nœud de texte avec * espace blanc s'est effondré. - */</span> -<span class="keyword token">function</span> <span class="function token">data_of</span><span class="punctuation token">(</span> txt <span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">var</span> data <span class="operator token">=</span> txt<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span> - <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[\t\n\r ]+/g</span><span class="punctuation token">,</span> <span class="string token">" "</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span>data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span> - data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span> data<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h2 id="Exemple" name="Exemple">Exemple</h2> + */ +function data_of( txt ) +{ + var data = txt.textContent; + // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +}</pre> + +<h2 id="Exemple">Exemple</h2> <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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> cur <span class="operator token">=</span> <span class="function token">first_child</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">while</span> <span class="punctuation token">(</span>cur<span class="punctuation token">)</span> -<span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">data_of</span><span class="punctuation token">(</span>cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"This is the third paragraph."</span><span class="punctuation token">)</span> - <span class="punctuation token">{</span> - cur<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"magic"</span><span class="punctuation token">;</span> - cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"This is the magic paragraph."</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - cur <span class="operator token">=</span> <span class="function token">node_after</span><span class="punctuation token">(</span>cur<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="originaldocinfo"> -<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> - -<ul> - <li>Auteur : <a class="external" href="http://dbaron.org">L. David Baron</a></li> - <li>Dernière mise à jour : 1er janvier 2003</li> - <li>Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li> -</ul> -</div> +<pre class="brush: js">var cur = first_child(document.getElementById("test")); +while (cur) +{ + if (data_of(cur.firstChild) == "This is the third paragraph.") + { + cur.className = "magic"; + 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.html b/files/fr/web/api/documentfragment/documentfragment/index.html index 205b036775..f9c636ecef 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.html +++ b/files/fr/web/api/documentfragment/documentfragment/index.html @@ -20,9 +20,9 @@ translation_of: Web/API/DocumentFragment/DocumentFragment <h2 id="Exemple">Exemple</h2> -<pre class="brush: js language-js"><code class="language-js">fragment <span class="operator token">=</span> new DocumentFragment<span class="function token"><span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">fragment = new DocumentFragment();</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -46,5 +46,5 @@ translation_of: Web/API/DocumentFragment/DocumentFragment <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">L'index des interfaces du DOM.</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM.</a></li> </ul> diff --git a/files/fr/web/api/documentfragment/index.html b/files/fr/web/api/documentfragment/index.html index eb109de2f1..23025411fa 100644 --- a/files/fr/web/api/documentfragment/index.html +++ b/files/fr/web/api/documentfragment/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/DocumentFragment --- <p>{{ ApiRef("DOM") }}</p> -<p>L’interface <strong><span class="external"><code>DocumentFragment</code></span></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>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> @@ -22,7 +22,7 @@ translation_of: Web/API/DocumentFragment <p>{{InheritanceDiagram}}</p> -<h2 id="Specification" name="Specification">Propriétés</h2> +<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> @@ -54,10 +54,10 @@ translation_of: Web/API/DocumentFragment <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 style="font-size: 14px;">DocumentFragment</code>, dans l’ordre du document, qui correspond à l’ID spécifié.</dd> + <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" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <tbody> @@ -101,5 +101,5 @@ translation_of: Web/API/DocumentFragment <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li> + <li><a href="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li> </ul> diff --git a/files/fr/web/api/documentfragment/queryselector/index.html b/files/fr/web/api/documentfragment/queryselector/index.html index 6914d21c4a..86aac6075b 100644 --- a/files/fr/web/api/documentfragment/queryselector/index.html +++ b/files/fr/web/api/documentfragment/queryselector/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/DocumentFragment/querySelector <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre> @@ -28,7 +28,7 @@ translation_of: Web/API/DocumentFragment/querySelector <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> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <h3 id="Exemple_de_base">Exemple de base</h3> @@ -52,7 +52,7 @@ document.querySelector('#foo\\:bar') // Correspond au second div </script> </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -74,11 +74,11 @@ document.querySelector('#foo\\:bar') // Correspond au second div </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.DocumentFragment.querySelector")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li> diff --git a/files/fr/web/api/domerror/index.html b/files/fr/web/api/domerror/index.html index 6d608370ed..8e481bab48 100644 --- a/files/fr/web/api/domerror/index.html +++ b/files/fr/web/api/domerror/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/DOMError <dl> <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt> - <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant <span id="result_box" lang="fr"><span>l'un des noms de type d'erreur (voir ci-dessous).</span></span></dd> + <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> diff --git a/files/fr/web/api/domexception/index.html b/files/fr/web/api/domexception/index.html index 45549ad419..a2b859da99 100644 --- a/files/fr/web/api/domexception/index.html +++ b/files/fr/web/api/domexception/index.html @@ -32,76 +32,76 @@ translation_of: Web/API/DOMException <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"><a id="noms d'erreur" name="noms d'erreur"></a>Noms d'erreur</h2> +<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> +<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><a id="exception-IndexSizeError"><code>IndexSizeError</code></a></dt> + <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><a id="exception-HierarchyRequestError">HierarchyRequestError</a></code></dt> + <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><a id="exception-WrongDocumentError"><code>WrongDocumentError</code></a></dt> + <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><a id="exception-InvalidCharacterError"><code>InvalidCharacterError</code></a></dt> + <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><a id="exception-NoModificationAllowedError"><code>NoModificationAllowedError</code></a></dt> + <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><a id="exception-NotFoundError"><code>NotFoundError</code></a></dt> + <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><a id="exception-NotFoundError"><code>NotSupportedError</code></a></dt> + <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><a id="exception-InvalidStateError"><code>InvalidStateError</code></a></dt> + <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><a id="exception-SyntaxError"><code>SyntaxError</code></a></dt> + <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><a id="exception-InvalidModificationError"><code>InvalidModificationError</code></a></dt> + <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><a id="exception-NamespaceError"><code>NamespaceError</code></a></dt> + <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><a id="exception-InvalidAccessError"><code>InvalidAccessError</code></a></dt> + <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><a id="exception-TypeMismatchError"><code>TypeMismatchError</code></a> {{deprecated_inline}}</dt> + <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><a id="exception-SecurityError"><code>SecurityError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-NetworkError"><code>NetworkError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-AbortError"><code>AbortError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-URLMismatchError"><code>URLMismatchError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-QuotaExceededError"><code>QuotaExceededError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-TimeoutError"><code>TimeoutError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-InvalidNodeTypeError"><code>InvalidNodeTypeError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-DataCloneError"><code>DataCloneError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-EncodingError"><code>EncodingError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-NotReadableError"><code>NotReadableError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-UnknownError"><code>UnknownError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-ConstraintError"><code>ConstraintError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-DataError"><code>DataError</code></a> {{experimental_inline}}</dt> + <dt><code>DataError</code> {{experimental_inline}}</dt> <dd>Provided data is inadequate (No legacy code value and constant name).</dd> - <dt><a id="exception-TransactionInactiveError"><code>TransactionInactiveError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-ReadOnlyError"><code>ReadOnlyError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-VersionError"><code>VersionError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-OperationError"><code>OperationError</code></a> {{experimental_inline}}</dt> + <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><a id="exception-NotAllowedError"><code>NotAllowedError</code></a> {{experimental_inline}}</dt> + <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> diff --git a/files/fr/web/api/domhighrestimestamp/index.html b/files/fr/web/api/domhighrestimestamp/index.html index beb311d169..b089be1d46 100644 --- a/files/fr/web/api/domhighrestimestamp/index.html +++ b/files/fr/web/api/domhighrestimestamp/index.html @@ -62,7 +62,7 @@ event.timeStamp; <p><em>Ce type n'a pas de méthodes.</em></p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -93,6 +93,6 @@ event.timeStamp; <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></li> + <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> diff --git a/files/fr/web/api/domimplementation/createdocument/index.html b/files/fr/web/api/domimplementation/createdocument/index.html index d8a6666d9f..63bccf3cb1 100644 --- a/files/fr/web/api/domimplementation/createdocument/index.html +++ b/files/fr/web/api/domimplementation/createdocument/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/DOMImplementation/createDocument <dl> <dt><em>documentType </em>{{optional_inline}}</dt> - <dd>Est le <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentType" title="En/DOM/DocumentType"><code>DocumentType</code></a> du document à créer. Vaut <code>null </code>par défaut.</dd> + <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> <ul> diff --git a/files/fr/web/api/domimplementation/index.html b/files/fr/web/api/domimplementation/index.html index 2f3297bde6..71e10fab87 100644 --- a/files/fr/web/api/domimplementation/index.html +++ b/files/fr/web/api/domimplementation/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMImplementation --- <p>{{ ApiRef("DOM") }}</p> -<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. <span class="short_text" id="result_box" lang="fr"><span>Un tel objet est renvoyé par la propriété</span></span> {{domxref("Document.implementation")}}.</p> +<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> <h2 id="Propriété">Propriété</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/DOMImplementation <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")}} <span id="result_box" lang="fr"><span>indiquant si une caractéristique donnée est supportée ou non.</span> <span>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></span> <span>Les anciens navigateurs sont très incohérents dans leur comportement.</span></span></dd> + <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> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/domobject/index.html b/files/fr/web/api/domobject/index.html index b91984316b..e179526e13 100644 --- a/files/fr/web/api/domobject/index.html +++ b/files/fr/web/api/domobject/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/DOMObject <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> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/domparser/index.html b/files/fr/web/api/domparser/index.html index 0151f9bec4..28daa45409 100644 --- a/files/fr/web/api/domparser/index.html +++ b/files/fr/web/api/domparser/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/DOMParser --- <p>{{APIRef("DOM")}}</p> -<p class="summary">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> +<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> <p>Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.</p> diff --git a/files/fr/web/api/dompoint/dompoint/index.html b/files/fr/web/api/dompoint/dompoint/index.html index 960ea67846..952a148a55 100644 --- a/files/fr/web/api/dompoint/dompoint/index.html +++ b/files/fr/web/api/dompoint/dompoint/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/DOMPoint/DOMPoint // DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompoint/index.html b/files/fr/web/api/dompoint/index.html index d1f50a5264..13f1adc696 100644 --- a/files/fr/web/api/dompoint/index.html +++ b/files/fr/web/api/dompoint/index.html @@ -48,9 +48,9 @@ translation_of: Web/API/DOMPoint <dd>La valeur de perspective du <code>DOMPoint</code>.</dd> </dl> -<h2 id="Specification" name="Specification">Exemples</h2> +<h2 id="Specification">Exemples</h2> -<p>Dans l' <a href="https://developer.mozilla.org/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 <span id="result_box" lang="fr"><span>dans lequel l'affichage monté sur la tête de l'utilisateur existe.</span></span> 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> +<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> <pre class="brush: js">function setView() { var posState = gPositionSensor.getState(); @@ -72,10 +72,10 @@ 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> +<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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompointreadonly/index.html b/files/fr/web/api/dompointreadonly/index.html index 13c66ec26d..f200ed1509 100644 --- a/files/fr/web/api/dompointreadonly/index.html +++ b/files/fr/web/api/dompointreadonly/index.html @@ -44,7 +44,7 @@ translation_of: Web/API/DOMPointReadOnly <dd>La valeur de perspective du <code>DOMPoint</code>.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompointreadonly/w/index.html b/files/fr/web/api/dompointreadonly/w/index.html index 297161ae36..6eab04af2c 100644 --- a/files/fr/web/api/dompointreadonly/w/index.html +++ b/files/fr/web/api/dompointreadonly/w/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMPointReadOnly/w <pre class="brush: js">var perspective = DOMPoint.w;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompointreadonly/x/index.html b/files/fr/web/api/dompointreadonly/x/index.html index 1a20413963..77c78c54d4 100644 --- a/files/fr/web/api/dompointreadonly/x/index.html +++ b/files/fr/web/api/dompointreadonly/x/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/DOMPointReadOnly/x <pre class="brush: js">var xPos = DOMPoint.x;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompointreadonly/y/index.html b/files/fr/web/api/dompointreadonly/y/index.html index eb507dea8f..74e42ccf0f 100644 --- a/files/fr/web/api/dompointreadonly/y/index.html +++ b/files/fr/web/api/dompointreadonly/y/index.html @@ -21,11 +21,11 @@ translation_of: Web/API/DOMPointReadOnly/y <pre class="brush: js">var yPos = DOMPoint.y;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/dompointreadonly/z/index.html b/files/fr/web/api/dompointreadonly/z/index.html index ebb2ac2526..3befe72ac8 100644 --- a/files/fr/web/api/dompointreadonly/z/index.html +++ b/files/fr/web/api/dompointreadonly/z/index.html @@ -22,11 +22,11 @@ translation_of: Web/API/DOMPointReadOnly/z <pre class="brush: js">var zPos = DOMPoint.z;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrect/domrect/index.html b/files/fr/web/api/domrect/domrect/index.html index e310429d61..a138a60cd0 100644 --- a/files/fr/web/api/domrect/domrect/index.html +++ b/files/fr/web/api/domrect/domrect/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/DOMRect/DOMRect // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrect/index.html b/files/fr/web/api/domrect/index.html index 4c63c7bc07..a97d1c8d4e 100644 --- a/files/fr/web/api/domrect/index.html +++ b/files/fr/web/api/domrect/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/DOMRect <p>Un <strong><code>DOMRect</code></strong> représente un rectangle.</p> -<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="https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement">canvas</a> dans laquelle le visuel pour un oeil doit être rendu.</p> +<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> <p>Il hérite de son parent {{domxref("DOMRectReadOnly")}}.</p> @@ -61,7 +61,7 @@ translation_of: Web/API/DOMRect <dd>Crée un nouvel objet <code>DOMRect</code> avec l'emplacement et les dimensions données.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/bottom/index.html b/files/fr/web/api/domrectreadonly/bottom/index.html index 2bb2cc7599..16fb24cd52 100644 --- a/files/fr/web/api/domrectreadonly/bottom/index.html +++ b/files/fr/web/api/domrectreadonly/bottom/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/bottom <pre class="brush: js">var recBottom = DOMRect.bottom;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/height/index.html b/files/fr/web/api/domrectreadonly/height/index.html index ca61108446..e617faaa94 100644 --- a/files/fr/web/api/domrectreadonly/height/index.html +++ b/files/fr/web/api/domrectreadonly/height/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/height <pre class="brush: js">var recHeight = DOMRect.height;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/index.html index d637f21d31..6a80fa9ce0 100644 --- a/files/fr/web/api/domrectreadonly/index.html +++ b/files/fr/web/api/domrectreadonly/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/DOMRectReadOnly <dd>Crée un nouvel objet <code>DOMRect</code> avec un emplacement et des dimensions donnés.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/left/index.html b/files/fr/web/api/domrectreadonly/left/index.html index 3c6b68db09..63ef22ecf6 100644 --- a/files/fr/web/api/domrectreadonly/left/index.html +++ b/files/fr/web/api/domrectreadonly/left/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/left <pre class="brush: js">var recLeft = DOMRect.left;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/right/index.html b/files/fr/web/api/domrectreadonly/right/index.html index a0cff4b6ff..011e820cf3 100644 --- a/files/fr/web/api/domrectreadonly/right/index.html +++ b/files/fr/web/api/domrectreadonly/right/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/right <pre class="brush: js">var recRight = DOMRect.right;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/top/index.html b/files/fr/web/api/domrectreadonly/top/index.html index d264e8bf19..fa6b1644ef 100644 --- a/files/fr/web/api/domrectreadonly/top/index.html +++ b/files/fr/web/api/domrectreadonly/top/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/top <pre class="brush: js">var recTop = DOMRect.top;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/width/index.html b/files/fr/web/api/domrectreadonly/width/index.html index 6d221b9de0..60b7427e0f 100644 --- a/files/fr/web/api/domrectreadonly/width/index.html +++ b/files/fr/web/api/domrectreadonly/width/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/DOMRectReadOnly/width <pre class="brush: js">var recWidth = DOMRect.width;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/x/index.html b/files/fr/web/api/domrectreadonly/x/index.html index bbdc61aaa1..89aee41f8b 100644 --- a/files/fr/web/api/domrectreadonly/x/index.html +++ b/files/fr/web/api/domrectreadonly/x/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMRectReadOnly/x <pre class="brush: js">var recX = DOMRect.x;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domrectreadonly/y/index.html b/files/fr/web/api/domrectreadonly/y/index.html index e1b2c23fb9..4daf265c51 100644 --- a/files/fr/web/api/domrectreadonly/y/index.html +++ b/files/fr/web/api/domrectreadonly/y/index.html @@ -19,11 +19,11 @@ translation_of: Web/API/DOMRectReadOnly/y <pre class="brush: js">var recY = DOMRect.y;</pre> -<h3 id="Specification" name="Specification">Valeur</h3> +<h3 id="Specification">Valeur</h3> <p>Un double.</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/domstring/binary/index.html b/files/fr/web/api/domstring/binary/index.html index ecd56243e3..c58db9b8c9 100644 --- a/files/fr/web/api/domstring/binary/index.html +++ b/files/fr/web/api/domstring/binary/index.html @@ -8,24 +8,20 @@ tags: - données translation_of: Web/API/DOMString/Binary --- -<h2 id="Résumé">Résumé</h2> +<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> -<div class="summary"> -<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> -</div> - -<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="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="JavaScript/Reference/Global Objects/String">string</a> (<em>chaîne de caractères</em>) et en utilisant la méthode <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt"><code>charCodeAt()</code></a> pour lire les octets à partir des tampons de données.</p> +<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> <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> -<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">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="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> est un niveau au-dessus des tableaux typés et fournit une interface de type <a class="external" href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> pour les chaînes de caractères.</p> +<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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">Les tableaux typés en JavaScript</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Opérateurs binaires </a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString/Binary"><code>DOMString</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code></a></li> + <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> diff --git a/files/fr/web/api/domstring/index.html b/files/fr/web/api/domstring/index.html index 260cfe1187..7357eaec7a 100644 --- a/files/fr/web/api/domstring/index.html +++ b/files/fr/web/api/domstring/index.html @@ -8,9 +8,9 @@ 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" title="En/JavaScript/Reference/Global_Objects/String">String</a></code>.</p> +<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> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -45,9 +45,9 @@ translation_of: Web/API/DOMString <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li> + <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="https://developer.mozilla.org/fr/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString/Binary">Binary strings</a></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> diff --git a/files/fr/web/api/domstringlist/index.html b/files/fr/web/api/domstringlist/index.html index b0d89b14e6..dd5850119c 100644 --- a/files/fr/web/api/domstringlist/index.html +++ b/files/fr/web/api/domstringlist/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList --- <p>{{ APIRef("DOM") }}</p> -<p>Un type renvoyé par certaines API contenant une liste de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="En/DOM/DOMString">DOMString</a> (<em>chaînes de caractères</em>).</p> +<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> <h2 id="Propriétés">Propriétés</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/DOMStringList <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> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/domtimestamp/index.html b/files/fr/web/api/domtimestamp/index.html index e70c4be3c3..6f9e563048 100644 --- a/files/fr/web/api/domtimestamp/index.html +++ b/files/fr/web/api/domtimestamp/index.html @@ -9,15 +9,10 @@ translation_of: Web/API/DOMTimeStamp --- <p>{{APIRef("DOM")}}</p> -<p>Le type <code>DOMTimeStamp</code> représente une quantité de millisecondes, exprimées de manière absolue ou relative, <span id="result_box" lang="fr"><span>en fonction de la spécification dans laquelle il apparaît.</span></span></p> +<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> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<ul> -</ul> - -<article class="approved text-content"> -<div class="boxed translate-rendered"> <table class="standard-table"> <thead> <tr> @@ -34,47 +29,3 @@ translation_of: Web/API/DOMTimeStamp </tr> </tbody> </table> -</div> -</article> - -<article class="localized"> -<header> -<h3 id="Traduction_en_Français">Traduction en Français :</h3> -</header> - -<div class="guide-links"><a href="https://developer.mozilla.org/fr/docs/MDN/Community">Besoin d'aide ?</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Editor">Guide d'édition</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide">Guide stylistique</a></div> - -<div class="editor-wrapper" id="editor-wrapper"> -<div class="draft-container"> -<div class="draft-old"> </div> - -<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2017-11-03T21:47:27.138Z">03/11/2017 22:47:27</time></span></div> -</div> - -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="editor-tools"> </div> - -<div style="height: 173px;"> -<div style="border: 1px solid rgb(182, 182, 182); width: 786px;"> </div> -</div> -</div> -</div> -</div> -</article> - -<div id="content-fields"> -<article class="localized"> -<div class="editor-wrapper" id="editor-wrapper"> -<div class="ckeditor-container editor-container dirty"> -<div class="editor"> -<div class="cke" dir="ltr" id="cke_id_content" lang="fr"> -<div> -<div id="cke_1_contents" style="height: 260.5px;"> </div> -</div> -</div> -</div> -</div> -</div> -</article> -</div> diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html index 472030ca72..b274f15ac0 100644 --- a/files/fr/web/api/domtokenlist/add/index.html +++ b/files/fr/web/api/domtokenlist/add/index.html @@ -51,7 +51,7 @@ span.textContent = classes; <p>Vous pouvez ajouter plusieurs <em>token</em> :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">,</span> <span class="string token">"e"</span><span class="punctuation token">,</span> <span class="string token">"f"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">span.classList.add("d", "e", "f");</pre> <h2 id="Spécifications">Spécifications</h2> @@ -72,8 +72,4 @@ span.textContent = classes; <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.add")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.add")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html index 282e4743b2..9954b4108f 100644 --- a/files/fr/web/api/domtokenlist/contains/index.html +++ b/files/fr/web/api/domtokenlist/contains/index.html @@ -71,8 +71,4 @@ if(result) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.contains")}}</div> - -<div id="compat-desktop"> </div> - -<p> </p> +<div>{{Compat("api.DOMTokenList.contains")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html index 8e8527b904..8642f149aa 100644 --- a/files/fr/web/api/domtokenlist/entries/index.html +++ b/files/fr/web/api/domtokenlist/entries/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/DOMTokenList/entries <h2 id="Exemples">Exemples</h2> -<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="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un {{domxref("Node.textContent")}} du <code><span></code>.</p> +<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> <p>D'abord le HTML :</p> diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html index a472bdc26d..738ad80d7c 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.html +++ b/files/fr/web/api/domtokenlist/foreach/index.html @@ -89,8 +89,6 @@ classes.forEach( <div>{{Compat("api.DOMTokenList.forEach")}}</div> -<div id="compat-desktop"> </div> - <h2 id="Voir_aussi">Voir aussi</h2> <ul> diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html index 0784f5b071..8f454506dd 100644 --- a/files/fr/web/api/domtokenlist/index.html +++ b/files/fr/web/api/domtokenlist/index.html @@ -48,23 +48,22 @@ translation_of: Web/API/DOMTokenList <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> - <dt> - <h2 id="Exemples">Exemples</h2> - </dt> </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 line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a b c<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><p class="a b c"></p></pre> <p>Puis Javascript :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> classes <span class="operator token">=</span> para<span class="punctuation token">.</span>classList<span class="punctuation token">;</span> -para<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'paragraph classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var para = document.querySelector("p"); +var classes = para.classList; +para.classList.add("d"); +para.textContent = 'paragraph classList is "' + classes + '"';</pre> <p>La sortie ressemble à ceci :</p> @@ -72,14 +71,14 @@ para<span class="punctuation token">.</span>textContent <span class="operator to <h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2> -<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) <span id="result_box" lang="fr"><span>suppriment automatiquement les espaces en excès et les valeurs en double de la liste.</span> <span>Par exemple :</span></span></p> +<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> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span> d d e f<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><span class=" d d e f"></span></pre> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> classes <span class="operator token">=</span> span<span class="punctuation token">.</span>classList<span class="punctuation token">;</span> -span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"x"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -span<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'span classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var span = document.querySelector("span"); +var classes = span.classList; +span.classList.add("x"); +span.textContent = 'span classList is "' + classes + '"';</pre> <p>La sortie ressemble à ceci :</p> @@ -108,9 +107,7 @@ span<span class="punctuation token">.</span>textContent <span class="operator to <div>{{Compat("api.DOMTokenList")}}</div> -<div id="compat-mobile"> <h2 id="Voir_aussi">Voir aussi</h2> -</div> <ul> <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li> diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html index 1591d5c9fc..c3f6c7dc17 100644 --- a/files/fr/web/api/domtokenlist/item/index.html +++ b/files/fr/web/api/domtokenlist/item/index.html @@ -66,8 +66,4 @@ span.textContent = item;</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.item")}}</div> - -<div id="compat-desktop"> </div> - -<p> </p> +<div>{{Compat("api.DOMTokenList.item")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html index 85855c60c6..b707fae355 100644 --- a/files/fr/web/api/domtokenlist/keys/index.html +++ b/files/fr/web/api/domtokenlist/keys/index.html @@ -69,8 +69,4 @@ for(var value of iterator) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.keys")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.keys")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html index 020d7bd7f6..1e21b1727f 100644 --- a/files/fr/web/api/domtokenlist/length/index.html +++ b/files/fr/web/api/domtokenlist/length/index.html @@ -61,8 +61,4 @@ span.textContent = 'classList length = ' + length; <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.length")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.length")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html index b3721f931c..b68c42de55 100644 --- a/files/fr/web/api/domtokenlist/remove/index.html +++ b/files/fr/web/api/domtokenlist/remove/index.html @@ -48,7 +48,7 @@ span.textContent = classes; <p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p> -<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="https://developer.mozilla.org/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> +<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> <pre class="brush: js">let span = document.getElementsByTagName("span")[0], classes = span.classList; @@ -76,10 +76,4 @@ span.textContent = classes; <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.remove")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> - -<p> </p> +<div>{{Compat("api.DOMTokenList.remove")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html index 64de0066fd..e3c1d8d799 100644 --- a/files/fr/web/api/domtokenlist/replace/index.html +++ b/files/fr/web/api/domtokenlist/replace/index.html @@ -73,8 +73,4 @@ try { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.replace")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.replace")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html index b536c5f40c..b9fb5ea4cf 100644 --- a/files/fr/web/api/domtokenlist/supports/index.html +++ b/files/fr/web/api/domtokenlist/supports/index.html @@ -59,8 +59,4 @@ if (iframe.sandbox.supports('allow-scripts')) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.supports")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.supports")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html index 5dcf5826cf..ef036a01e7 100644 --- a/files/fr/web/api/domtokenlist/toggle/index.html +++ b/files/fr/web/api/domtokenlist/toggle/index.html @@ -75,8 +75,4 @@ span.onclick = function() { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.toggle")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.toggle")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html index 179b6dc852..da23f74aaf 100644 --- a/files/fr/web/api/domtokenlist/value/index.html +++ b/files/fr/web/api/domtokenlist/value/index.html @@ -58,8 +58,4 @@ span.textContent = classes.value; <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.value")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.value")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html index 2abea40a04..294f75dd1c 100644 --- a/files/fr/web/api/domtokenlist/values/index.html +++ b/files/fr/web/api/domtokenlist/values/index.html @@ -67,8 +67,4 @@ for(var value of iterator) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div>{{Compat("api.DOMTokenList.values")}}</div> - -<div id="compat-desktop"> </div> - -<div id="compat-mobile"> </div> +<div>{{Compat("api.DOMTokenList.values")}}</div>
\ No newline at end of file diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html index 52da07fd40..acdf64b4b6 100644 --- a/files/fr/web/api/element/animate/index.html +++ b/files/fr/web/api/element/animate/index.html @@ -10,32 +10,29 @@ translation_of: Web/API/Element/animate <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> <div class="note"> -<p>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> +<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> <h2 id="Syntaxe">Syntaxe</h2> -<div class="syntaxbox"> <pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre> -</div> <h3 id="Paramèters">Paramèters</h3> <dl> <dt><code>keyframes</code></dt> - <dd> - <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p> - </dd> + <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>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>: </dd> - <dd> + <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="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> qui permet de référencer l'animation.</dd> + <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> - {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd> + </dd> </dl> +<div>{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</div> + <h4 id="Options_à_venir">Options à venir</h4> <p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p> @@ -52,13 +49,11 @@ translation_of: Web/API/Element/animate <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>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>. + <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> - - <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p> </dd> </dl> diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html index 97ac7f7019..cde6764b54 100644 --- a/files/fr/web/api/element/attachshadow/index.html +++ b/files/fr/web/api/element/attachshadow/index.html @@ -5,11 +5,11 @@ 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="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>.</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" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); +<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>); </pre> <h3 id="Paramètres">Paramètres</h3> diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html index ad9ff22405..14c104bcfa 100644 --- a/files/fr/web/api/element/attributes/index.html +++ b/files/fr/web/api/element/attributes/index.html @@ -11,9 +11,9 @@ translation_of: Web/API/Element/attributes --- <p>{{ APIRef("DOM") }}</p> -<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. <span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> <pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes; </pre> @@ -29,50 +29,50 @@ var attr = para.attributes; <h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3> -<p><span id="result_box" lang="fr"><span>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.</span><br> - <span>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.</span></span></p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">>Exemple d'attributs</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">function</span> <span class="function token">listAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> paragraph <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"paragraph"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> result <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"result"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// D'abord, vérifier que le "paragraph" a quelques attributs </span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>paragraph<span class="punctuation token">.</span><span class="function token">hasAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> attrs <span class="operator token">=</span> paragraph<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span> - <span class="keyword token">var</span> output <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span> - <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> attrs<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> i <span class="operator token">>=</span> <span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">--</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - output <span class="operator token">+</span><span class="operator token">=</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">"->"</span> <span class="operator token">+</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - result<span class="punctuation token">.</span>value <span class="operator token">=</span> output<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - result<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">"No attributes to show"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>paragraph<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Sample Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show first attribute name and value<span class="punctuation token">"</span></span> - <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>listAttributes();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<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> + +<pre class="brush: html"><!DOCTYPE html> + +<html> + + <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 + 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; + } + 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" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -112,5 +112,5 @@ var attr = para.attributes; <ul> <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li> - <li><span id="result_box" lang="fr"><span>Considérations de compatibilité entre navigateurs : sur</span></span> <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</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> diff --git a/files/fr/web/api/element/childelementcount/index.html b/files/fr/web/api/element/childelementcount/index.html index 02b2f82a5b..a23de9fbaa 100644 --- a/files/fr/web/api/element/childelementcount/index.html +++ b/files/fr/web/api/element/childelementcount/index.html @@ -18,7 +18,7 @@ original_slug: Web/API/ParentNode/childElementCount <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> <div class="note"> -<p>Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br> +<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> @@ -36,30 +36,30 @@ original_slug: Web/API/ParentNode/childElementCount <h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">></span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// faire quelque chose</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: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> <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> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>constructor <span class="operator token">&&</span> - constructor<span class="punctuation token">.</span>prototype <span class="operator token">&&</span> - constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>childElementCount <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'childElementCount'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> node<span class="punctuation token">,</span> nodes <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>node <span class="operator token">=</span> nodes<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> count<span class="operator token">++</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">return</span> count<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.childElementCount == null) { + Object.defineProperty(constructor.prototype, 'childElementCount', { + get: function() { + var i = 0, count = 0, node, nodes = this.childNodes; + while (node = nodes[i++]) { + if (node.nodeType === 1) count++; + } + return count; + } + }); + } +})(window.Node || window.Element);</pre> <h2 id="Spécification">Spécification</h2> @@ -93,7 +93,5 @@ original_slug: Web/API/ParentNode/childElementCount <ul> <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div> - </li> + <li>Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</li> </ul> diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html index 569d6a92e7..62a8048b85 100644 --- a/files/fr/web/api/element/classlist/index.html +++ b/files/fr/web/api/element/classlist/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/Element/classList <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; </pre> -<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="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> +<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> <h2 id="Méthodes">Méthodes</h2> @@ -34,7 +34,7 @@ translation_of: Web/API/Element/classList <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 <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br> + <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> @@ -44,41 +44,41 @@ translation_of: Web/API/Element/classList <h2 id="Exemples">Exemples</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span> +<pre class="brush: js">const div = document.createElement('div'); +div.className = 'foo'; -<span class="comment token">// notre point de départ: <div class="foo"></div></span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> +// notre point de départ: <div class="foo"></div> +console.log(div.outerHTML); -<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +// utiliser l'API classList pour supprimer et ajouter des classes +div.classList.remove("foo"); +div.classList.add("anotherclass"); -<span class="comment token">// <div class="anotherclass"></div></span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> +// <div class="anotherclass"></div> +console.log(div.outerHTML); -<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +// si "visible" est défini, le supprimer, sinon, l'ajouter +div.classList.toggle("visible"); -<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token"><</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> +// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10 +div.classList.toggle("visible", i < 10 ); -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console.log(div.classList.contains("foo")); -<span class="comment token">// ajouter ou supprimer plusieurs classes</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +// ajouter ou supprimer plusieurs classes +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); -<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span> -<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span> +// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); -<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span> -div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +// remplacer la classe "foo" par la classe "bar" +div.classList.replace("foo", "bar");</pre> <div class="note"> -<p class="brush: js">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> +<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> <h2 id="Prothèse_démulation">Prothèse d'émulation</h2> diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html index 3796f5c7f0..125374a9db 100644 --- a/files/fr/web/api/element/classname/index.html +++ b/files/fr/web/api/element/classname/index.html @@ -11,9 +11,9 @@ translation_of: Web/API/Element/className --- <p>{{APIRef("DOM")}}</p> -<p><span class="seoSummary">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é</span></p> +<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> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> <pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className; <var>elementNodeReference</var>.className = <var>cName</var>;</pre> @@ -22,17 +22,17 @@ translation_of: Web/API/Element/className <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> elm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'item'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">let elm = document.getElementById('item'); -<span class="keyword token">if</span><span class="punctuation token">(</span>elm<span class="punctuation token">.</span>className <span class="operator token">===</span> <span class="string token">'active'</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'inactive'</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'active'</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +if(elm.className === 'active'){ + elm.className = 'inactive'; +} else { + elm.className = 'active'; +}</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<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> @@ -41,7 +41,7 @@ translation_of: Web/API/Element/className <pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code> </pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html index 69d42979d4..8e18c242d9 100644 --- a/files/fr/web/api/element/click_event/index.html +++ b/files/fr/web/api/element/click_event/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Element/click_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span></p> +<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> <table class="properties"> <tbody> diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html index 74de1b77da..72f3d71689 100644 --- a/files/fr/web/api/element/clientleft/index.html +++ b/files/fr/web/api/element/clientleft/index.html @@ -24,13 +24,44 @@ browser-compat: api.Element.clientLeft var left = element.clientLeft; </pre> -<h2 id="example">Exemple</h2> +<h2 id="exemple">Exemple</h2> -<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;"> <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> padding-top</p> - <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> - <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> - <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;"> padding-bottom</p> </div> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em> -</div> +<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> + +<h3>HTML</h3> + +<pre class="brush: 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> + +<h3>CSS</h3> + +<pre class="brush: css"> + +#container { + margin: 3rem; + background-color: rgb(255, 255, 204); + border: 4px dashed black; +} + +#contained { + margin: 1rem; + border-left: 24px black solid; + padding: 0px 28px; + overflow: auto; + background-color: white; +} +</pre> + +<h3>Résultat</h3> + +{{EmbedLiveSample("Exemple", 400, 350)}} <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html index 6510d9fab8..9a3bd1012c 100644 --- a/files/fr/web/api/element/clientwidth/index.html +++ b/files/fr/web/api/element/clientwidth/index.html @@ -20,13 +20,13 @@ translation_of: Web/API/Element/clientWidth <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> +<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre> <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> <h2 id="Exemple">Exemple</h2> -<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> +<p><img src="dimensions-client.png"></p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html index 6854567823..61a0e9f93f 100644 --- a/files/fr/web/api/element/closest/index.html +++ b/files/fr/web/api/element/closest/index.html @@ -66,7 +66,7 @@ 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> -<h2 id="Polyfill" name="Polyfill">Polyfill</h2> +<h2 id="Polyfill">Polyfill</h2> <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> @@ -133,10 +133,6 @@ if (!Element.prototype.closest) <ul> <li>L'interface {{domxref("Element")}}</li> - <li> - <div class="syntaxbox"><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></div> - </li> - <li> - <div class="syntaxbox">Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</div> - </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> diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html index 564090bd5b..546f6b3c5f 100644 --- a/files/fr/web/api/element/compositionend_event/index.html +++ b/files/fr/web/api/element/compositionend_event/index.html @@ -33,7 +33,7 @@ original_slug: Web/Events/compositionend <h3 id="Html">Html</h3> -<pre class="brush: html notranslate"><div class="control"> +<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> @@ -44,10 +44,7 @@ original_slug: Web/Events/compositionend <button class="clear-log">Effacer</button> </div></pre> -<div class="hidden"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -79,11 +76,10 @@ kbd { border: 1px solid black; } </pre> -</div> <h3 id="JS">JS</h3> -<pre class="brush: js notranslate">const inputElement = document.querySelector('input[type="text"]'); +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html index 4cb57ef36e..4de27018bc 100644 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ b/files/fr/web/api/element/compositionstart_event/index.html @@ -60,10 +60,7 @@ inputElement.addEventListener('compositionstart', (event) => { <button class="clear-log">Clear</button> </div></pre> -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -95,7 +92,6 @@ kbd { border: 1px solid black; } </pre> -</div> <h4 id="JS">JS</h4> diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html index 76096e954f..28b416e62e 100644 --- a/files/fr/web/api/element/contextmenu_event/index.html +++ b/files/fr/web/api/element/contextmenu_event/index.html @@ -12,7 +12,9 @@ translation_of: Web/API/Element/contextmenu_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span> 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> +<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> + +<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> <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> diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html index 6617dfc675..d4b370823a 100644 --- a/files/fr/web/api/element/copy_event/index.html +++ b/files/fr/web/api/element/copy_event/index.html @@ -9,23 +9,23 @@ original_slug: Web/Events/copy <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 class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</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("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 style="float: left; text-align: right; width: 120px;">Action par défaut</dt> - <dd style="margin: 0 0 0 120px;">Voir ce-dessous</dd> + <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> <p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p> -<pre class="javascript">document.addEventListener('copy', function(e){ +<pre class="brush: js">document.addEventListener('copy', function(e){ e.clipboardData.setData('text/plain', 'Hello, world!'); 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 diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html index 431a961e5f..9f82b49bd9 100644 --- a/files/fr/web/api/element/dblclick_event/index.html +++ b/files/fr/web/api/element/dblclick_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/dblclick_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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).</span></p> +<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> <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> diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html index 474f4839d3..8c17b86401 100644 --- a/files/fr/web/api/element/error_event/index.html +++ b/files/fr/web/api/element/error_event/index.html @@ -10,26 +10,23 @@ 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 <span id="result_box" lang="fr"><span>;</span> <span>les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</span></span></p> +<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 style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,<br> - {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> et<br> - sinon {{domxref("Event")}}.</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> - <dd style="margin: 0 0 0 120px;">Non</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> - <dd style="margin: 0 0 0 120px;"> </dd> + <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> @@ -45,28 +42,28 @@ original_slug: Web/Events/error <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html index 6310410cdd..4930d87a2e 100644 --- a/files/fr/web/api/element/focusin_event/index.html +++ b/files/fr/web/api/element/focusin_event/index.html @@ -4,13 +4,13 @@ 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="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p> +<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 class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd> + <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> diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html index 2d20d5050c..382060c404 100644 --- a/files/fr/web/api/element/focusout_event/index.html +++ b/files/fr/web/api/element/focusout_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/focusout <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> + <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> diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html index 5c50b4cd64..e0aa50f459 100644 --- a/files/fr/web/api/element/getattribute/index.html +++ b/files/fr/web/api/element/getattribute/index.html @@ -14,9 +14,9 @@ translation_of: Web/API/Element/getAttribute <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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval notranslate"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>) +<pre class="eval"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>) </pre> <p>où</p> @@ -26,7 +26,7 @@ translation_of: Web/API/Element/getAttribute <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <p>Soit l'HTML :</p> @@ -34,7 +34,7 @@ translation_of: Web/API/Element/getAttribute <p>Exemple de JavaScript :</p> -<pre class="eval notranslate">const div1 = document.getElementById("div1"); +<pre class="eval">const div1 = document.getElementById("div1"); //=> <div id="div1">Hi Champ!</div> const attributID = div1.getAttribute("id"); @@ -44,7 +44,7 @@ cont alignement = div1.getAttribute("align"); //=> null </pre> -<h2 id="Notes" name="Notes">Description</h2> +<h2 id="Notes">Description</h2> <h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3> @@ -58,14 +58,14 @@ cont alignement = div1.getAttribute("align"); <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> -<pre class="brush: js example-bad notranslate">let nonce = script.getAttribute("nonce"); +<pre class="brush: js example-bad">let nonce = script.getAttribute("nonce"); // renvoie une chaine vide</pre> <p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p> -<pre class="brush: js notranslate">let nonce = script.nonce;</pre> +<pre class="brush: js">let nonce = script.nonce;</pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -80,6 +80,6 @@ cont alignement = div1.getAttribute("align"); </tbody> </table> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Compatibilité des navigateurs</h2> +<h2 id="Sp.C3.A9cification">Compatibilité des navigateurs</h2> <div>{{Compat("api.Element.getAttribute")}}</div> diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html index 0fac66f4b1..d99f4465fe 100644 --- a/files/fr/web/api/element/getattributenames/index.html +++ b/files/fr/web/api/element/getattributenames/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/Element/getAttributeNames <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">// Itérer sur les attributs de l'élément for(let name of element.getAttributeNames()) @@ -32,7 +32,7 @@ for(let name of element.getAttributeNames()) <h2 id="Polyfill">Polyfill</h2> -<pre class="line-numbers language-html"><code class="language-html">if (Element.prototype.getAttributeNames == undefined) { +<pre class="brush: html">if (Element.prototype.getAttributeNames == undefined) { Element.prototype.getAttributeNames = function () { var attributes = this.attributes; var length = attributes.length; @@ -42,7 +42,7 @@ for(let name of element.getAttributeNames()) } return result; }; -}</code></pre> +}</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html index efe33f1fa1..3fd3fd508d 100644 --- a/files/fr/web/api/element/getattributenode/index.html +++ b/files/fr/web/api/element/getattributenode/index.html @@ -12,20 +12,20 @@ translation_of: Web/API/Element/getAttributeNode --- <p>{{ APIRef("DOM") }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var attrNode = element.getAttributeNode(attrName);</code></pre> +<pre class="brush: js">var attrNode = element.getAttributeNode(attrName);</pre> <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// html: <div id="top" /> var t = document.getElementById("top"); @@ -33,7 +33,7 @@ var idAttr = t.getAttributeNode("id"); alert(idAttr.value == "top") </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <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> @@ -43,11 +43,9 @@ alert(idAttr.value == "top") <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li> - <li><a class="external external-icon" 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> - -<div class="noinclude"> </div> + <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 diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html index f7d11eaaee..a9a9a56f60 100644 --- a/files/fr/web/api/element/getattributenodens/index.html +++ b/files/fr/web/api/element/getattributenodens/index.html @@ -5,16 +5,16 @@ translation_of: Web/API/Element/getAttributeNodeNS --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <dl> <dt><code>attributeNode</code></dt> @@ -25,20 +25,16 @@ translation_of: Web/API/Element/getAttributeNodeNS <dd>Une chaîne spécifiant le nom de l'attribut.</dd> </dl> -<p><span class="comment">== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</span></p> +<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> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <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> <p>{{ DOMAttributeMethods() }}</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li> -</ul> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/element.getAttributeNodeNS", "ja": "ja/DOM/element.getAttributeNodeNS", "pl": "pl/DOM/element.getAttributeNodeNS" } ) }}</p> + <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 diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html index 81eb8f8c79..6a5d33ddb7 100644 --- a/files/fr/web/api/element/getattributens/index.html +++ b/files/fr/web/api/element/getattributens/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getAttributeNS <dl> <dt><code>namespace </code></dt> - <dd><span id="result_box" lang="fr"><span>L'espace de noms dans lequel rechercher l'attribut spécifié.</span></span></dd> + <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> @@ -31,7 +31,7 @@ translation_of: Web/API/Element/getAttributeNS <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> <div class="note"> -<p>Note : <span id="result_box" lang="fr"><span>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.</span> <span>La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</span></span></p> +<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> <h2 id="Exemples">Exemples</h2> @@ -80,7 +80,7 @@ translation_of: Web/API/Element/getAttributeNS <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><span id="result_box" lang="fr"><span>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.</span> <span>Cependant, la plupart des navigateurs ont renvoyé null.</span> <span>À partir de DOM4, la spécification dit maintenant de retourner null.</span> <span>Cependant, certains navigateurs plus anciens renvoient une chaîne vide.</span> <span>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</span> <span>sur l'élément spécifié.</span></span></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> @@ -103,7 +103,7 @@ translation_of: Web/API/Element/getAttributeNS <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> <span class="short_text" id="result_box" lang="fr"><span>est levée si l'agent utilisateur ne supporte pas la fonctionnalité</span></span> <code>"XML"</code>. <span id="result_box" lang="fr"><span>Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</span></span></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> diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html index 7dd9a66904..7fef648005 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ b/files/fr/web/api/element/getboundingclientrect/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Element/getBoundingClientRect --- <div>{{APIRef("DOM")}}</div> -<p class="summary">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> +<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> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html index 634b46b5aa..8cbef3215e 100644 --- a/files/fr/web/api/element/getelementsbytagname/index.html +++ b/files/fr/web/api/element/getelementsbytagname/index.html @@ -11,13 +11,13 @@ translation_of: Web/API/Element/getElementsByTagName --- <p>{{APIRef("DOM")}}</p> -<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/tagName" title="fr/DOM/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> +<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> -<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code><span id="result_box" lang="fr"><span>place son argument en minuscule avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG "</span></span> camel-cased" <span lang="fr"><span> dans une sous-arborescence dans un document HTML.</span> <span>{{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span><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é.</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre> @@ -27,17 +27,17 @@ translation_of: Web/API/Element/getElementsByTagName <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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// vérifie l'alignement sur un nombre de cellules dans un tableau. </span> -<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"forecast-table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> cells <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> cells<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> status <span class="operator token">=</span> cells<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span> status <span class="operator token">==</span> <span class="string token">"open"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// saisit les données </span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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++) { + var status = cells[i].getAttribute("data-status"); + if ( status == "open" ) { + // saisit les données + } +}</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html index 51c55029de..3bb1bbba96 100644 --- a/files/fr/web/api/element/getelementsbytagnamens/index.html +++ b/files/fr/web/api/element/getelementsbytagnamens/index.html @@ -11,9 +11,9 @@ translation_of: Web/API/Element/getElementsByTagNameNS --- <p>{{APIRef("DOM")}}</p> -<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} <span id="result_box" lang="fr"><span>avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode</span></span> {{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> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre> @@ -21,7 +21,7 @@ translation_of: Web/API/Element/getElementsByTagNameNS <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><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>.</dd> + <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> @@ -30,11 +30,11 @@ translation_of: Web/API/Element/getElementsByTagNameNS <p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p> -<h2 id="Exemple" name="Exemple">Exemples</h2> +<h2 id="Exemple">Exemples</h2> <pre class="brush: 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("<span class="plain">http://www.w3.org/1999/xhtml</span>", "td"); +var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getAttribute("axis"); if (axis == "year") { diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html index 144fd3ec78..5c90c03771 100644 --- a/files/fr/web/api/element/hasattribute/index.html +++ b/files/fr/web/api/element/hasattribute/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/hasAttribute <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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>); </pre> @@ -25,27 +25,27 @@ translation_of: Web/API/Element/hasAttribute <dd>est une chaine de caractères représentant le nom de l'attribut.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasAttribute</span><span class="punctuation token">(</span><span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// faire quelque chose</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush:js">var foo = document.getElementById("foo"); +if (foo.hasAttribute("bar")) { + // faire quelque chose +}</pre> -<h2 id="Notes" name="Notes">Polyfill</h2> +<h2 id="Notes">Polyfill</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span> - prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span> <span class="operator token">&&</span> - <span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span><span class="punctuation token">.</span>specified<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">;(function(prototype) { + prototype.hasAttribute = prototype.hasAttribute || function(name) { + return !!(this.attributes[name] && + this.attributes[name].specified); + } +})(Element.prototype);</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{DOMAttributeMethods}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html index d927bbc3c3..d30aca00e1 100644 --- a/files/fr/web/api/element/hasattributens/index.html +++ b/files/fr/web/api/element/hasattributens/index.html @@ -11,16 +11,16 @@ translation_of: Web/API/Element/hasAttributeNS --- <p>{{ APIRef("DOM") }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">result = +<pre class="brush: js">result = element.hasAttributeNS( namespace, -localName)</code></pre> +localName)</pre> <dl> <dt><code>result</code></dt> @@ -31,24 +31,24 @@ localName)</code></pre> <dd>Le nom de l'attribut.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<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( - <span class="nowiki">"http://www.mozilla.org/ns/specialspace/"</span>, + "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setAttribute("align", "center"); } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li> + <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> diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html index beab7c88e1..29e4752a20 100644 --- a/files/fr/web/api/element/id/index.html +++ b/files/fr/web/api/element/id/index.html @@ -11,15 +11,15 @@ translation_of: Web/API/Element/id --- <p>{{ApiRef("DOM")}}</p> -<p>La propriété <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p> +<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> -<p><span id="result_box" lang="fr"><span>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}.</span> <span>Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/docs/Web/CSS">CSS</a>.</span></span></p> +<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> <div class="note"> -<p><strong><span lang="fr"><span>Note : </span></span></strong> <span id="result_box" lang="fr"><span>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="https://developer.mozilla.org/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</span></span></p> +<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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <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> @@ -64,5 +64,5 @@ translation_of: Web/API/Element/id <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li> + <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li> </ul> diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html index e18976658c..ac94a2ffc9 100644 --- a/files/fr/web/api/element/index.html +++ b/files/fr/web/api/element/index.html @@ -195,7 +195,7 @@ browser-compat: api.Element <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 (<a de>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> + <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> @@ -350,7 +350,7 @@ browser-compat: api.Element <dl> <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt> - <dd>Envoyé à un élément (<a de>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> + <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> @@ -358,11 +358,11 @@ browser-compat: api.Element <h3 id="keyboard_events">Évènements relatifs au clavier</h3> <dl> - <dt><code><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></code></dt> + <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><code><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></code></dt> + <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><code><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></code></dt> + <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> diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html index 5860811bfe..91ab29da37 100644 --- a/files/fr/web/api/element/innerhtml/index.html +++ b/files/fr/web/api/element/innerhtml/index.html @@ -14,13 +14,15 @@ original_slug: Web/API/Element/innertHTML <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> -<div class="note"><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.</div> +<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> <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> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <em>content</em> = <em>element</em>.innerHTML; +<pre class="syntaxbox">const <em>content</em> = <em>element</em>.innerHTML; <em>element</em>.innerHTML = <em>htmlString</em>; </pre> @@ -46,12 +48,12 @@ original_slug: Web/API/Element/innertHTML <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">let</span> contents <span class="operator token">=</span> myElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span></code></pre> +<pre class="brush: js">let contents = myElement.innerHTML;</pre> <p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p> <div class="note"> -<p><span id="result_box" lang="fr"><span><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.</span></span></p> +<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> <h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3> @@ -60,13 +62,13 @@ original_slug: Web/API/Element/innertHTML <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">document.body.innerHTML = "";</pre> <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"<pre>"</span> <span class="operator token">+</span> - document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/</g</span><span class="punctuation token">,</span><span class="string token">"&lt;"</span><span class="punctuation token">)</span> <span class="operator token">+</span> - <span class="string token">"</pre>"</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">document.documentElement.innerHTML = "<pre>" + + document.documentElement.innerHTML.replace(/</g,"&lt;") + + "</pre>";</pre> <h4 id="Détails_opérationnels">Détails opérationnels</h4> @@ -82,92 +84,92 @@ original_slug: Web/API/Element/innertHTML <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"John"</span><span class="punctuation token">;</span> -<span class="comment token">// en supposant que 'el' est un élément de document HTML</span> -el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span> +<pre class="brush: js">const name = "John"; +// en supposant que 'el' est un élément de document HTML +el.innerHTML = name; // inoffensif dans ce cas -<span class="comment token">// ...</span> +// ... -name <span class="operator token">=</span> <span class="string token">"<script>alert('I am John in an annoying alert!')</script>"</span><span class="punctuation token">;</span> -el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span></code></pre> +name = "<script>alert('I am John in an annoying alert!')</script>"; +el.innerHTML = name; // inoffensif dans ce cas</pre> <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> <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"<img src='x' onerror='alert(1)'>"</span><span class="punctuation token">;</span> -el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// affiche l'alerte</span></code></pre> +<pre class="brush: js">const name = "<img src='x' onerror='alert(1)'>"; +el.innerHTML = name; // affiche l'alerte</pre> <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> <div class="warning"> -<p><strong>Attention :</strong> <span id="result_box" lang="fr"><span>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.</span> <span>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.</span></span></p> +<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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <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> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> logElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".log"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">function log(msg) { + var logElem = document.querySelector(".log"); - <span class="keyword token">var</span> time <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> timeStr <span class="operator token">=</span> time<span class="punctuation token">.</span><span class="function token">toLocaleTimeString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - logElem<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> timeStr <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> + var time = new Date(); + var timeStr = time.toLocaleTimeString(); + logElem.innerHTML += timeStr + ": " + msg + "<br/>"; +} -<span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Logging mouse events inside this container..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +log("Logging mouse events inside this container...");</pre> <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> <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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logEvent</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> msg <span class="operator token">=</span> <span class="string token">"Event <strong>"</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>type <span class="operator token">+</span> <span class="string token">"</strong> at <em>"</span> <span class="operator token">+</span> - event<span class="punctuation token">.</span>clientX <span class="operator token">+</span> <span class="string token">", "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>clientY <span class="operator token">+</span> <span class="string token">"</em>"</span><span class="punctuation token">;</span> - <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: 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> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> boxElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".box"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var boxElem = document.querySelector(".box"); -boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> -boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> -boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> -boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseenter"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> -boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseleave"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +boxElem.addEventListener("mousedown", logEvent); +boxElem.addEventListener("mouseup", logEvent); +boxElem.addEventListener("click", logEvent); +boxElem.addEventListener("mouseenter", logEvent); +boxElem.addEventListener("mouseleave", logEvent);</pre> <h3 id="HTML">HTML</h3> <p>Le HTML est assez simple pour notre exemple.</p> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>strong</span><span class="punctuation token">></span></span>Log:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>strong</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="box"> + <div><strong>Log:</strong></div> + <div class="log"></div> +</div></pre> -<p><span id="result_box" lang="fr"><span>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.</span> <span>Le <code><div></code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</span></span></p> +<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> -<h3 id="Notes" name="Notes">CSS</h3> +<h3 id="Notes">CSS</h3> <p>Les styles CSS suivants pour notre exemple de contenu.</p> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">600</span>px<span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid black<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">4</span>px<span class="punctuation token">;</span> - <span class="property token">overflow-y</span><span class="punctuation token">:</span> scroll<span class="punctuation token">;</span> - <span class="property token">overflow-x</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span> -<span class="punctuation token">}</span> +<pre class="brush: css">.box { + width: 600px; + height: 300px; + border: 1px solid black; + padding: 2px 4px; + overflow-y: scroll; + overflow-x: auto; +} -<span class="selector token"><span class="class token">.log</span> </span><span class="punctuation token">{</span> - <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">8</span>px<span class="punctuation token">;</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> monospace<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +.log { + margin-top: 8px; + font-family: monospace; +}</pre> <h3 id="Résultat">Résultat</h3> @@ -175,11 +177,11 @@ boxElem<span class="punctuation token">.</span><span class="function token">addE <p>{{EmbedLiveSample("Exemple", 640, 350)}}</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> - <tr style="background-color: rgb(255, 204, 255);"> + <tr> <th scope="col">Spécification</th> <th scope="col">Statut</th> <th scope="col">Commentaire</th> @@ -194,7 +196,7 @@ boxElem<span class="punctuation token">.</span><span class="function token">addE </tbody> </table> -<h2 id="References" name="References">Voir aussi</h2> +<h2 id="References">Voir aussi</h2> <ul> <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li> diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html index 5a32d25f64..8587eb5de0 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.html +++ b/files/fr/web/api/element/insertadjacentelement/index.html @@ -11,9 +11,9 @@ 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<span id="result_box" lang="fr"><span> par rapport à l'élément sur lequel il est appelé.</span></span></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" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre> @@ -23,10 +23,10 @@ translation_of: Web/API/Element/insertAdjacentElement <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 style="color: red;">'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li> - <li><code style="color: green;">'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li> - <li><code style="color: blue;">'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li> - <li><code style="color: magenta;">'afterend'</code> : Après <code>targetElement</code> lui-même.</li> + <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> @@ -60,17 +60,19 @@ translation_of: Web/API/Element/insertAdjacentElement <h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> -<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +<pre><!-- beforebegin --> +<p> +<!-- afterbegin --> foo -<!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> +<!-- beforeend --> +</p> +<!-- afterend --></pre> -<div class="note"><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.</div> +<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" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">beforeBtn.addEventListener('click', function() { var tempDiv = document.createElement('div'); @@ -92,7 +94,7 @@ afterBtn.addEventListener('click', function() { <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" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html index b82e7dc4a5..e1f0ffa06a 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ b/files/fr/web/api/element/insertadjacenthtml/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/Element/insertAdjacentHTML --- <div>{{APIRef("DOM")}}</div> -<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><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p> +<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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="line-numbers language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre> +<pre class="brush: js">element.insertAdjacentHTML(position, text);</pre> <h3 id="Paramètres">Paramètres</h3> @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentHTML </dl> <ul> - <li><code style="color: red;">'beforebegin'</code> : Avant l'<code>element</code> lui-même.</li> - <li><code style="color: green;">'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li> - <li><code style="color: blue;">'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li> - <li><code style="color: magenta;">'afterend'</code> : Après <code>element</code> lui-même.</li> + <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> @@ -37,21 +37,20 @@ translation_of: Web/API/Element/insertAdjacentHTML <h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> -<div class="wp_syntax"> -<div class="code"> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> - <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + +<pre><!-- beforebegin --> +<p> + <!-- afterbegin --> foo - <!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> -</div> -</div> + <!-- beforeend --> +</p> +<!-- afterend --></pre> -<div class="note"><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.</div> +<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> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// <div id="one">one</div> var d1 = document.getElementById('one'); @@ -60,13 +59,13 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // Ici la nouvelle structure est : // <div id="one">one</div><div id="two">two</div></pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2> +<h2 id="Browser_Compatibility">Notes</h2> <h3 id="Considérations_de_sécurité">Considérations de sécurité</h3> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> -<p><span id="result_box" lang="fr"><span>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut;</span> <span>à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>.</span> <span>Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</span></span></p> +<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> <h2 id="Spécification">Spécification</h2> @@ -96,5 +95,5 @@ d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); <ul> <li>{{domxref("Element.insertAdjacentElement()")}}</li> <li>{{domxref("Element.insertAdjacentText()")}}</li> - <li><a class="external external-icon" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external external-icon"> par Henri Sivonen </span> <span id="result_box" lang="fr"><span>y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</span></span></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> diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html index 4a1b519fae..f0ab71ddad 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.html +++ b/files/fr/web/api/element/insertadjacenttext/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/insertAdjacentText <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" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre> @@ -24,10 +24,10 @@ translation_of: Web/API/Element/insertAdjacentText <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 style="color: red;">'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li> - <li><code style="color: green;">'afterbegin'</code><code style="color: green;"> </code>: à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li> - <li><code style="color: blue;">'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li> - <li><code style="color: magenta;">'afterend'</code> : après l'<code>element</code> lui-même.</li> + <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> @@ -57,17 +57,19 @@ translation_of: Web/API/Element/insertAdjacentText <h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3> -<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> -<code style="font-weight: bold;"><p></code> -<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +<pre><!-- beforebegin --> +<p> +<!-- afterbegin> --> machin -<!-- <strong><code style="color: blue;">beforeend</code></strong> --> -<code style="font-weight: bold;"></p></code> -<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> +<!-- beforeend --> +</p> +<!-- afterend --></pre> -<div class="note"><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.</div> +<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" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">beforeBtn.addEventListener('click', function() { para.insertAdjacentText('afterbegin',textInput.value); @@ -94,7 +96,7 @@ afterBtn.addEventListener('click', function() { } </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html index 8aea87173b..d64738b272 100644 --- a/files/fr/web/api/element/localname/index.html +++ b/files/fr/web/api/element/localname/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Element/localName <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> <div class="note"> -<p>Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html index 00ae129138..21e4a2ee68 100644 --- a/files/fr/web/api/element/matches/index.html +++ b/files/fr/web/api/element/matches/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/Element/matches <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> <div class="warning"> -<p>Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p> +<p><strong>Attention :</strong> Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString); </pre> @@ -25,23 +25,23 @@ translation_of: Web/API/Element/matches <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>birds<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>perroquet amazone<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>endangered<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>aigle des Philippines<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>pélican<span class="tag token"><span class="tag token"><span class="punctuation token"> blanc</</span>li</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<pre class="brush: html"><ul id="birds"> + <li>perroquet amazone</li> + <li class="endangered">aigle des Philippines</li> + <li>pélican blanc</li> +</ul> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> birds <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script type="text/javascript"> + var birds = document.getElementsByTagName('li'); - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> birds<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span><span class="string token">'.endangered'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Le - '</span> <span class="operator token">+</span> birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">+</span> <span class="string token">'- est en voie de disparition !'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> + 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> <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> @@ -73,9 +73,9 @@ translation_of: Web/API/Element/matches <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> -<pre class="line-numbers language-html"><code class="language-html">if (!Element.prototype.matches) { +<pre class="brush: html">if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype.msMatchesSelector; -}</code></pre> +}</pre> <h2 id="Spécification">Spécification</h2> @@ -103,6 +103,6 @@ translation_of: Web/API/Element/matches <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li> + <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> diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html index 8569c6878b..98ab94299d 100644 --- a/files/fr/web/api/element/mousedown_event/index.html +++ b/files/fr/web/api/element/mousedown_event/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/Element/mousedown_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span></p> +<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> -<div class="blockIndicator note"> +<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> @@ -43,7 +43,7 @@ translation_of: Web/API/Element/mousedown_event <p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p> -<h2 class="brush: css" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html index 02fcb024bd..ba2623f7c6 100644 --- a/files/fr/web/api/element/mouseenter_event/index.html +++ b/files/fr/web/api/element/mouseenter_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/mouseenter_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span></p> +<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> <table class="properties"> <tbody> @@ -39,12 +39,12 @@ translation_of: Web/API/Element/mouseenter_event <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> -<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> -<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> -<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. -<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> -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.</div> +<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> + +<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> diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html index 48425a84f8..2c9ee0d534 100644 --- a/files/fr/web/api/element/mouseleave_event/index.html +++ b/files/fr/web/api/element/mouseleave_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/mouseleave_event --- <p>{{APIRef}}</p> -<p><span class="seoSummary">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.</span></p> +<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> <table class="properties"> <tbody> @@ -37,12 +37,11 @@ translation_of: Web/API/Element/mouseleave_event <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> -<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> -<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div> -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. +<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> -<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div> -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.</div> +<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> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html index 3130ac80aa..d848446fb1 100644 --- a/files/fr/web/api/element/mousemove_event/index.html +++ b/files/fr/web/api/element/mousemove_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/mousemove_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span></p> +<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> <table class="properties"> <tbody> diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html index ee0921b941..0e44a3ae9f 100644 --- a/files/fr/web/api/element/mouseout_event/index.html +++ b/files/fr/web/api/element/mouseout_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/mouseout_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">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.</span> <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> +<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> <table class="properties"> <tbody> @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseout_event <h2 id="Exemples">Exemples</h2> -<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event" title="/en/Mozilla_event_reference/mouseleave"><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> +<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> <p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> est envoyé aux éléments individuels de la liste tandis que <code>mouseleave</code> est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.</p> diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html index 9cfdbc5ba0..368e39ddfe 100644 --- a/files/fr/web/api/element/mouseover_event/index.html +++ b/files/fr/web/api/element/mouseover_event/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/mouseover_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</span></p> +<p>L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</p> <table class="properties"> <tbody> @@ -37,7 +37,7 @@ translation_of: Web/API/Element/mouseover_event <h2 id="Exemples">Exemples</h2> -<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a>.</p> +<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter"><code>mouseenter</code></a>.</p> <h3 id="HTML">HTML</h3> diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html index 1faf2195d2..8dcab880a9 100644 --- a/files/fr/web/api/element/mouseup_event/index.html +++ b/files/fr/web/api/element/mouseup_event/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Element/mouseup_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</span> Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p> +<p>L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</p> + +<p>Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p> <table class="properties"> <tbody> diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html index 11d1c2a4a7..998f6a875e 100644 --- a/files/fr/web/api/element/namespaceuri/index.html +++ b/files/fr/web/api/element/namespaceuri/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/namespaceURI <p>La propriété en lecture seule <code><strong>Element.namespaceURI</strong></code> renvoie l'URI d'espace de noms de l'élément ou <code>null</code> si l'élément n'est pas dans un espace de nom.</p> <div class="note"> -<p>Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p> +<p><strong>Note :</strong> Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -31,13 +31,13 @@ translation_of: Web/API/Element/namespaceURI // c'est un navigateur XUL }</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Ce n'est pas une valeur calculée qui est 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 nœud est fixé au moment de la création du nœud.</p> -<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p> +<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p> -<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p> +<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="/fr/docs/Web/API/Document/createElementNS">document.createElementNS</a>.</p> <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 élément particulier, ne peut pas être modifié.</p> diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html index e9ed7dddf1..243fac13e5 100644 --- a/files/fr/web/api/element/outerhtml/index.html +++ b/files/fr/web/api/element/outerhtml/index.html @@ -14,17 +14,17 @@ translation_of: Web/API/Element/outerHTML <p>Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var content = element.outerHTML; +<pre class="brush: html">var content = element.outerHTML; -element.outerHTML = htmlString;</code></pre> +element.outerHTML = htmlString;</pre> -<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3> +<h3 class="highlight-spanned" id="Valeur">Valeur</h3> <p>La lecture de la valeur de <code>outerHTML</code> renvoie 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> -<h3 class="highlight-spanned" id="Exceptions"><span class="highlight-span">Exceptions</span></h3> +<h3 class="highlight-spanned" id="Exceptions">Exceptions</h3> <dl> <dt><code>SyntaxError</code></dt> @@ -33,7 +33,7 @@ element.outerHTML = htmlString;</code></pre> <dd>Une tentative a été faite de définir <code>outerHTML</code> sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd> </dl> -<h2 id="Examples" name="Examples">Exemples</h2> +<h2 id="Examples">Exemples</h2> <p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p> @@ -67,9 +67,9 @@ console.log(container.firstChild.nodeName); // affiche "P" <p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -div<span class="punctuation token">.</span>outerHTML <span class="operator token">=</span> <span class="string token">"<div class=\"test\">test</div>"</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// output: "<div></div>"</span></code></pre> +<pre class="brush: js">var div = document.createElement("div"); +div.outerHTML = "<div class=\"test\">test</div>"; +console.log(div.outerHTML); // output: "<div></div>"</pre> <p>Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété <code>outerHTML</code> a été modifiée contiendra toujours une référence à l'élément initial :</p> @@ -79,7 +79,7 @@ p.outerHTML = "<div>Ce div remplace un paragraph.</div>"; console.log(p.nodeName); // toujours "P"; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html index 814f2987ff..638e979793 100644 --- a/files/fr/web/api/element/prefix/index.html +++ b/files/fr/web/api/element/prefix/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/prefix <p>La propriété en lecture seule <code><strong>Element.prefix</strong></code> renvoie le préfixe d'espace de noms de l'élément spécifié ou <code>null</code> si aucun préfixe n'est précisé.</p> <div class="note"> -<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> +<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html index a82dccd008..cab55d02fe 100644 --- a/files/fr/web/api/element/queryselectorall/index.html +++ b/files/fr/web/api/element/queryselectorall/index.html @@ -26,53 +26,53 @@ translation_of: Web/API/Element/querySelectorAll <dl> <dt><code>selectors</code> </dt> - <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/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 l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd> + <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levé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 l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd> </dl> <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.</p> </div> -<h3 id="Example" name="Example">Valeur retournée</h3> +<h3 id="Example">Valeur retournée</h3> <p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p> <div class="note"> -<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p> +<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p> </div> -<h3 id="Example" name="Example">Exception</h3> +<h3 id="Example">Exception</h3> <dl> <dt><code>SyntaxError</code></dt> <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd> </dl> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3> <p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> <p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code> avec une classe "<code>note</code>" ou "<code>alert</code>" :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.note, div.alert"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");</pre> <p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}} qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted > p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> -<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</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")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> <p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active=1]");</pre> <h3 id="Accès_aux_correspondances">Accès aux correspondances</h3> @@ -80,13 +80,13 @@ translation_of: Web/API/Element/querySelectorAll <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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); -highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> -<h2 id="Notes" name="Notes">Notes d'utilisation</h2> +<h2 id="Notes">Notes d'utilisation</h2> <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> @@ -94,26 +94,26 @@ highlightedItems<span class="punctuation token">.</span><span class="function to <p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre> +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, pas 0!</pre> <p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <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 sur lequel la recherche est effectuée <code>(".select")</code>. 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> -<p><span lang="fr"><span>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 :</span></span></p> +<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> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre> +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0</pre> <h2 id="Spécifications">Spécifications</h2> @@ -155,12 +155,12 @@ inner<span class="punctuation token">.</span>length<span class="punctuation toke </div> <ul> - <li><a href="https://developer.mozilla.org/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><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li> + <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><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">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.querySelector()")}}</li> <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li> <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li> <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> + <li><a href="/fr/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li> </ul> diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html index 1a1d2fde8f..b27f3eb813 100644 --- a/files/fr/web/api/element/removeattribute/index.html +++ b/files/fr/web/api/element/removeattribute/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttribute <p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>); </pre> @@ -23,14 +23,14 @@ translation_of: Web/API/Element/removeAttribute <li><code>nomAttribut</code> est une chaîne de caractères représentant le nom de l'attribut à enlever de l'<em>element</em> .</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// avant : <div id="div1" align="left" width="200"> document.getElementById("div1").removeAttribute("align"); // maintenant : <div id="div1" width="200"> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Il vaut mieux utiliser <code>removeAttribute</code> plutôt que de définir la valeur de l'attribut à <code>null</code> avec <a href="fr/DOM/element.setAttribute">setAttribute</a>.</p> @@ -40,12 +40,8 @@ document.getElementById("div1").removeAttribute("align"); <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li> </ul> - -<p><span class="comment">Interwiki Language Links</span></p> - -<div class="noinclude"> </div> diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html index ebee4f2e03..4ecd896414 100644 --- a/files/fr/web/api/element/removeattributenode/index.html +++ b/files/fr/web/api/element/removeattributenode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/removeAttributeNode <p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>) </pre> @@ -22,15 +22,15 @@ translation_of: Web/API/Element/removeAttributeNode <li><code>removedAttr</code> est le nœud <code>Attr</code> qui vient d'être enlevé.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="line-numbers language-html"><code class="language-html">// <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> +<pre class="brush: html">// <div id="top" align="center" /> var d = document.getElementById("top"); var d_align = d.getAttributeNode("align"); d.removeAttributeNode(d_align); -// align est maintenant supprimé : <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span></code></pre> +// align est maintenant supprimé : <div id="top" /></pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.</p> @@ -38,8 +38,8 @@ d.removeAttributeNode(d_align); <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li> </ul> diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html index 301d873233..457c552bb9 100644 --- a/files/fr/web/api/element/removeattributens/index.html +++ b/files/fr/web/api/element/removeattributens/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Element/removeAttributeNS <p>Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>); </pre> @@ -33,12 +33,12 @@ d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); // l'élément est devenu : <div id="div1" width="200px" /> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li> </ul> diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html index fb27e1ab93..ad1dbf6456 100644 --- a/files/fr/web/api/element/requestfullscreen/index.html +++ b/files/fr/web/api/element/requestfullscreen/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Element/requestFullScreen <p>Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.</p> <div class="note"> -<p>Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p> +<p><strong>Note :</strong> Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html index 64aa93f7ae..80bddbcd99 100644 --- a/files/fr/web/api/element/scrollheight/index.html +++ b/files/fr/web/api/element/scrollheight/index.html @@ -8,35 +8,105 @@ translation_of: Web/API/Element/scrollHeight <p>L'attribut en lecture seule <strong><code>element.scrollHeight</code></strong> est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur <code>scrollHeight</code> est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.</p> <div class="note"> -<p>Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p> +<p><strong>Note :</strong> Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval">var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight; </pre> <p><code>intElemScrollHeight</code> est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. <code>scrollHeight</code> est une propriété en lecture seule.</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> + +<h2>Exemple</h2> + +<p>Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).</p> + +<p>La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form name="registration"> + <p> + <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. +Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus +neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at +velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus +ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. +Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, +mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta +at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent +dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas +luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem +sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue +turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. +Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in +ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse +platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat +consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et +a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam +pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum +ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit +interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer +laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, +nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. + </textarea> + </p> + <p> + <input type="checkbox" id="agree" name="accept" /> + <label for="agree">I agree</label> + <input type="submit" id="nextstep" value="Next" /> + </p> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#notice { + display: inline-block; + margin-bottom: 12px; + border-radius: 5px; + width: 600px; + padding: 5px; + border: 2px #7FDF55 solid; +} -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> +#rules { + width: 600px; + height: 130px; + padding: 5px; + border: #2A9F00 solid 2px; + border-radius: 5px; +}</pre> -<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> +<h3 id="JavaScript">JavaScript</h3> -<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> +<pre class="brush: js">function checkReading () { + if (checkReading.read) { + return; + } + checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text."; +} -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> +onload = function () { + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); +}</pre> -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="">Left</strong><strong style="">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<h3>Résultat</h3> -<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" src="/@api/deki/files/840/=ScrollHeight.png"></p> +<p>{{EmbedLiveSample('Exemple', '640', '400')}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Problèmes et solutions</h2> +<h2 id="Sp.C3.A9cification">Problèmes et solutions</h2> <h3 id="Déterminer_si_un_élément_a_complètement_été_défilé">Déterminer si un élément a complètement été défilé</h3> @@ -72,11 +142,11 @@ onload = function () { checkReading.call(oToBeRead); }</pre> -<p><a href="https://developer.mozilla.org/files/4589/readme-example.html">Voir l'exemple en action</a></p> +<p><a href="/files/4589/readme-example.html">Voir l'exemple en action</a></p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> -<p><code>scrollHeight</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p> +<p><code>scrollHeight</code> fait partie du modèle objet <abbr>DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> @@ -109,7 +179,7 @@ onload = function () { <p><strong>Dans les versions inférieures à Firefox 21 :</strong> quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété <code>scrollHeight</code> est égale à sa propriété <code>clientHeight</code>. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS<code> {{ cssxref("overflow") }}</code> de l'élément a pour valeur <code>visible</code>.</p> -<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li> diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html index c340c512d7..3dfbb5504a 100644 --- a/files/fr/web/api/element/scrollintoview/index.html +++ b/files/fr/web/api/element/scrollintoview/index.html @@ -12,21 +12,18 @@ translation_of: Web/API/Element/scrollIntoView <p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">element.scrollIntoView(); element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet </pre> +<h3 id="Paramètres">Paramètres</h3> + <dl> - <dt> - <h3 id="Paramètres">Paramètres</h3> - </dt> <dt><code>alignToTop</code> {{ optional_inline() }}</dt> - <dd> - <p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p> - + <dd><p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p> <ul> <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li> <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li> @@ -52,11 +49,11 @@ element.scrollIntoView({block: "end"}); element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html index f6f4236349..c03e499120 100644 --- a/files/fr/web/api/element/scrollintoviewifneeded/index.html +++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html @@ -43,5 +43,5 @@ translation_of: Web/API/Element/scrollIntoViewIfNeeded <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (<span class="short_text" id="result_box" lang="fr"><span>demande de fonctionnalité pour un équivalent standardisé à</span></span> <code>scrollIntoViewIfNeeded</code>)</li> + <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (demande de fonctionnalité pour un équivalent standardisé à <code>scrollIntoViewIfNeeded</code>)</li> </ul> diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html index da44c622ff..9d22971f19 100644 --- a/files/fr/web/api/element/scrollleft/index.html +++ b/files/fr/web/api/element/scrollleft/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/Element/scrollLeft --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">// Obtient le nombre de pixels défilés var <var>sLeft</var> = <var>element</var>.scrollLeft; @@ -32,7 +32,7 @@ var <var>sLeft</var> = <var>element</var>.scrollLeft; <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><script type="text/javascript"> @@ -58,14 +58,14 @@ for (var i=0; i<100; ++i){ > </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li> </ul> <p>{{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}</p> diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html index 8e5c9d4790..ba30e5fecb 100644 --- a/files/fr/web/api/element/scrollto/index.html +++ b/files/fr/web/api/element/scrollto/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Element/scrollTo <p>La méthode <code><strong>scrollTo()</strong></code><strong> </strong>de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>) element.scrollTo(<em>options</em>) </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>x-coord</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li> @@ -32,7 +32,7 @@ element.scrollTo(<em>options</em>) <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li> </ul> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <p>En utilisant des coordonnées :</p> @@ -47,7 +47,7 @@ element.scrollTo(<em>options</em>) behavior: 'smooth' });</pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html index 0053f0ab7b..4b3d0ef24b 100644 --- a/files/fr/web/api/element/scrolltop/index.html +++ b/files/fr/web/api/element/scrolltop/index.html @@ -10,14 +10,14 @@ translation_of: Web/API/Element/scrollTop --- <div>{{APIRef("DOM")}}</div> -<p class="summary"><span class="seoSummary">La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</span></p> +<p>La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</p> <p>La valeur <code>scrollTop</code> d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de <code>scrollTop</code> est <code>0</code>.</p> <p>Lorsque <code>scrollTop</code> est utilisé sur l'élément racine (c'est-à-dire l'élément <code><html></code>), c'est la valeur de <code>scrollY</code> pour la fenêtre qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">Il s'agit d'un cas aux limites pour <code>scrollTop</code></a>.</p> -<div class="notecard warning"> -<p>Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p> +<div class="warning"> +<p><strong>Attention :</strong> Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p> </div> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html index 92fbdc41e1..99dd56426d 100644 --- a/files/fr/web/api/element/scrollwidth/index.html +++ b/files/fr/web/api/element/scrollwidth/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/Element/scrollWidth --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p><b>scrollWidth</b> est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth; </pre> <p><var>xScrollWidth</var> est la largeur du contenu d'<var>element</var> en pixels.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><div id="aDiv" style="width: 100px; height: 200px; overflow: auto;" >-FooBar-FooBar-FooBar</div> @@ -20,12 +20,12 @@ translation_of: Web/API/Element/scrollWidth <input type="button" value="Show scrollWidth" onclick="alert(document.getElementById('aDiv').scrollWidth);"> </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>Il n'y a pas de spécification du W3C pour <b>scrollWidth</b>.</p> -<p>Un brouillon de l'éditeur existe cependant : <a class="external" href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p> -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> +<p>Un brouillon de l'éditeur existe cependant : <a href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp"> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp"> <i> scrollWidth</i> sur MSDN</a></li> diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html index b816f249bc..4f6d4d2259 100644 --- a/files/fr/web/api/element/select_event/index.html +++ b/files/fr/web/api/element/select_event/index.html @@ -3,23 +3,23 @@ title: select slug: Web/API/Element/select_event translation_of: Web/API/Element/select_event --- -<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [<cite><a class="informative" href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a></cite>], les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p> +<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en <a href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a>, les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p> <h2 id="Info_générale">Info générale</h2> <dl> - <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">UIEvent si généré depuis une interface utilisateur, Event sinon.</dd> - <dt style="float: left; text-align: right; width: 120px;">Remonte</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;">Élément</dd> - <dt style="float: left; text-align: right; width: 120px;">Action par Défault</dt> - <dd style="margin: 0 0 0 120px;">Aucune</dd> + <dt>Spécification</dt> + <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd> + <dt>Interface</dt> + <dd>UIEvent si généré depuis une interface utilisateur, Event sinon.</dd> + <dt>Remonte</dt> + <dd>Oui</dd> + <dt>Annulable</dt> + <dd>Non</dd> + <dt>Cible</dt> + <dd>Élément</dd> + <dt>Action par Défault</dt> + <dd>Aucune</dd> </dl> <h2 id="Propriétés">Propriétés</h2> @@ -35,28 +35,28 @@ translation_of: Web/API/Element/select_event <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></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" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></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 class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</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> @@ -66,7 +66,7 @@ translation_of: Web/API/Element/select_event </tbody> </table> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js"><input id="test" type="text" value="Sélectionnez-moi !" /> <script> diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html index 628010c9d7..2633e74e6b 100644 --- a/files/fr/web/api/element/setattribute/index.html +++ b/files/fr/web/api/element/setattribute/index.html @@ -62,7 +62,7 @@ b.setAttribute("disabled", "");</pre> <p>Ceci démontre 2 choses :</p> <ul> - <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li> + <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li> <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li> </ul> @@ -73,8 +73,8 @@ b.setAttribute("disabled", "");</pre> <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li> - <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li> </ul> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html index efee5a67fe..8f77b05d9a 100644 --- a/files/fr/web/api/element/setattributenode/index.html +++ b/files/fr/web/api/element/setattributenode/index.html @@ -13,16 +13,16 @@ translation_of: Web/API/Element/setAttributeNode <p><code>setAttributeNode</code><code>()</code> ajoute un nouveau nœud <code>Attr</code> à l'élément courant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">var replacedAttr = element.setAttributeNode(attribute);</code></pre> +<pre class="brush: js">var replacedAttr = element.setAttributeNode(attribute);</pre> <ul> <li><code>attribute</code> est le nœud <code>Attr</code> à définir sur l'élément.</li> <li><code>replacedAttr</code> est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// <div id="one" align="left">one</div> // <div id="two">two</div> @@ -34,7 +34,7 @@ alert(d2.attributes[1].value) // retourne: `left' </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.</p> @@ -42,8 +42,8 @@ alert(d2.attributes[1].value) <p>{{DOMAttributeMethods()}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li> </ul> diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html index 6e62b29873..b2abe3c907 100644 --- a/files/fr/web/api/element/setattributenodens/index.html +++ b/files/fr/web/api/element/setattributenodens/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Element/setAttributeNodeNS <p><code>setAttributeNodeNS</code> ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>) </pre> @@ -24,7 +24,7 @@ translation_of: Web/API/Element/setAttributeNodeNS <dd>Un nœud <code>Attr</code>.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>// <div id="one" special-align="utterleft">one</div> // <div id="two">two</div> @@ -38,16 +38,16 @@ d2.setAttributeNodeNS(a); alert(d2.attributes[1].value) // renvoie : "utterleft" </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.</p> -<p><span id="result_box" lang="fr"><span>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</span></span></p> +<p>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</p> <p>{{ DOMAttributeMethods() }}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li> </ul> diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html index d5b1699a1b..1274563722 100644 --- a/files/fr/web/api/element/setattributens/index.html +++ b/files/fr/web/api/element/setattributens/index.html @@ -12,34 +12,34 @@ translation_of: Web/API/Element/setAttributeNS <p><code>setAttributeNS</code> ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">element.setAttributeNS( +<pre class="brush: js">element.setAttributeNS( namespace, name, -value)</code></pre> +value)</pre> <ul> <li><code>namespace</code> est une chaîne spécifiant l'espace de noms de l'attribut.</li> - <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; <span id="result_box" lang="fr"><span>c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</span></span></li> + <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</li> <li><code>value</code> est la valeur chaîne désirée pour le nouvel attribut.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="eval">var d = document.getElementById("d1"); -d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center"); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>{{ DOMAttributeMethods() }}</p> -<p><code>setAttributeNS</code> <span id="result_box" lang="fr"><span>est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire</span></span> <code>"namespace:localname"</code>.</p> +<p><code>setAttributeNS</code> est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire <code>"namespace:localname"</code>.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li> <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname">DOM-Level-2-Core: glossary qualified name</a></li> </ul> diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html index 4a3ecaa500..fe8eb2deb9 100644 --- a/files/fr/web/api/element/setpointercapture/index.html +++ b/files/fr/web/api/element/setpointercapture/index.html @@ -16,12 +16,14 @@ translation_of: Web/API/Element/setPointerCapture <p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p> -<div class="note">Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</div> +<div class="note"> + <p><strong>Note :</strong> Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId); -</pre> +<pre class="syntaxbox">.<em>setPointerCapture</em>(pointerId); +</pre>targetElement <h3 id="Arguments">Arguments</h3> diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html index b0b3243fe0..53bee23738 100644 --- a/files/fr/web/api/element/tagname/index.html +++ b/files/fr/web/api/element/tagname/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Element/tagName <p>Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété <code>tagName</code> est <code>"IMG"</code> (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>elementName</em> = element.tagName; </pre> @@ -37,12 +37,12 @@ translation_of: Web/API/Element/tagName <h3 id="Contenu_JavaScript">Contenu JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"naissance"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>span<span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var span = document.getElementById("naissance"); +console.log(span.tagName);</pre> -<p>En XHTML (ou tout autre format XML), <span id="result_box" lang="fr"><span>la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules.</span> <span>En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</span></span></p> +<p>En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/encoding_api/index.html b/files/fr/web/api/encoding_api/index.html index 4870b3a93c..c6e927c6ad 100644 --- a/files/fr/web/api/encoding_api/index.html +++ b/files/fr/web/api/encoding_api/index.html @@ -16,20 +16,18 @@ translation_of: Web/API/Encoding_API <h2 id="Interfaces">Interfaces</h2> -<div class="index"> <ul> <li>{{DOMxRef("TextDecoder")}}</li> <li>{{DOMxRef("TextEncoder")}}</li> <li>{{DOMxRef("TextDecoderStream")}}</li> <li>{{DOMxRef("TextEncoderStream")}}</li> </ul> -</div> <h2 id="Tutoriels_Outils">Tutoriels & Outils</h2> <ul> <li>Un <a href="http://code.google.com/p/stringencoding/">shim</a> permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.</li> - <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – une représentation de type C des chaînes basée sur des tableaux typés.</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a> – une représentation de type C des chaînes basée sur des tableaux typés.</li> </ul> <h2 id="Caracteristiques">Caracteristiques</h2> diff --git a/files/fr/web/api/errorevent/index.html b/files/fr/web/api/errorevent/index.html index faa0d46a29..9d265d8ab4 100644 --- a/files/fr/web/api/errorevent/index.html +++ b/files/fr/web/api/errorevent/index.html @@ -72,5 +72,5 @@ translation_of: Web/API/ErrorEvent <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a>, notamment les objets susceptibles de déclencher un tel événement.</li> + <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des web workers</a>, notamment les objets susceptibles de déclencher un tel événement.</li> </ul> diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html index 0c59b8b0f6..6c9a6b68fc 100644 --- a/files/fr/web/api/event/bubbles/index.html +++ b/files/fr/web/api/event/bubbles/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/bubbles <p>Indique si l'événement donné se propage à travers le DOM ou non.</p> <div class="note"> -<p>Note : Voir <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p> +<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,23 +25,23 @@ translation_of: Web/API/Event/bubbles <p>Retourne un booléen dont la valeur est <code>true</code> (<em>vraie</em>) si l'événement se propage à travers le DOM.</p> -<h2 id="Syntax" name="Syntax">Exemple</h2> +<h2 id="Syntax">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">goInput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// vérifie la propagation et</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>bubbles<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// la lance si elle ne l'a pas été</span> - <span class="function token">passItOn</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="comment token">// déjà propagé</span> - <span class="function token">doOutput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function goInput(e) { + // vérifie la propagation et + if (!e.bubbles) { + // la lance si elle ne l'a pas été + passItOn(e); + } + // déjà propagé + doOutput(e) +}</pre> <div class="note"> -<p><strong>Note </strong>: Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p> +<p><strong>Note :</strong> Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p> </div> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -79,5 +79,5 @@ translation_of: Web/API/Event/bubbles <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li> + <li><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li> </ul> diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html index 0d17c1107e..3f3b86744b 100644 --- a/files/fr/web/api/event/cancelable/index.html +++ b/files/fr/web/api/event/cancelable/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/Event/cancelable --- <div>{{ ApiRef("DOM") }}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La propriété <dfn><code>cancelable</code></dfn> (<em>annulable</em>) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété <code>cancelable</code> est à <code>false</code> (<em>faux</em>) et l'écouteur d'événement ne peut pas l'arrêter.</p> <p>L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec <code>cancelable</code> avant d'appeler leurs méthodes <code>preventDefault()</code>.</p> -<p><span id="result_box" lang="fr"><span>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page.</span> <span>L'annulation des événements <a href="https://developer.mozilla.org/fr/docs/Web/Events/click">click</a>, <a href="https://developer.mozilla.org/fr/docs/Web/Events/scroll">scroll</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</span></span></p> +<p>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements <a href="/fr/docs/Web/Events/click">click</a>, <a href="/fr/docs/Web/Events/scroll">scroll</a> ou <a href="/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable </pre> @@ -28,33 +26,33 @@ translation_of: Web/API/Event/cancelable <li>Le résultat est un <code>booléen</code> qui est <code>true</code> (<em>vrai</em>) si l'événement peut être annulé.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="https://developer.mozilla.org/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement <a href="https://github.com/WICG/interventions/issues/33" rel="external">la première fois que l'écouteur est appelé</a> (en) ; les évènements <code>wheel</code> suivants ne peuvent être annulés.</p> +<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement <a href="https://github.com/WICG/interventions/issues/33">la première fois que l'écouteur est appelé</a> (en) ; les évènements <code>wheel</code> suivants ne peuvent être annulés.</p> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">preventScrollWheel</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> event<span class="punctuation token">.</span>cancelable <span class="operator token">!==</span> <span class="string token">'boolean'</span> <span class="operator token">||</span> event<span class="punctuation token">.</span>cancelable<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// L'événement peut être annulé, alors nous le faisons.</span> - event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="comment token">// L'évènement ne peut pas être annulé, il n'est donc pas sûr</span> - <span class="comment token">// d'appeler preventDefault() sur lui.</span> - console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`The following event couldn't be canceled:`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">dir</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> +<pre class="brush:js">function preventScrollWheel(event) { + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + // L'événement peut être annulé, alors nous le faisons. + event.preventDefault(); + } else { + // L'évènement ne peut pas être annulé, il n'est donc pas sûr + // d'appeler preventDefault() sur lui. + console.warn(`The following event couldn't be canceled:`); + console.dir(event); + } +} -document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'wheel'</span><span class="punctuation token">,</span> preventCancelableEvents<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +document.addEventListener('wheel', preventCancelableEvents);</pre> <p> </p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p> <p>Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html index fad1a2ca95..07d891daed 100644 --- a/files/fr/web/api/event/cancelbubble/index.html +++ b/files/fr/web/api/event/cancelbubble/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Event/cancelBubble <p>La propriété <code><strong>Event.cancelBubble</strong></code> est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à <code>true</code> (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (<em>faux</em>) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. </p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.cancelBubble = <em>bool;</em> <em>var bool</em> = event.cancelBubble; @@ -44,10 +44,6 @@ translation_of: Web/API/Event/cancelBubble </tbody> </table> -<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2> - - +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("api.Event.cancelBubble")}}</p> - -<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html index 5ffc759a23..1c4262776f 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.html +++ b/files/fr/web/api/event/comparison_of_event_targets/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements --- <p>{{ ApiRef() }}</p> -<h3 id="Event_targets" name="Event_targets">Cibles d'évènements</h3> +<h3 id="Event_targets">Cibles d'évènements</h3> <p>Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.</p> @@ -24,8 +24,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <th>Objectif</th> </tr> <tr> - <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td> - <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td><a href="/en/DOM/event.target">event.target</a></td> + <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> <td> <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p> @@ -35,34 +35,34 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements </td> </tr> <tr> - <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td> - <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> - <td>La <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td> + <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td> + <td><a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td> + <td>La <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td> </tr> <tr> - <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td> - <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> + <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td> + <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> <td>Identifie une cible secondaire pour l'évènement.</td> </tr> <tr> - <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> + <td><a href="/en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> <td>{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, <code>.target</code> affichera le parent <code>.explicitOriginalTarget</code> et le noeud de texte.<br> Contrairement à <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.</td> </tr> <tr> - <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td> + <td><a href="/en/DOM/event.originalTarget">event.originalTarget</a></td> <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> - <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td> + <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td> </tr> </tbody> </table> -<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3> +<h3 id="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3> <p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p> -<h3 id="Examples" name="Examples">Exemples</h3> +<h3 id="Examples">Exemples</h3> <pre><!DOCTYPE html> <html> @@ -130,7 +130,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements </body> </html></pre> -<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3> +<h3 id="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3> <p>La propriété <code>relatedTarget</code> (<em>cible associée</em>) pour l'évènement <code>mouseover</code> détient le noeud que la souris avait précédemment atteint. Pour l'évènement <code>mouseout</code>, il détient le noeud que la souris a déplacé à.</p> @@ -138,8 +138,8 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <tbody> <tr> <th>Type d'évènement</th> - <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th> - <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th> + <th><a href="/en/DOM/event.target">event.target</a></th> + <th><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></th> </tr> <tr> <td><code>mouseover</code></td> @@ -156,7 +156,7 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements <p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p> -<h4 id="Example" name="Example">Exemple</h4> +<h4 id="Example">Exemple</h4> <pre class="eval"><hbox id="outer"> <hbox id="inner" diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html index 996b6748fa..d70ad8d00f 100644 --- a/files/fr/web/api/event/currenttarget/index.html +++ b/files/fr/web/api/event/currenttarget/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Event/currentTarget <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> +<pre class="syntaxbox">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> <h3 id="Valeur">Valeur</h3> @@ -25,7 +25,7 @@ translation_of: Web/API/Event/currentTarget <p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p> -<pre class="brush: js notranslate">// Cette fonction masque la cible courante de l'évènement +<pre class="brush: js">// Cette fonction masque la cible courante de l'évènement // et l'affiche dans la console. function hide(e){ e.currentTarget.style.visibility = 'hidden'; @@ -46,7 +46,7 @@ document.body.addEventListener('click', hide, false); </pre> <div class="note"> -<p><strong>Note : </strong>La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p> +<p><strong>Note :</strong> La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html index 395c353226..f5b25e7c7d 100644 --- a/files/fr/web/api/event/defaultprevented/index.html +++ b/files/fr/web/api/event/defaultprevented/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/Event/defaultPrevented <p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p> -<div class="note"><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html index 464a126f19..8a6992dc29 100644 --- a/files/fr/web/api/event/event/index.html +++ b/files/fr/web/api/event/event/index.html @@ -21,16 +21,12 @@ translation_of: Web/API/Event/Event <dl> <dt><em>typeArg</em></dt> <dd>C'est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de l'évènement.</dd> - <dt><em>eventInit </em>{{optional_inline}}</dt> -</dl> - -<dl> - <dd>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants : - + <dt><em>eventInit</em>{{optional_inline}}</dt> + <dd><p>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :</p> <ul> <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li> <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li> - <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span class="hidden"> </span></li> + <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .</li> </ul> </dd> </dl> @@ -47,7 +43,7 @@ myDiv.dispatchEvent(evt); <h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="height: 49px; width: 1000px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html index 439f769f0a..290a0e6659 100644 --- a/files/fr/web/api/event/eventphase/index.html +++ b/files/fr/web/api/event/eventphase/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Event/eventPhase <h2 id="Constantes">Constantes</h2> -<h3 id="Constantes_de_phase_d'événement"><a id="Constantes de phase d'événement" name="Constantes de phase d'événement"></a>Constantes de phase d'événement</h3> +<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3> <p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p> @@ -63,9 +63,9 @@ translation_of: Web/API/Event/eventPhase </tbody> </table> -<p>Pour plus de détails, voir <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p> +<p>Pour plus de détails, voir <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <h3 id="HTML">HTML</h3> @@ -106,59 +106,59 @@ translation_of: Web/API/Event/eventPhase <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> divInfo <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> divs <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> useCapture <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - divInfo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"divInfo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - divs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - chCapture <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"chCapture"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - chCapture<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>chCapture<span class="punctuation token">.</span>checked<span class="punctuation token">)</span> - d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">else</span> - d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>onmousemove <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> clear <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">OnDivClick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>clear<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span><span class="punctuation token">)</span> - e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> level <span class="operator token">=</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="string token">"none"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="string token">"capturing"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span> <span class="operator token">?</span> <span class="string token">"target"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">3</span> <span class="operator token">?</span> <span class="string token">"bubbling"</span> <span class="punctuation token">:</span> <span class="string token">"error"</span><span class="punctuation token">;</span> - divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>id <span class="operator token">+</span> <span class="string token">"; eventPhase: "</span> <span class="operator token">+</span> level <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> - divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="punctuation token">(</span>i <span class="operator token">&</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">?</span> <span class="string token">"#f6eedb"</span> <span class="punctuation token">:</span> <span class="string token">"#cceeff"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false; +window.onload = function () { + divInfo = document.getElementById("divInfo"); + divs = document.getElementsByTagName('div'); + chCapture = document.getElementById("chCapture"); + chCapture.onclick = function () { + RemoveListeners(); + AddListeners(); + } + Clear(); + AddListeners(); +} + +function RemoveListeners() { + for (var i = 0; i < divs.length; i++) { + var d = divs[i]; + if (d.id != "divInfo") { + d.removeEventListener("click", OnDivClick, true); + d.removeEventListener("click", OnDivClick, false); + } + } +} + +function AddListeners() { + for (var i = 0; i < divs.length; i++) { + var d = divs[i]; + if (d.id != "divInfo") { + if (chCapture.checked) + d.addEventListener("click", OnDivClick, true); + else + d.addEventListener("click", OnDivClick, false); + d.onmousemove = function () { clear = true; }; + } + } +} + +function OnDivClick(e) { + if (clear) { + Clear(); clear = false; + } + if (e.eventPhase == 2) + e.currentTarget.style.backgroundColor = 'red'; + var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; + divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; +} + +function Clear() { + for (var i = 0; i < divs.length; i++) { + if (divs[i].id != "divInfo") + divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; + } + divInfo.innerHTML = ''; +}</pre> <p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p> diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html index b8c7a25d24..a85599f14b 100644 --- a/files/fr/web/api/event/index.html +++ b/files/fr/web/api/event/index.html @@ -26,7 +26,6 @@ translation_of: Web/API/Event <p>On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par <i>Event</i> (« évènement » en anglais).</p> -<div class="index"> <ul> <li><a href="/fr/docs/Web/API/AnimationEvent"><code>AnimationEvent</code></a></li> <li><a href="/fr/docs/Web/API/AudioProcessingEvent"><code>AudioProcessingEvent</code></a></li> @@ -79,12 +78,11 @@ translation_of: Web/API/Event <li><a href="/fr/docs/Web/API/WebGLContextEvent"><code>WebGLContextEvent</code></a></li> <li><a href="/fr/docs/Web/API/WheelEvent"><code>WheelEvent</code></a></li> </ul> -</div> <h2 id="constructor">Constructeur</h2> <dl> - <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></dt> + <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></a></dt> <dd>Crée un objet <code>Event</code> et le renvoie à l'appelant.</dd> </dl> diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html index 983a23e130..6f06e8b7f3 100644 --- a/files/fr/web/api/event/initevent/index.html +++ b/files/fr/web/api/event/initevent/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/Event/initEvent <p>La méthode <strong><code>Event.initEvent()</code></strong> est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.</p> -<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. <span class="short_text" id="result_box" lang="fr"><span>Une fois l'évènement transmis, la méthode ne fait plus rien.</span></span></p> +<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.</p> <div class="note"> -<p><strong><span class="short_text" lang="fr"><span>Note : Ne pas utiliser cette méthode qui est dépréciée</span></span></strong></p> +<p><strong>Note :</strong> Ne pas utiliser cette méthode qui est dépréciée.</p> -<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p> +<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>) </pre> @@ -35,7 +35,7 @@ translation_of: Web/API/Event/initEvent <dd>Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre><code>// Crée un évènement. var event = document.createEvent('Event'); @@ -64,7 +64,7 @@ elem.dispatchEvent(event);</code> <tr> <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td> <td>{{Spec2("DOM WHATWG")}}</td> - <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, <span class="short_text" id="result_box" lang="fr"><span>remplacée par les constructeurs d'événements.</span></span></td> + <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.</td> </tr> <tr> <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td> diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html index 65df2eb716..0267223d10 100644 --- a/files/fr/web/api/event/istrusted/index.html +++ b/files/fr/web/api/event/istrusted/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Event/isTrusted <p>La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var bool = event.isTrusted; </pre> diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html index ad65cdc914..810c8276a5 100644 --- a/files/fr/web/api/event/originaltarget/index.html +++ b/files/fr/web/api/event/originaltarget/index.html @@ -12,23 +12,19 @@ translation_of: Web/API/Event/originalTarget --- <div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div> -<div> </div> - -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p> -<p>En présence de contenu anonyme <a href="https://developer.mozilla.org/fr/docs/XBL" title="XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p> +<p>En présence de contenu anonyme <a href="/fr/docs/XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p> <p><strong>Note :</strong> <code>originalTarget</code> peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.</p> -<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements.</a></p> +<p>Voir aussi <a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements.</a></p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html index 98863439b0..97654470d7 100644 --- a/files/fr/web/api/event/returnvalue/index.html +++ b/files/fr/web/api/event/returnvalue/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/Event/returnValue <p>La propriété <code><strong>Event.returnValue</strong></code> indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à <code>true</code> (<em>vrai</em>) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à <code>false</code> (<em>faux</em>) empêche le déclenchement de l'action par défaut.</p> <div class="note"> -<p>Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p> +<p><strong>Note :</strong> Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.returnValue = <em>bool;</em> <em>var bool</em> = event.returnValue; @@ -27,10 +27,6 @@ translation_of: Web/API/Event/returnValue <p>Bien qu'elle ait été inclue <a href="https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue">dans l'ancien brouillon de travail de W3C DOM niveau 2</a><em>, cette propriété ne fait partie d'aucune spécification.</em></p> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> - - +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Event.returnValue")}}</p> - -<div id="compat-mobile"> </div> diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html index 94328eecf1..6b0ab681b4 100644 --- a/files/fr/web/api/event/srcelement/index.html +++ b/files/fr/web/api/event/srcelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Event/srcElement <p>{{ Non-standard_header() }}</p> -<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} <span id="result_box" lang="fr"><span>qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</span></span></p> +<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</p> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html index 5956fc1e5b..1f8dd6e09f 100644 --- a/files/fr/web/api/event/stoppropagation/index.html +++ b/files/fr/web/api/event/stoppropagation/index.html @@ -9,25 +9,25 @@ tags: - Reference translation_of: Web/API/Event/stopPropagation --- -<p id="Summary">{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}</div> <p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Voir la section Exemple 5 : <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples#Example_5.3A_Event_Propagation">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p> +<p>Voir la section Exemple 5 : <a href="/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Voir <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p> +<p>Voir <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p> -<p><a href="/fr/docs/Web/API/Event/preventDefault" title="DOM/event.preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p> +<p><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -56,10 +56,4 @@ translation_of: Web/API/Event/stopPropagation <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Event.stopPropagation")}}</p> - -<div id="compat-desktop"> -<div id="compat-mobile"> </div> -</div> +<p>{{Compat("api.Event.stopPropagation")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html index b624041ab6..2ab12c5de0 100644 --- a/files/fr/web/api/event/target/index.html +++ b/files/fr/web/api/event/target/index.html @@ -13,32 +13,32 @@ translation_of: Web/API/Event/target <p>C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.</p> -<h2 id="Example" name="Example">Syntaxe</h2> +<h2 id="Example">Syntaxe</h2> <pre><code><code>laCible = event.target</code></code></pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>La propriété <code>event.target</code> peut être utilisée pour implémenter la <strong>délégation d'événements</strong>.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Produit une liste</span> -<span class="keyword token">var</span> ul <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>ul<span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">// Produit une liste +var ul = document.createElement('ul'); +document.body.appendChild(ul); -<span class="keyword token">var</span> li1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> li2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li1<span class="punctuation token">)</span><span class="punctuation token">;</span> -ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li2<span class="punctuation token">)</span><span class="punctuation token">;</span> +var li1 = document.createElement('li'); +var li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); -<span class="keyword token">function</span> <span class="function token">hide</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// e.target se réfère à l'élément <li> cliqué</span> - <span class="comment token">// C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte</span> - e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>visibility <span class="operator token">=</span> <span class="string token">'hidden'</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function hide(e){ + // e.target se réfère à l'élément <li> cliqué + // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte + e.target.style.visibility = 'hidden'; +} -<span class="comment token">// Attache l'écouteur à la liste</span> -<span class="comment token">// Il se déclenche pour chaque <li> clické</span> -ul<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> hide<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +// Attache l'écouteur à la liste +// Il se déclenche pour chaque <li> clické +ul.addEventListener('click', hide, false);</pre> <h2 id="Spécifications">Spécifications</h2> @@ -75,9 +75,9 @@ ul<span class="punctuation token">.</span><span class="function token">addEventL <h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2> -<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">event.target</code><span style="line-height: 1.5;">.</span></p> +<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que <code>event.target</code>.</p> -<pre class="brush: js" style="font-size: 14px;">function hide(e) { +<pre class="brush: js">function hide(e) { // Support IE6-8 var target = e.target || e.srcElement; target.style.visibility = 'hidden'; @@ -86,4 +86,4 @@ ul<span class="punctuation token">.</span><span class="function token">addEventL <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="en/DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a></p> +<p><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements</a></p> diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html index b3e2333120..c4bc3ffe6a 100644 --- a/files/fr/web/api/event/timestamp/index.html +++ b/files/fr/web/api/event/timestamp/index.html @@ -14,65 +14,65 @@ translation_of: Web/API/Event/timeStamp <p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p> <div class="note"> -<p>Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p> +<p><strong>Note :</strong> Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.timeStamp </pre> -<h3 id="Examples" name="Examples">Valeur</h3> +<h3 id="Examples">Valeur</h3> <p>Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.</p> <p>Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.</p> -<h2 id="Examples" name="Examples">Exemple</h2> +<h2 id="Examples">Exemple</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html"><p> Focus this iframe and press any key to get the current timestamp for the keypress event. -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>timeStamp: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> +</p> +<p>timeStamp: <span id="time">-</span></p></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getTime</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> time <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"time"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - time<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>nodeValue <span class="operator token">=</span> event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getTime<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">function getTime(event) { + var time = document.getElementById("time"); + time.firstChild.nodeValue = event.timeStamp; +} +document.body.addEventListener("keypress", getTime);</pre> <h3 id="Résultat">Résultat</h3> <p>{{EmbedLiveSample("Example", "100%", 100)}}</p> -<h2 id="Notes" name="Notes">Précision du temps réduite</h2> +<h2 id="Notes">Précision du temps réduite</h2> <p>Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de <code>event.timeStamp</code> peut être arrondie en fonction des paramètres du navigateur.<br> Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Précision du temps réduite (2ms) dans Firefox 60</span> -event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="comment token">// 1519211809934</span> -<span class="comment token">// 1519211810362</span> -<span class="comment token">// 1519211811670</span> -<span class="comment token">// ...</span> +<pre class="brush: js">// Précision du temps réduite (2ms) dans Firefox 60 +event.timeStamp; +// 1519211809934 +// 1519211810362 +// 1519211811670 +// ... -<span class="comment token">// Précision du temps réduite avec `privacy.resistFingerprinting` activé</span> -event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span> -<span class="comment token">// 1519129853500</span> -<span class="comment token">// 1519129858900</span> -<span class="comment token">// 1519129864400</span> -<span class="comment token">// ...</span></code></pre> +// Précision du temps réduite avec `privacy.resistFingerprinting` activé +event.timeStamp; +// 1519129853500 +// 1519129858900 +// 1519129864400 +// ...</pre> <p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html index c50dcb0fea..7931a24a5a 100644 --- a/files/fr/web/api/event/type/index.html +++ b/files/fr/web/api/event/type/index.html @@ -15,63 +15,63 @@ translation_of: Web/API/Event/type <p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p> -<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des évènements</a>.</p> +<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="/fr/docs/Web/Events">Référence des évènements</a>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">event.type </pre> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token"><!DOCTYPE html></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Event.type Example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <title>Event.type Example</title> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> currEvent<span class="punctuation token">;</span> - <span class="keyword token">function</span> <span class="function token">getEvtType</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <script> + var currEvent; + function getEvtType(evt) { + console.group(); - currEvent <span class="operator token">=</span> evt<span class="punctuation token">.</span>type<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>currEvent<span class="punctuation token">)</span><span class="punctuation token">;</span> + currEvent = evt.type; + console.log(currEvent); - document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"Etype"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> currEvent<span class="punctuation token">;</span> + document.getElementById("Etype").innerHTML = currEvent; - console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + console.groupEnd(); + } - <span class="comment token">//Évènements du clavier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//[second] </span> + //Évènements du clavier + document.addEventListener("keypress", getEvtType, false); //[second] - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keydown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keyup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//troisième</span> + document.addEventListener("keydown", getEvtType, false); //premier + document.addEventListener("keyup", getEvtType, false); //troisième - <span class="comment token">//Évènements de la souris</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// troisième</span> + //Évènements de la souris + document.addEventListener("click", getEvtType, false); // troisième - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span> - document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//second</span> + document.addEventListener("mousedown", getEvtType, false); //premier + document.addEventListener("mouseup", getEvtType, false); //second - </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + </script> +</head> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<body> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Press any key or click the mouse to get the event type.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Event type: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Etype<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span>red</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<p>Press any key or click the mouse to get the event type.</p> +<p>Event type: <span id="Etype" style="color:red">-</span></p> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +</body> +</html></pre> -<h3 id="Specifications" name="Specifications">Résultat</h3> +<h3 id="Specifications">Résultat</h3> <p>{{EmbedLiveSample('Example')}}</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/eventlistener/index.html b/files/fr/web/api/eventlistener/index.html index ed7d3a3dd6..8ae1a28d34 100644 --- a/files/fr/web/api/eventlistener/index.html +++ b/files/fr/web/api/eventlistener/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/EventListener <p><strong>Note :</strong> En raison du besoin de compatibilité avec le contenu existant, <code>EventListener</code> accepte à la fois une fonction et un objet avec une fonction de propriété <code>handleEvent</code>. Ceci est illustré dans l'exemple ci-dessous.</p> </div> -<h2 id="Method_overview" name="Method_overview">Propriétés</h2> +<h2 id="Method_overview">Propriétés</h2> <p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <p><em>Cette interface n'hérite d'aucune méthode.</em></p> @@ -34,28 +34,28 @@ translation_of: Web/API/EventListener <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Click here!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><button id="btn">Click here!</button></pre> <h3 id="JavaScript">JavaScript</h3> <p> </p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> buttonElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.</span> -<span class="comment token">// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"</span> -<span class="comment token">// apparaîtra.</span> -buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through function!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (<em>gestion d'évènement</em>)</span> -<span class="comment token">// sera traitée exactement comme la fonction elle-même.</span> -buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - handleEvent<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through handleEvent property!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">const buttonElement = document.getElementById('btn'); + +// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel. +// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!" +// apparaîtra. +buttonElement.addEventListener('click', function (event) { + alert('Element clicked through function!'); +}); + +// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (<em>gestion d'évènement</em>) +// sera traitée exactement comme la fonction elle-même. +buttonElement.addEventListener('click', { + handleEvent: function (event) { + alert('Element clicked through handleEvent property!'); + } +});</pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/api/eventsource/close/index.html b/files/fr/web/api/eventsource/close/index.html index 062ed16f58..d7289f87ef 100644 --- a/files/fr/web/api/eventsource/close/index.html +++ b/files/fr/web/api/eventsource/close/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/EventSource/close <p>La fonction <code><strong>close()</strong></code> de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur <code>2</code> (closed).</p> <div class="note"> -<p><strong>Note</strong>: Si la connexion est déjà fermé, la fonction n'agit pas.</p> +<p><strong>Note :</strong> Si la connexion est déjà fermé, la fonction n'agit pas.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -44,7 +44,7 @@ bouton.onclick = function() { </pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Demo simple de SSE utilisant PHP.</a></p> +<p><strong>Note :</strong> Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Demo simple de SSE utilisant PHP.</a></p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/eventsource/index.html b/files/fr/web/api/eventsource/index.html index ad8e2ef524..3ad72e5065 100644 --- a/files/fr/web/api/eventsource/index.html +++ b/files/fr/web/api/eventsource/index.html @@ -53,7 +53,7 @@ translation_of: Web/API/EventSource <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">var evtSource = new EventSource('sse.php'); +<pre class="brush: js">var evtSource = new EventSource('sse.php'); var eventList = document.querySelector('ul'); evtSource.onmessage = function(e) { @@ -91,5 +91,5 @@ evtSource.onmessage = function(e) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Utiliser les évènements générés par le serveur</a></li> + <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events">Utiliser les évènements générés par le serveur</a></li> </ul> diff --git a/files/fr/web/api/eventsource/onopen/index.html b/files/fr/web/api/eventsource/onopen/index.html index 2db0dff38c..64b0d58fb9 100644 --- a/files/fr/web/api/eventsource/onopen/index.html +++ b/files/fr/web/api/eventsource/onopen/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/EventSource/onopen };</pre> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +<p><strong>Note :</strong> Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -44,9 +44,6 @@ translation_of: Web/API/EventSource/onopen </tbody> </table> -<ul> -</ul> - <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("api.EventSource.onopen")}}</p> diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html index c8e6650d62..8165dcccdf 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.html +++ b/files/fr/web/api/eventtarget/addeventlistener/index.html @@ -30,7 +30,9 @@ translation_of: Web/API/EventTarget/addEventListener --- <p>{{APIRef("DOM Events")}}</p> -<p><span class="seoSummary">La méthode <code><strong>addEventListener()</strong></code> de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.</span> Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).</p> +<p>>La méthode <code><strong>addEventListener()</strong></code> de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.</p> + +<p>Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).</p> <p><code>addEventListener()</code> agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.</p> @@ -268,7 +270,7 @@ el.addEventListener("click", () => { <a class="inner1" href="https://www.mozilla.org" target="_blank"> intérieur1, passive & preventDefault (ce qui n'est pas autorisé) </a> - <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> + <a class="inner2" href="/" target="_blank"> intérieur2, none-passive & preventDefault (nouvelle page non ouverte) </a> </div> @@ -744,7 +746,7 @@ if (el.addEventListener) { <h3 id="Older_way_to_register_event_listeners">Ancienne manière d'enregistrer les écouteurs d'évènements</h3> -<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p> +<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p> <pre class="brush: js"> // Passage d'une référence à une fonction diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.html b/files/fr/web/api/eventtarget/dispatchevent/index.html index 10389d111d..ff64998f51 100644 --- a/files/fr/web/api/eventtarget/dispatchevent/index.html +++ b/files/fr/web/api/eventtarget/dispatchevent/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/EventTarget/dispatchEvent <p>Envoie un {{domxref("Event")}} (<em>évènement</em>) à la {{domxref("EventTarget")}} (<em>cible</em>) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (<em>écouteurs</em>) dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec <code>dispatchEvent()</code>.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>) </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>event</code> est un objet {{domxref("Event")}} à envoyer.</li> @@ -33,17 +33,17 @@ translation_of: Web/API/EventTarget/dispatchEvent <p>La méthode <code>dispatchEvent</code> lance une exception <code>UNSPECIFIED_EVENT_TYPE_ERR</code> si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est <code>null</code> ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements">boucle des événements</a>, <code>dispatchEvent</code> appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à <code>dispatchEvent</code>.</p> +<p>Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la <a href="/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements">boucle des événements</a>, <code>dispatchEvent</code> appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à <code>dispatchEvent</code>.</p> -<p>Comme montré dans l'exemple qui précède, <code>dispatchEvent</code> est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Event">constructeur d'évènements</a>.</p> +<p>Comme montré dans l'exemple qui précède, <code>dispatchEvent</code> est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le <a href="/fr/docs/Web/API/Event/Event">constructeur d'évènements</a>.</p> -<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="DOM/event">Objet Event référence</a>.</p> +<p>Voir aussi <a href="/fr/docs/Web/API/Event">Objet Event référence</a>.</p> <h2 id="Exemple">Exemple</h2> -<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a>.</p> +<p>Voir <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a>.</p> <h2 id="Spécification">Spécification</h2> @@ -64,7 +64,7 @@ translation_of: Web/API/EventTarget/dispatchEvent </tbody> </table> -<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Compatibilité des navigateurs</h2> +<h2 id="Voir_.C3.A9galement">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/eventtarget/eventtarget/index.html b/files/fr/web/api/eventtarget/eventtarget/index.html index 522466de4b..419fd32ffe 100644 --- a/files/fr/web/api/eventtarget/eventtarget/index.html +++ b/files/fr/web/api/eventtarget/eventtarget/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/EventTarget/EventTarget <h2 id="Exemples">Exemples</h2> -<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget { +<pre class="brush: js">class MyEventTarget extends EventTarget { constructor(mySecret) { super(); this._secret = mySecret; diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html index 99ea213416..b58f686516 100644 --- a/files/fr/web/api/eventtarget/index.html +++ b/files/fr/web/api/eventtarget/index.html @@ -12,9 +12,9 @@ tags: browser-compat: api.EventTarget translation_of: Web/API/EventTarget --- -<nav>{{ApiRef("DOM Events")}}</nav> +<div>{{ApiRef("DOM Events")}}</div> -<p><span class="seoSummary"><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</span></p> +<p><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</p> <p>{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.</p> @@ -55,7 +55,7 @@ translation_of: Web/API/EventTarget <h3 id="Implémentation_simple_dEventTarget">Implémentation simple d'EventTarget</h3> -<pre class="brush: js notranslate">const EventTarget = function () { +<pre class="brush: js">const EventTarget = function () { this.listeners = {} } diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.html b/files/fr/web/api/eventtarget/removeeventlistener/index.html index 322b0772a1..bef6e42e79 100644 --- a/files/fr/web/api/eventtarget/removeeventlistener/index.html +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.html @@ -74,12 +74,12 @@ element.removeEventListener("mousedown", handleMouseDown, true);</pre> <p>Maintenant, regardez chacun de ces appels successifs à <code>removeEventListener()</code>. N'importe lequel d'entre eux dans lequel <code>capture</code> ou <code>useCapture</code> est <code>true</code> (<em>vrai</em>) échoue ; tous les autres réussissent. Seul le paramètre de <code>capture</code> est important pour <code>removeEventListener()</code>.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Réussit +<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Réussit element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Réussit element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Échoue element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Réussit element.removeEventListener("mousedown", handleMouseDown, false); // Réussit -element.removeEventListener("mousedown", handleMouseDown, true); // Échoue</code> +element.removeEventListener("mousedown", handleMouseDown, true); // Échoue </pre> <p>Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à <code>addEventListener()</code> lors de l'appel de <code>removeEventListener()</code>.</p> diff --git a/files/fr/web/api/extendableevent/extendableevent/index.html b/files/fr/web/api/extendableevent/extendableevent/index.html index 45b418ff09..52786b501f 100644 --- a/files/fr/web/api/extendableevent/extendableevent/index.html +++ b/files/fr/web/api/extendableevent/extendableevent/index.html @@ -51,9 +51,9 @@ translation_of: Web/API/ExtendableEvent/ExtendableEvent <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les ServiceWorker sont-ils prêts?</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des 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/">Les ServiceWorker sont-ils prêts?</a></li> <li>{{jsxref("Promise")}}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li> + <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li> </ul> diff --git a/files/fr/web/api/extendableevent/index.html b/files/fr/web/api/extendableevent/index.html index efae671fa9..2d5ffe78b5 100644 --- a/files/fr/web/api/extendableevent/index.html +++ b/files/fr/web/api/extendableevent/index.html @@ -21,7 +21,7 @@ browser-compat: api.ExtendableEvent <p>Si <a href="/fr/docs/Web/API/ExtendableEvent/waitUntil"><code>waitUntil()</code></a> est appelé en dehors du gestionnaire <code>ExtendableEvent</code>, le navigateur doit lever une exception <code>InvalidStateError</code> ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises">promesses à vie étendue</a>.</p> <div class="note"> -<p><strong>Note</strong>: Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1180274">le bug 1180274</a>).</p> +<p><strong>Note :</strong> Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1180274">le bug 1180274</a>).</p> </div> <p>Cette interface hérite de l'interface <a href="/fr/docs/Web/API/Event"><code>Event</code></a>.</p> @@ -29,7 +29,7 @@ browser-compat: api.ExtendableEvent <p>{{InheritanceDiagram(700, 60, 20)}}</p> <div class="note"> -<p><strong>Note</strong>: Cette interface est disponible seulement quand la portée globale est <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>ServiceWorkerGlobalScope</code></a>. Elle n'est pas disponible quand c'est un objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a> ou un autre type de worker.</p> +<p><strong>Note :</strong> Cette interface est disponible seulement quand la portée globale est <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>ServiceWorkerGlobalScope</code></a>. Elle n'est pas disponible quand c'est un objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a> ou un autre type de worker.</p> </div> <h2 id="constructor">Constructeur</h2> @@ -85,7 +85,9 @@ self.addEventListener('install', function(event) { ); });</pre> -<div class="note"><strong>Important</strong> : Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="https://www.chromium.org">www.chromium.org</a> ne prend pas en charge le CORS.</div> +<div class="warning"> + <p><strong>Attention :</strong> Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="https://www.chromium.org">www.chromium.org</a> ne prend pas en charge le CORS.</p> +</div> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html index d7adcfc13a..a9d04efa8a 100644 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html @@ -68,8 +68,8 @@ var myEME = new ExtendableMessageEvent('message', init);</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les Services Workers sont-ils prêts ?</a></li> + <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/">Les Services Workers sont-ils prêts ?</a></li> <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> </ul> diff --git a/files/fr/web/api/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/index.html index 1d93681f25..adad758848 100644 --- a/files/fr/web/api/extendablemessageevent/index.html +++ b/files/fr/web/api/extendablemessageevent/index.html @@ -92,8 +92,8 @@ self.onmessage = function(e) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les serviceWorker sont-ils prêts?</a></li> + <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/">Les serviceWorker sont-ils prêts?</a></li> <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Cannal de Messagerie</a></li> </ul> diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.html b/files/fr/web/api/extendablemessageevent/lasteventid/index.html index b424f11cde..997f1a7bf4 100644 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.html +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/lastEventId --- <p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> -<p>La propriété en lecture seule <strong><code>lastEventID</code></strong> de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans <a href="https://developer.mozilla.org/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events">les évenements envoyés par lle serveur</a>, le dernier ID de l'évenement source.</p> +<p>La propriété en lecture seule <strong><code>lastEventID</code></strong> de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans <a href="/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events">les évenements envoyés par lle serveur</a>, le dernier ID de l'évenement source.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -69,8 +69,8 @@ self.onmessage = function(e) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li> <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> </ul> diff --git a/files/fr/web/api/extendablemessageevent/origin/index.html b/files/fr/web/api/extendablemessageevent/origin/index.html index 22ea1988ee..1d800b866f 100644 --- a/files/fr/web/api/extendablemessageevent/origin/index.html +++ b/files/fr/web/api/extendablemessageevent/origin/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin --- <p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> -<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>origin</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message.</p> +<p>La propriété en lecture seule <strong>origin</strong> de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin <h2 id="Exemples">Exemples</h2> -<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p> +<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le <a href="/fr/docs/Web/API/PushMessageData"><code>PushMessageData</code></a> au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p> <pre class="brush: js">var port; @@ -69,12 +69,8 @@ self.onmessage = function(e) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers" style="font-size: 14px; font-weight: normal; line-height: 1.5;">Utilisation des Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test" style="line-height: 1.5;">Exemple simple des service workers</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li> <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> -</ul> - -<article id="wikiArticle"> </article> - -<p> </p> + <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/extendablemessageevent/ports/index.html b/files/fr/web/api/extendablemessageevent/ports/index.html index 92f9e1d3d0..e758af8154 100644 --- a/files/fr/web/api/extendablemessageevent/ports/index.html +++ b/files/fr/web/api/extendablemessageevent/ports/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports --- <p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p> -<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>ports</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).</p> +<p>La propriété en lecture seule <strong>ports</strong> de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -25,7 +25,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports <h2 id="Exemples">Exemples</h2> -<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p> +<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le <a href="/fr/docs/Web/API/PushMessageData"><code>PushMessageData</code></a> au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p> <pre class="brush: js">var port; @@ -68,8 +68,8 @@ self.onmessage = function(e) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li> <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> + <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li> </ul> diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.html b/files/fr/web/api/featurepolicy/allowedfeatures/index.html index d4f42561b8..1abfbd8c0f 100644 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.html +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.html @@ -11,16 +11,16 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures --- <p>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">La méthode <strong><code>allowedFeatures()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode <code>allowedFeatures()</code> retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.</span></p> +<p>La méthode <strong><code>allowedFeatures()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode <code>allowedFeatures()</code> retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const permissions = <em>FeaturePolicy</em>.allowedFeatures() +<pre class="syntaxbox">const permissions = <em>FeaturePolicy</em>.allowedFeatures() </pre> <h3 id="Paramètres">Paramètres</h3> -<p id="Feature_name">Aucun.</p> +<p>Aucun.</p> <h3 id="Valeur_de_retour">Valeur de retour</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures <p>L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.</p> -<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy +<pre class="brush: js">// D'abord, récupère l'objet Feature Policy const featurePolicy = document.featurePolicy // Puis demande la liste des foncitonnalités permises diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.html b/files/fr/web/api/featurepolicy/allowsfeature/index.html index 508e15dbb8..52eae7a58d 100644 --- a/files/fr/web/api/featurepolicy/allowsfeature/index.html +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.html @@ -10,16 +10,16 @@ translation_of: Web/API/FeaturePolicy/allowsFeature --- <div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">La méthode <strong><code>allowsFeature()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).</span></p> +<p>La méthode <strong><code>allowsFeature()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(<nomDirective>) +<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(<nomDirective>) </pre> <p>ou</p> -<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(<nomDirective>, <origine>)</pre> +<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(<nomDirective>, <origine>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -39,7 +39,7 @@ translation_of: Web/API/FeaturePolicy/allowsFeature <p>Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p> -<pre class="brush: js notranslate">// D'abord, récupère le Feature Policy +<pre class="brush: js">// D'abord, récupère le Feature Policy const featurePolicy = document.featurePolicy // Demande si la fonctionnalité est disponible diff --git a/files/fr/web/api/featurepolicy/features/index.html b/files/fr/web/api/featurepolicy/features/index.html index c4061ce3a5..5027fa3465 100644 --- a/files/fr/web/api/featurepolicy/features/index.html +++ b/files/fr/web/api/featurepolicy/features/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/FeaturePolicy/features --- <div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">La méthode <strong><code>features()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</span></p> +<p>La méthode <strong><code>features()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const fonctionnalitésSupportées = <em>FeaturePolicy</em>.features() +<pre class="syntaxbox">const fonctionnalitésSupportées = <em>FeaturePolicy</em>.features() </pre> <h3 id="Paramètres">Paramètres</h3> @@ -29,7 +29,7 @@ translation_of: Web/API/FeaturePolicy/features <p>Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :</p> -<pre class="brush: js notranslate">// Récupère l'objet Feature Policy +<pre class="brush: js">// Récupère l'objet Feature Policy const featurePolicy = document.featurePolicy // Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html index 2134dfc1ae..9d13d0db4c 100644 --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/FeaturePolicy/getAllowlistForFeature --- <div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">La méthode <strong><code>getAllowlistForFeature()</code></strong> de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.</span></p> +<p>La méthode <strong><code>getAllowlistForFeature()</code></strong> de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.getAllowlistForFeature(<fonctionnalité>) +<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.getAllowlistForFeature(<fonctionnalité>) </pre> <h3 id="Parameter">Parameter</h3> @@ -35,7 +35,7 @@ translation_of: Web/API/FeaturePolicy/getAllowlistForFeature <p>Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p> -<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy +<pre class="brush: js">// D'abord, récupère l'objet Feature Policy const featurePolicy = document.featurePolicy // Puis demande la liste pour la fonctionnalité "camera" diff --git a/files/fr/web/api/fetch/index.html b/files/fr/web/api/fetch/index.html index f339f8f389..30544929ec 100644 --- a/files/fr/web/api/fetch/index.html +++ b/files/fr/web/api/fetch/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- <p>{{APIRef("Fetch")}}</p> -<p><span class="seoSummary">La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</span></p> +<p>La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</p> <p><code>WindowOrWorkerGlobalScope</code> est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode <code>fetch()</code> est disponible dans la plupart des cas où vous pourriez en avoir besoin.</p> @@ -25,12 +25,12 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch <p>La méthode <code>fetch()</code> est contrôlée par la directive <code>connect-src</code> de l'entête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content Security Policy</a> plutôt que par la directive de la ressource qui est récupérée.</p> <div class="note"> -<p>Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p> +<p><strong>Note :</strong> Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <em>fetchResponsePromise</em> = Promise<Response> fetch(<em>entrée</em>[, <em>init</em>]);</pre> +<pre class="syntaxbox">const <em>fetchResponsePromise</em> = Promise<Response> fetch(<em>entrée</em>[, <em>init</em>]);</pre> <h3 id="Paramètres">Paramètres</h3> @@ -75,7 +75,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch <dd>Spécifie la valeur de l'entête HTTP referer. Cela peut être <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code> ou <code>unsafe-url</code>.</dd> <dt><code>integrity</code></dt> - <dd>Contient la valeur de <a href="https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd> + <dd>Contient la valeur de <a href="/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd> <dt><code>keepalive</code></dt> <dd>Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.</dd> @@ -103,7 +103,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch <p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de requête avec fetch</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">cet exemple en direct</a>) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant <code>fetch()</code>. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.</p> -<pre class="brush: js notranslate">const monImage = document.querySelector('img'); +<pre class="brush: js">const monImage = document.querySelector('img'); let maRequete = new Request('fleurs.jpg'); @@ -121,7 +121,7 @@ fetch(maRequete) <p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">exemple fetch avec initialisation et requête</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">cet exemple en direct</a>) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode <code>fetch</code> :</p> -<pre class="brush: js notranslate">const monImage = document.querySelector('img'); +<pre class="brush: js">const monImage = document.querySelector('img'); let mesEntetes = new Headers(); mesEntetes.append('Content-Type', 'image/jpeg'); @@ -139,11 +139,11 @@ fetch(maRequete, monInit).then(function(reponse) { <p>Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :</p> -<pre class="brush: js notranslate">let maRequete = new Request('fleurs.jpg', monInit);</pre> +<pre class="brush: js">let maRequete = new Request('fleurs.jpg', monInit);</pre> <p>Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.</p> -<pre class="brush: js notranslate">const monInit = { method: 'GET', +<pre class="brush: js">const monInit = { method: 'GET', headers: { 'Content-Type': 'image/jpeg' }, diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.html b/files/fr/web/api/fetch_api/basic_concepts/index.html index 9d87d1cc6e..93a268d89b 100644 --- a/files/fr/web/api/fetch_api/basic_concepts/index.html +++ b/files/fr/web/api/fetch_api/basic_concepts/index.html @@ -5,12 +5,10 @@ translation_of: Web/API/Fetch_API/Basic_concepts --- <p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p> -<div class="summary"> <p>L'API <a href="/en-US/docs/Web/API/Fetch_API">Fetch </a>fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.</p> -</div> <div class="note"> -<p>This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p> +<p><strong>Note :</strong> This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p> </div> <h2 id="In_a_nutshell">In a nutshell</h2> @@ -60,7 +58,7 @@ translation_of: Web/API/Fetch_API/Basic_concepts <p>A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A <code>TypeError</code> is thrown if you try to modify a {{domxref("Headers")}} object whose guard is <code>immutable</code>. However, the operation will work if</p> <ul> - <li>guard is <code title="">request</code> and the header <var>name</var> isn't a {{Glossary("forbidden header name")}} .</li> - <li>guard is <code title="">request-no-cors</code> and the header <var>name</var>/<var>value</var> is a {{Glossary("simple header")}} .</li> - <li>guard is <code title="">response</code> and the header <var>name</var> isn't a {{Glossary("forbidden response header name")}} .</li> + <li>guard is <code>request</code> and the header <var>name</var> isn't a {{Glossary("forbidden header name")}} .</li> + <li>guard is <code>request-no-cors</code> and the header <var>name</var>/<var>value</var> is a {{Glossary("simple header")}} .</li> + <li>guard is <code>response</code> and the header <var>name</var> isn't a {{Glossary("forbidden response header name")}} .</li> </ul> diff --git a/files/fr/web/api/fetch_api/index.html b/files/fr/web/api/fetch_api/index.html index 1c5a2370e7..49ae613fb1 100644 --- a/files/fr/web/api/fetch_api/index.html +++ b/files/fr/web/api/fetch_api/index.html @@ -9,9 +9,9 @@ translation_of: Web/API/Fetch_API <h2 id="Concepts_et_usage">Concepts et usage</h2> -<p>Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de <em lang="en">service workers</em>, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.</p> +<p>Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de <i>service workers</i>, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.</p> -<p>Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP <em lang="en">origin</em>, supplantant les définitions précédemment proposées ailleurs.</p> +<p>Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP <i>origin</i>, supplantant les définitions précédemment proposées ailleurs.</p> <p>Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.</p> @@ -19,10 +19,10 @@ translation_of: Web/API/Fetch_API <p>Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)</p> -<p>Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des <em lang="en">service workers</em>).</p> +<p>Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des <i>service workers</i>).</p> <div class="note"> -<p><strong>Remarque </strong>: pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a> et <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch, les concepts de base</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a> et <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch, les concepts de base</a>.</p> </div> <h3 id="Interrompre_un_fetch">Interrompre un fetch</h3> diff --git a/files/fr/web/api/fetch_api/using_fetch/index.html b/files/fr/web/api/fetch_api/using_fetch/index.html index 9282e3c392..04a5708c1a 100644 --- a/files/fr/web/api/fetch_api/using_fetch/index.html +++ b/files/fr/web/api/fetch_api/using_fetch/index.html @@ -15,9 +15,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch --- <p>{{DefaultAPISidebar("Fetch API")}}</p> -<div class="summary"> <p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.</p> -</div> <p>Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.</p> @@ -25,10 +23,10 @@ translation_of: Web/API/Fetch_API/Using_Fetch <p>Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.</p> -<p>Si vous souhaitez l'utiliser maintenant, il y a un <a class="external" href="https://github.com/github/fetch">polyfill Fetch</a> disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.</p> +<p>Si vous souhaitez l'utiliser maintenant, il y a un <a href="https://github.com/github/fetch">polyfill Fetch</a> disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.</p> <div class="note"> -<p><strong>Note </strong>: Certaines préoccupations ont été soulevées sur le fait que la <a class="external" href="https://fetch.spec.whatwg.org/">spécification de Fetch</a> est en contradition avec la <a class="external" href="https://streams.spec.whatwg.org/">spécification de Streams</a>; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à <a class="external" href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a>.</p> +<p><strong>Note :</strong> Certaines préoccupations ont été soulevées sur le fait que la <a href="https://fetch.spec.whatwg.org/">spécification de Fetch</a> est en contradition avec la <a href="https://streams.spec.whatwg.org/">spécification de Streams</a>; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à <a href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a>.</p> </div> <h2 id="Détection_de_la_fonctionnalité">Détection de la fonctionnalité</h2> @@ -63,7 +61,7 @@ fetch('flowers.jpg') <p>Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).</p> <div class="note"> -<p><strong>Note </strong>: Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.</p> +<p><strong>Note :</strong> Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.</p> </div> <p>Un objet <code>objectURL</code> est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.</p> @@ -141,7 +139,7 @@ fetch(myRequest,myInit) <p>C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du <code>init</code> si nécessaire.</p> <div class="note"> -<p><strong>Note </strong>: Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. <span id="result_box" lang="fr"><span>Cela a</span> <span>une sémantique légèrement différente</span> <span>à l'autre</span> <span>méthode de copie</span></span>— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec <code>clone()</code> non.</p> +<p><strong>Note :</strong> Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. Cela a une sémantique légèrement différente à l'autre méthode de copie— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec <code>clone()</code> non.</p> </div> <h2 id="En-têtes_Headers">En-têtes (Headers)</h2> @@ -214,7 +212,7 @@ try { </ul> <div class="note"> -<p><strong>Note</strong>: Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête <code>Content-Length</code>. De manière similaire, ajouter <code>Set-Cookie</code> dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.</p> +<p><strong>Note :</strong> Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête <code>Content-Length</code>. De manière similaire, ajouter <code>Set-Cookie</code> dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.</p> </div> <h2 id="Réponses">Réponses</h2> @@ -242,7 +240,7 @@ addEventListener('fetch', function(event) { </ul> <div class="note"> -<p><strong>Note</strong>: La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.</p> +<p><strong>Note :</strong> La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.</p> </div> <h2 id="Corps">Corps</h2> @@ -301,14 +299,12 @@ fetch("/login", { <p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> -<div id="compat-mobile"></div> - <h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li> <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> <li><a href="/fr/docs/Web/HTTP">HTTP</a></li> - <li><a class="external" href="https://github.com/github/fetch">Polyfill pour Fetch</a></li> - <li><a class="external" href="https://github.com/mdn/fetch-examples/">Exemples de Fetch sur Github</a></li> + <li><a href="https://github.com/github/fetch">Polyfill pour Fetch</a></li> + <li><a href="https://github.com/mdn/fetch-examples/">Exemples de Fetch sur Github</a></li> </ul> diff --git a/files/fr/web/api/fetchevent/index.html b/files/fr/web/api/fetchevent/index.html index 9424760f3b..d4f17e749d 100644 --- a/files/fr/web/api/fetchevent/index.html +++ b/files/fr/web/api/fetchevent/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/FetchEvent <dl> <dt>{{domxref("FetchEvent.respondWith()")}}</dt> - <dd>Promesse qui est résolue en retournant une {{domxref("Response")}} ou une <a href="http://fetch.spec.whatwg.org/#concept-network-error">erreur réseau</a> à <code style="font-style: normal;"><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd> + <dd>Promesse qui est résolue en retournant une {{domxref("Response")}} ou une <a href="http://fetch.spec.whatwg.org/#concept-network-error">erreur réseau</a> à <code><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd> <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt> <dd> <p>Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.</p> diff --git a/files/fr/web/api/file/name/index.html b/files/fr/web/api/file/name/index.html index 2dddc3083c..be29d91b9a 100644 --- a/files/fr/web/api/file/name/index.html +++ b/files/fr/web/api/file/name/index.html @@ -18,7 +18,9 @@ original_slug: Web/API/File/fileName <p>Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.</p> -<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</div> +<div class="note"> + <p><strong>Note :</strong> Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -28,7 +30,7 @@ original_slug: Web/API/File/fileName <p>Une chaîne de caractères.</p> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.html b/files/fr/web/api/file/using_files_from_web_applications/index.html index 62587156ca..8d9eb1119e 100644 --- a/files/fr/web/api/file/using_files_from_web_applications/index.html +++ b/files/fr/web/api/file/using_files_from_web_applications/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/File/Using_files_from_web_applications <p>Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.</p> -<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> pour plus de détails.</p> +<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails.</p> <h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)">Accéder au(x) fichier(s) sélectionné(s)</h2> @@ -35,7 +35,7 @@ translation_of: Web/API/File/Using_files_from_web_applications var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre> <div class="note"> -<p>Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p> +<p><strong>Note :</strong> Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p> </div> <h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)_sur_un_événement_change">Accéder au(x) fichier(s) sélectionné(s) sur un événement <em>change</em></h2> @@ -54,7 +54,7 @@ var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre> <h3 id="Ajouter_dynamiquement_un_gestionnaire_d'événement_change">Ajouter dynamiquement un gestionnaire d'événement <em>change</em></h3> -<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a class="external" href="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p> +<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a href="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p> <pre class="brush: js">var inputElement = document.getElementById("inputField"); inputElement.addEventListener("change", handleFiles, false); @@ -387,7 +387,7 @@ function handleFiles(files) { </ol> <div class="note"> -<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p> +<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p> </div> <h3 id="Gérer_le_processus_de_téléchargement_d'un_fichier_de_manière_asynchrone">Gérer le processus de téléchargement d'un fichier de manière asynchrone</h3> @@ -455,29 +455,29 @@ if (isset($_FILES['myFile'])) { <p>Sous Firefox, la constante de configuration <code>pdfjs.disabled</code> doit être définie à <code>false</code> {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>iframe</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewer<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><iframe id="viewer"></pre> <p>Et voici comment modifier la valeur de l'attribut <code>src</code> :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -iframe<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob); +var iframe = document.getElementById('viewer'); +iframe.setAttribute('src', obj_url); +window.URL.revokeObjectURL(obj_url);</pre> <h2 id="Exemple_Utiliser_un_objet_URLs_avec_d'autres_types_de_fichiers">Exemple : Utiliser un objet URLs avec d'autres types de fichiers</h2> <p>Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> -video<span class="punctuation token">.</span>src <span class="operator token">=</span> obj_url<span class="punctuation token">;</span> -video<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span> -window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var video = document.getElementById('video'); +var obj_url = window.URL.createObjectURL(blob); +video.src = obj_url; +video.play() +window.URL.revokeObjectURL(obj_url);</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29">File upload state</a> (HTML 5 working draft)</li> <li><a href="http://www.w3.org/TR/FileAPI/">File API</a></li> </ul> @@ -488,7 +488,7 @@ window<span class="punctuation token">.</span>URL<span class="punctuation token" <li>{{ domxref("FileList") }}</li> <li>{{ domxref("FileReader") }}</li> <li><a href="/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li> + <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a></li> <li>{{ domxref("XMLHttpRequest") }}</li> - <li><a class="external" href="http://www.jquery.com/">jQuery</a> JavaScript library</li> + <li><a href="http://www.jquery.com/">jQuery</a> JavaScript library</li> </ul> diff --git a/files/fr/web/api/file_and_directory_entries_api/index.html b/files/fr/web/api/file_and_directory_entries_api/index.html index 9ddb83f886..8d24b23d1d 100644 --- a/files/fr/web/api/file_and_directory_entries_api/index.html +++ b/files/fr/web/api/file_and_directory_entries_api/index.html @@ -15,27 +15,27 @@ original_slug: Web/API/API_fichier_systeme <p>L'API asynchrone a les interfaces suivantes :</p> <ul> - <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystem" title="en/DOM/File_API/File_System_API/LocalFileSystem">LocalFileSystem</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet <a href="/fr/docs/window">window</a> et le worker global scope.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileSystem" title="en/DOM/File_API/File_system_API/FileSystem">FileSystem</a> représente un fichier système. L'objet est la passerelle à votre API toute entière.</li> - <li><a href="/en/DOM/File_API/File_System_API/Entry" title="en/DOM/File_API/File_system_API/Entry">Entry</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li> - <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntry" title="en/DOM/File_API/File_system_API/DirectoryEntry">DirectoryEntry</a> représente un dossier dans un fichier système.</li> - <li><a href="/en/DOM/File_API/File_System_API/DirectoryReader" title="en/DOM/File_API/File_system_API/DirectoryReader">DirectoryReader</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileEntry" title="en/DOM/File_API/File_system_API/FileEntry">FileEntry</a> représente un fichier dans un fichier système.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileError" title="en/DOM/File_API/File_system_API/FileError">FileError</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.</li> + <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystem">LocalFileSystem</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet <a href="/fr/docs/window">window</a> et le worker global scope.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileSystem">FileSystem</a> représente un fichier système. L'objet est la passerelle à votre API toute entière.</li> + <li><a href="/en/DOM/File_API/File_System_API/Entry">Entry</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li> + <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntry">DirectoryEntry</a> représente un dossier dans un fichier système.</li> + <li><a href="/en/DOM/File_API/File_System_API/DirectoryReader">DirectoryReader</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileEntry">FileEntry</a> représente un fichier dans un fichier système.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileError">FileError</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.</li> </ul> <h2 id="API_synchrone">API synchrone</h2> -<p>L'API synchrone est utile avec les <a href="/En/Using_web_workers" rel="internal" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.</p> +<p>L'API synchrone est utile avec les <a href="/En/Using_web_workers">WebWorkers</a>. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.</p> <ul> - <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystemSync" title="en/DOM/File_API/File_System_API/LocalFileSystemSync">LocalFileSystemSync</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileSystemSync" title="en/DOM/File_API/File_system_API/FileSystemSync">FileSystemSync</a> représente un fichier système.</li> - <li><a href="/en/DOM/File_API/File_System_API/EntrySync" title="en/DOM/File_API/File_system_API/EntrySync">EntrySync</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li> - <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_system_API/DirectoryEntrySync">DirectoryEntrySync</a> représente un dossier dans un fichier système.</li> - <li><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_system_API/DirectoryReaderSync">DirectoryReaderSync</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_system_API/FileEntrySync">FileEntrySync</a> représente un fichier dans un fichier système.</li> - <li><a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_system_API/FileException">FileException</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.</li> + <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystemSync">LocalFileSystemSync</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileSystemSync">FileSystemSync</a> représente un fichier système.</li> + <li><a href="/en/DOM/File_API/File_System_API/EntrySync">EntrySync</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li> + <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> représente un dossier dans un fichier système.</li> + <li><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync">DirectoryReaderSync</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileEntrySync">FileEntrySync</a> représente un fichier dans un fichier système.</li> + <li><a href="/en/DOM/File_API/File_System_API/FileException">FileException</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.</li> </ul> <h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html index a1749e4099..41533953da 100644 --- a/files/fr/web/api/filelist/index.html +++ b/files/fr/web/api/filelist/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/FileList --- <div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div> -<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code><input type="file"></code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag & Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p> +<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code><input type="file"></code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag & Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p> <h2 id="Utiliser_une_liste_de_fichiers">Utiliser une liste de fichiers</h2> @@ -18,7 +18,7 @@ translation_of: Web/API/FileList <pre><input id="fileItem" type="file"> </pre> -<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> :</p> +<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File"><code>File</code></a> :</p> <pre class="brush: js">var file = document.getElementById('fileItem').files[0]</pre> @@ -43,7 +43,7 @@ translation_of: Web/API/FileList <h3 id="item()"><code>item()</code></h3> -<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p> +<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p> <pre> File item( index @@ -59,7 +59,7 @@ translation_of: Web/API/FileList <h4 id="Valeur_de_retour">Valeur de retour</h4> -<p>L'objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier demandé.</p> +<p>L'objet <a href="/fr/docs/Web/API/File"><code>File</code></a> qui représente le fichier demandé.</p> <h2 id="Exemples">Exemples</h2> @@ -142,7 +142,7 @@ document.querySelector("#myFiles").onchange = recupererFichiers;</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers dans des applications web</a></li> - <li><code><a href="/fr/docs/Web/API/File" title="DOM/File">File</a></code></li> - <li><code><a href="/fr/docs/Web/API/FileReader" title="DOM/FileReader">FileReader</a></code></li> + <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers dans des applications web</a></li> + <li><code><a href="/fr/docs/Web/API/File">File</a></code></li> + <li><code><a href="/fr/docs/Web/API/FileReader">FileReader</a></code></li> </ul> diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html index 6746cc3594..cba515b488 100644 --- a/files/fr/web/api/filereader/readasarraybuffer/index.html +++ b/files/fr/web/api/filereader/readasarraybuffer/index.html @@ -12,9 +12,8 @@ translation_of: Web/API/FileReader/readAsArrayBuffer <p>La méthode <strong><code>readAsArrayBuffer()</code></strong> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>) à savoir <code>2</code>, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.</p> -<div class="blockIndicator note"> -<p><strong>Nouvelle API disponible</strong><br> - La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p> +<div class="note"> +<p><strong>Note :</strong> La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html index 0cd282ac6b..2155291f2b 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.html +++ b/files/fr/web/api/filereader/readasbinarystring/index.html @@ -52,7 +52,7 @@ canvas.toBlob(function (blob) { <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html index e4d550412e..04dbbd93f1 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.html +++ b/files/fr/web/api/filereader/readasdataurl/index.html @@ -93,7 +93,9 @@ translation_of: Web/API/FileReader/readAsDataURL } </pre> -<div class="note"><strong>Remarque :</strong> le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/filerequest/index.html b/files/fr/web/api/filerequest/index.html index b735675817..b3a223f334 100644 --- a/files/fr/web/api/filerequest/index.html +++ b/files/fr/web/api/filerequest/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/FileRequest <p>L'interface <code>FileRequest</code> hérite également de l'interface {{domxref("DOMRequest")}}.</p> -<h2 id="Method_overview" name="Method_overview">Méthodes</h2> +<h2 id="Method_overview">Méthodes</h2> <p>Aucune.</p> diff --git a/files/fr/web/api/filerequest/onprogress/index.html b/files/fr/web/api/filerequest/onprogress/index.html index 6677356045..5567917dc9 100644 --- a/files/fr/web/api/filerequest/onprogress/index.html +++ b/files/fr/web/api/filerequest/onprogress/index.html @@ -10,11 +10,9 @@ translation_of: Web/API/FileRequest/onprogress --- <p>{{APIRef("File System API")}} {{non-standard_header}}</p> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet {{ domxref("FileRequest") }} est en cours.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>instanceOfFileRequest</em>.onprogress = <em>function</em>; </pre> @@ -42,7 +40,7 @@ request.onprogress = function (status) { } </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>Ne fait partie d'aucune spécification.</p> diff --git a/files/fr/web/api/force_touch_events/index.html b/files/fr/web/api/force_touch_events/index.html index ac64c8bb46..f20d66888f 100644 --- a/files/fr/web/api/force_touch_events/index.html +++ b/files/fr/web/api/force_touch_events/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/Force_Touch_events <dt>{{event("webkitmouseforceup")}} {{non-standard_inline}}</dt> <dd>Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".</dd> <dt>{{event("webkitmouseforcechanged")}} {{non-standard_inline}}</dt> - <dd>Cet évènement est lancé chaque fois que la quantité de pression change. <span id="result_box" lang="fr"><span>Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.</span></span></dd> + <dd>Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.</dd> </dl> <h2 id="Propriété_des_évènements">Propriété des évènements</h2> diff --git a/files/fr/web/api/formdata/append/index.html b/files/fr/web/api/formdata/append/index.html index f7c1e40a75..80ab87cb3f 100644 --- a/files/fr/web/api/formdata/append/index.html +++ b/files/fr/web/api/formdata/append/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData/append <p>La différence entre {{domxref("FormData.set")}} et <code>append()</code> est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' <code>append()</code> va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.</p> <div class="note"> -<p><strong>Note</strong>: Cette méthode est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/append <pre class="brush: js">formData.append(name, value); formData.append(name, value, filename);</pre> -<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3> +<h3 id="append_Parameters">Paramètres</h3> <dl> <dt><code>name</code></dt> @@ -92,7 +92,7 @@ formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/delete/index.html b/files/fr/web/api/formdata/delete/index.html index 3540d9d9e0..551431a588 100644 --- a/files/fr/web/api/formdata/delete/index.html +++ b/files/fr/web/api/formdata/delete/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/delete <p>La méthode <code><strong>delete()</strong></code> de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet <code>FormData</code>.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js">formData.delete(name);</pre> -<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3> +<h3 id="append_Parameters">Paramètres</h3> <dl> <dt><code>name</code></dt> @@ -72,7 +72,7 @@ translation_of: Web/API/FormData/delete <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/entries/index.html b/files/fr/web/api/formdata/entries/index.html index d8996c1183..dc940b71b6 100644 --- a/files/fr/web/api/formdata/entries/index.html +++ b/files/fr/web/api/formdata/entries/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/entries La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.</p> <div class="note"> -<p><strong>Note</strong>: Cette methode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette methode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/entries <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[7]">// Creation d'un objet FormData +<pre class="brush: js">// Creation d'un objet FormData var formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); @@ -75,7 +75,7 @@ key2, value2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/formdata/index.html b/files/fr/web/api/formdata/formdata/index.html index cb9a857fad..3852b6d2be 100644 --- a/files/fr/web/api/formdata/formdata/index.html +++ b/files/fr/web/api/formdata/formdata/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/FormData/FormData <p>Le constructeur <code><strong>FormData()</strong></code> crée un nouvel objet {{domxref("FormData")}}.</p> <div class="note"> -<p><strong>Note </strong>: Cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>form </code>{{optional_inline}}</dt> @@ -60,7 +60,7 @@ translation_of: Web/API/FormData/FormData </pre> <div class="note"> -<p><strong>Note </strong>: Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut <code>name</code>), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).</p> +<p><strong>Note :</strong> Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut <code>name</code>), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).</p> </div> <pre class="brush: js">var myForm = document.getElementById('myForm'); diff --git a/files/fr/web/api/formdata/get/index.html b/files/fr/web/api/formdata/get/index.html index 4d5e26fd64..5eec93c7e9 100644 --- a/files/fr/web/api/formdata/get/index.html +++ b/files/fr/web/api/formdata/get/index.html @@ -60,7 +60,7 @@ formData.get('username'); // Renvoie "Chris" <ul> <li><a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHTTPRequest</code></a></li> - <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets <code>FormData</code></a></li> + <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Using_FormData_Objects">Utiliser les objets <code>FormData</code></a></li> <li><a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></li> </ul> diff --git a/files/fr/web/api/formdata/getall/index.html b/files/fr/web/api/formdata/getall/index.html index 4faddd8bd8..2b1ced7864 100644 --- a/files/fr/web/api/formdata/getall/index.html +++ b/files/fr/web/api/formdata/getall/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/getAll <p>La méthode <code><strong>getAll()</strong></code> de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet <code>FormData</code>.</p> <div class="note"> -<p><strong>Note</strong> : Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js">formData.getAll(name);</pre> -<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3> +<h3 id="append_Parameters">Paramètres</h3> <dl> <dt><code>name</code></dt> @@ -76,7 +76,7 @@ formData.append('username', 'Bob');</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html index 0074201183..2915f9d65a 100644 --- a/files/fr/web/api/formdata/has/index.html +++ b/files/fr/web/api/formdata/has/index.html @@ -16,14 +16,14 @@ translation_of: Web/API/FormData/has <p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: js">formData.has(name);</pre> -<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3> +<h3 id="append_Parameters">Paramètres</h3> <dl> <dt><code>name</code></dt> @@ -74,7 +74,7 @@ formData.has('username'); // Retourne true <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utilisation des objects FormData </a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/index.html b/files/fr/web/api/formdata/index.html index 2c16e20d2a..8fbf318e86 100644 --- a/files/fr/web/api/formdata/index.html +++ b/files/fr/web/api/formdata/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData <p>Un objet implémentant <code>FormData</code> peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : <code>for (var p of myFormData)</code> est équivalent à <code>for (var p of myFormData.entries())</code>.</p> <div class="note"> -<p><strong>Note </strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Constructeur">Constructeur</h2> @@ -81,7 +81,7 @@ translation_of: Web/API/FormData <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utilisation des objects FormData </a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html index b6b9ad2acf..3b3b55c86c 100644 --- a/files/fr/web/api/formdata/keys/index.html +++ b/files/fr/web/api/formdata/keys/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/keys <p>La méthode <code>FormData.keys()</code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/keys <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[7]">// Créer un object FormData test +<pre class="brush: js">// Créer un object FormData test var formData = new FormData(); formData.append('cle1', 'valeur1'); formData.append('cle2', 'valeur2'); @@ -73,7 +73,7 @@ cle2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/set/index.html b/files/fr/web/api/formdata/set/index.html index 08531cf865..2174a28c4d 100644 --- a/files/fr/web/api/formdata/set/index.html +++ b/files/fr/web/api/formdata/set/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/FormData/set <p>La différence entre <code>set()</code> et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, <code>set()</code> écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/FormData/set <pre class="brush: js">formData.set(name, value); formData.set(name, value, filename);</pre> -<h4 id="append_Parameters" name="append()_Parameters">Paramètres</h4> +<h4 id="append_Parameters">Paramètres</h4> <dl> <dt><code>name</code></dt> @@ -86,7 +86,7 @@ formData.get('name'); // "72"</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html index 29ed3971f0..93fc4bc977 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.html +++ b/files/fr/web/api/formdata/using_formdata_objects/index.html @@ -12,7 +12,7 @@ tags: translation_of: Web/API/FormData/Using_FormData_Objects original_slug: Web/API/FormData/Utilisation_objets_FormData --- -<p class="summary">L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p> +<p>L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p> <h2 id="Création_intégrale_d’un_objet_FormData">Création intégrale d’un objet FormData</h2> @@ -37,9 +37,11 @@ request.open("POST", "http://foo.com/submitform.php"); request.send(formData); </pre> -<div class="note"><strong>Remarque :</strong> les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</div> +<div class="note"> + <p><strong>Note :</strong> Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</p> +</div> -<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p> +<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p> <h2 id="Récupération_d’un_objet_FormData_dans_un_formulaire_HTML">Récupération d’un objet FormData dans un formulaire HTML</h2> @@ -109,7 +111,7 @@ form.addEventListener('submit', function(ev) { </pre> <div class="note"> -<p><strong>Remarque </strong>: si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p> +<p><strong>Note :</strong> Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p> </div> <p>Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :</p> @@ -134,7 +136,7 @@ $.ajax({ <h2 id="Envoi_de_formulaires_et_de_fichiers_via_AJAX_sans_objet_FormData">Envoi de formulaires et de fichiers via AJAX <em>sans</em> objet <code>FormData</code></h2> -<p>Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p> +<p>Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/formdata/values/index.html b/files/fr/web/api/formdata/values/index.html index e9ea371f97..7a5ddadcec 100644 --- a/files/fr/web/api/formdata/values/index.html +++ b/files/fr/web/api/formdata/values/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/FormData/values <p>La méthode <code><strong>FormData.values()</strong></code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.</p> <div class="note"> -<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/FormData/values <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[7]">// Créer un objet FormData test +<pre class="brush: js">// Créer un objet FormData test var formData = new FormData(); formData.append('cle1', 'valeur1'); formData.append('cle2', 'valeur2'); @@ -73,7 +73,7 @@ valeur2</pre> <ul> <li>{{domxref("XMLHTTPRequest")}}</li> - <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Utiliser les objets FormData</a></li> <li>{{HTMLElement("Form")}}</li> </ul> diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html index 04c11bf3e3..8b0a59233a 100644 --- a/files/fr/web/api/fullscreen_api/index.html +++ b/files/fr/web/api/fullscreen_api/index.html @@ -11,11 +11,13 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode --- <p>{{DefaultAPISidebar("Fullscreen API")}}</p> -<p class="summary">L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. <span id="result_box" lang="fr"><span>L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</span></span></p> +<p>L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</p> -<div class="note"><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. <span id="result_box" lang="fr"><span>Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser </span></span> <a href="https://github.com/rafrex/fscreen">Fscreen</a> <span lang="fr"><span> pour l'accès du fournisseur à l'API).</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a> pour l'accès du fournisseur à l'API).</p> +</div> -<h2 id="Specification" name="Specification">Activation du mode plein écran</h2> +<h2 id="Specification">Activation du mode plein écran</h2> <p>En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .</p> @@ -29,10 +31,10 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <p>Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">var elem = document.getElementById("myvideo"); +if (elem.requestFullscreen) { + elem.requestFullscreen(); +}</pre> <h3 id="Différences_de_présentation">Différences de présentation</h3> @@ -52,7 +54,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <h3 id="Lorsqu'une_demande_de_plein_écran_échoue">Lorsqu'une demande de plein écran échoue</h3> -<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. <span id="result_box" lang="fr"><span>Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</span></span></p> +<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</p> <div class="note"> <p><strong>Note :</strong> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.</p> @@ -73,13 +75,13 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <dd>L'attribut <code>fullscreenEnabled</code> vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.</dd> </dl> -<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2> +<h2 id="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2> <p>Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran.</p> <p>En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.</p> -<h2 id="Specification" name="Specification">Exemple</h2> +<h2 id="Specification">Exemple</h2> <p>Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.</p> @@ -100,23 +102,23 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <p>Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleFullScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>document<span class="punctuation token">.</span>fullscreenElement<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>exitFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span><span class="function token">exitFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +}</pre> <p> Dans un premier temps, la valeur de l'attribut <code>fullscreenElement</code> est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par <code>moz-, ms-</code> ou <code>webkit-</code>). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.</p> <p>Si le mode plein écran est déjà activé (<code>fullscreenElement</code> est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}.</p> -<h2 id="Préfixes_2"><a name="Préfixes">Préfixes</a></h2> +<h2 id="Préfixes_2">Préfixes</h2> -<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . <span id="result_box" lang="fr"><span>Voici le tableau résumant les préfixes et les différences de noms entre eux </span></span><span lang="fr"><span>:</span></span></p> +<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . Voici le tableau résumant les préfixes et les différences de noms entre eux :</p> <table class="standard-table"> <thead> @@ -187,7 +189,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode </thead> </table> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> @@ -231,7 +233,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li> + <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> diff --git a/files/fr/web/api/gainnode/index.html b/files/fr/web/api/gainnode/index.html index a0df5a4c76..93d8c9bf19 100644 --- a/files/fr/web/api/gainnode/index.html +++ b/files/fr/web/api/gainnode/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/GainNode <p>Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.</p> -<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p> +<p><img alt="Un objet GainNode augmente le gain de la sortie." src="webaudiogainnode.png"></p> <table class="properties"> <tbody> @@ -89,5 +89,5 @@ translation_of: Web/API/GainNode <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> </ul> diff --git a/files/fr/web/api/gamepad_api/index.html b/files/fr/web/api/gamepad_api/index.html index 33c6a7f458..7e81e21b27 100644 --- a/files/fr/web/api/gamepad_api/index.html +++ b/files/fr/web/api/gamepad_api/index.html @@ -5,29 +5,29 @@ translation_of: Web/API/Gamepad_API --- <div>{{DefaultAPISidebar("Gamepad API")}}</div> -<p>L'<strong>API Gamepad</strong> <span class="tlid-translation translation" lang="fr"><span title="">est un moyen</span></span> pour les <span class="tlid-translation translation" lang="fr"><span title="">développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités</span> <span title="">de commande du jeu d'y répondre de manière simple et systématiq</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.</span></span></p> +<p>L'<strong>API Gamepad</strong> est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.</p> <h2 id="Interfaces">Interfaces</h2> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt> - <dd><span class="tlid-translation translation" lang="fr"><span title="">Représente une manette de jeu / unités</span> <span title="">de commande du jeu connecté à l'ordinateur.</span></span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt> + <dt><a href="/en-US/docs/Web/API/Gamepad"><code>Gamepad</code></a></dt> + <dd>Représente une manette de jeu / unités de commande du jeu connecté à l'ordinateur.</dd> + <dt><a href="/en-US/docs/Web/API/GamepadButton"><code>GamepadButton</code></a></dt> <dd>Représente un bouton sur un gamepad connecté.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt> + <dt><a href="/en-US/docs/Web/API/GamepadEvent"><code>GamepadEvent</code></a></dt> <dd>L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.</dd> </dl> <h3 id="Extensions_de_manette_du_jeu_expérimentales">Extensions de manette du jeu expérimentales</h3> <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt> + <dt><a href="/en-US/docs/Web/API/GamepadHapticActuator"><code>GamepadHapticActuator</code></a></dt> <dd>Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt> - <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>controller.</dd> + <dt><a href="/en-US/docs/Web/API/GamepadPose"><code>GamepadPose</code></a></dt> + <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="/en-US/docs/Web/API/WebVR_API">WebVR</a>controller.</dd> </dl> -<p>See also the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a>, for features that allow you to access the above information.</p> +<p>See also the <a href="/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a>, for features that allow you to access the above information.</p> <h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3> @@ -50,7 +50,7 @@ translation_of: Web/API/Gamepad_API <h2 id="Tutoriels_et_guides">Tutoriels et guides</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li> + <li><a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li> <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li> </ul> @@ -85,6 +85,6 @@ translation_of: Web/API/Gamepad_API <h2 id="Voir_également">Voir également</h2> <ul> - <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li> + <li><a href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li> <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li> </ul> diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html index ce71e9ae6d..d30dc4dce8 100644 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -5,16 +5,16 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API original_slug: Web/Guide/API/Gamepad --- <p>{{ SeeCompatTable() }}</p> -<div class="summary"> - <p><span class="seoSummary">HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <code><canvas></code>, WebGL, <code><audio></code>, et <code><video></code>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives.</span> L'API Gamepad est une manière pour les développeurs et <em><code>designers</code></em> d'accéder aux contrôleurs de jeux.</p> -</div> + +<p>HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <code><canvas></code>, WebGL, <code><audio></code>, et <code><video></code>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et <em><code>designers</code></em> d'accéder aux contrôleurs de jeux.</p> + <div class="note"> - <p><strong>Note</strong><strong>:</strong> Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant <code>about:config</code> et en activant <code>dom.gamepad.enabled</code>.</p> + <p><strong>Note :</strong> Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant <code>about:config</code> et en activant <code>dom.gamepad.enabled</code>.</p> </div> <p>L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.</p> -<h2 id="conntecting" name="conntecting">Connexion au contrôleur</h2> +<h2 id="conntecting">Connexion au contrôleur</h2> <p>Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.</p> -<div class="geckoVersionNote"> +<div> <p>Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.</p> </div> <p>Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :</p> @@ -26,15 +26,15 @@ original_slug: Web/Guide/API/Gamepad </pre> <p>Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété <code>gamepad</code> de l'événement.</p> <div class="note"> - <p><strong>Note</strong>: À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.</p> + <p><strong>Note :</strong> À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.</p> </div> -<h2 id="disconnecting" name="disconnecting">Déconnexion du contrôleur</h2> -<p>Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : <span style="line-height: 1.5;"> {{ domxref("Window.gamepaddisconnected") }}.</span></p> +<h2 id="disconnecting">Déconnexion du contrôleur</h2> +<p>Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}.</p> <pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) { console.log("Contrôleur n°%d déconnecté : %s", e.gamepad.index, e.gamepad.id); });</pre> -<p>La propriété <code>index</code> sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par<span style="line-height: 1.5;"> {{ domxref("navigator.getGamepads") }}.</span></p> +<p>La propriété <code>index</code> sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.</p> <pre class="brush: js">var gamepads = {}; function gamepadHandler(event, connecting) { @@ -57,11 +57,11 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f [PAGE NON TRADUITE DEPUIS ICI...]</div> <div> </div> -<h2 id="querying" name="querying">Querying the Gamepad object</h2> +<h2 id="querying">Querying the Gamepad object</h2> <p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p> <p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p> <div class="note"> - <p><strong>Note</strong>: The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p> + <p><strong>Note :</strong> The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p> </div> <pre class="brush: js">window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; @@ -85,7 +85,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li> </ul> <div class="note"> - <p><strong>Note</strong>: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p> + <p><strong>Note :</strong> The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p> </div> <h3 id="Using_button_information">Using button information</h3> <p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p> @@ -136,10 +136,10 @@ function pollGamepads() { <p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen. In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p> <p>After all this is done, we use our <code>rAF</code> variable to request the next animation frame, running <code>gameLoop()</code> again.</p> <pre class="brush: js">function buttonPressed(b) { -<span class="k"> if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span> -<span class="nx"> return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">pressed</span><span class="p">;</span> -<span class="nx"> </span><span class="p">}</span> -<span class="p"> return</span> <span class="nx">b</span> <span class="o">==</span> <span class="mf">1.0</span><span class="p">;</span> + if (typeof(b) == "object") { + return b.pressed; + } + return b == 1.0; } function gameLoop() { diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.html b/files/fr/web/api/geolocation/getcurrentposition/index.html index 4dc6fe3944..8168640a6c 100644 --- a/files/fr/web/api/geolocation/getcurrentposition/index.html +++ b/files/fr/web/api/geolocation/getcurrentposition/index.html @@ -83,6 +83,6 @@ navigator.geolocation.getCurrentPosition(success, error, options); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li> + <li><a href="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li> <li>{{domxref("Navigator.geolocation")}}</li> </ul> diff --git a/files/fr/web/api/geolocation/watchposition/index.html b/files/fr/web/api/geolocation/watchposition/index.html index 4e8ae61663..c2424f4774 100644 --- a/files/fr/web/api/geolocation/watchposition/index.html +++ b/files/fr/web/api/geolocation/watchposition/index.html @@ -62,9 +62,8 @@ options = { id = navigator.geolocation.watchPosition(success, error, options); </pre> -<div class="note"><strong>Note : </strong>Si votre application fonctionne sous Firefox OS, veillez à la <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint. - -<p> </p> +<div class="note"> + <p><strong>Note :</strong> Si votre application fonctionne sous Firefox OS, veillez à la <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/geolocation_api/index.html b/files/fr/web/api/geolocation_api/index.html index 330ac12430..153bce57b2 100644 --- a/files/fr/web/api/geolocation_api/index.html +++ b/files/fr/web/api/geolocation_api/index.html @@ -103,8 +103,7 @@ var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_optio <h2 id="Exemple_interactif">Exemple interactif</h2> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { padding: 20px; background-color:#ffffc9 } @@ -113,7 +112,6 @@ button { margin: .5rem 0; } </pre> -</div> <h3 id="HTML">HTML</h3> @@ -241,6 +239,6 @@ prompt(window, <ul> <li>{{domxref("navigator.geolocation")}}</li> - <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">L'API Geolocation sur w3.org</a></li> + <li><a href="https://www.w3.org/TR/geolocation-API/">L'API Geolocation sur w3.org</a></li> <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Qui a déplacé ma géolocalisation ? sur le blog Hacks</a></li> </ul> diff --git a/files/fr/web/api/geolocationcoordinates/index.html b/files/fr/web/api/geolocationcoordinates/index.html index d43ecc7f16..f7897746b3 100644 --- a/files/fr/web/api/geolocationcoordinates/index.html +++ b/files/fr/web/api/geolocationcoordinates/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/GeolocationCoordinates <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt> <dd>Renvoie un <code>double</code> représentant la précision de l'<code>altitude</code> . Cette valeur peut être <code>null</code>.</dd> <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt> - <dd>Renvoie un <code>double</code> représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. <code>0</code> degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à <code>90</code> degrés et l'Ouest à <code>270</code> degrés). Si <code>speed</code> est à <code>0</code>, <code>heading</code> est alors <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (<code>heading</code>), cette valeur est alors <code>null</code>.</dd> + <dd>Renvoie un <code>double</code> représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. <code>0</code> degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à <code>90</code> degrés et l'Ouest à <code>270</code> degrés). Si <code>speed</code> est à <code>0</code>, <code>heading</code> est alors <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (<code>heading</code>), cette valeur est alors <code>null</code>.</dd> <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt> <dd>Renvoie un <code>double</code> représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être <code>null</code>.</dd> </dl> @@ -62,6 +62,6 @@ translation_of: Web/API/GeolocationCoordinates <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/WebAPI/Using_geolocation" title="/fr/docs/WebAPI/Using_geolocation">Using geolocation</a></li> + <li><a href="/fr/docs/WebAPI/Using_geolocation">Using geolocation</a></li> <li>The {{domxref("Geolocation")}} interface that uses it.</li> </ul> diff --git a/files/fr/web/api/geolocationpositionerror/index.html b/files/fr/web/api/geolocationpositionerror/index.html index 541799629c..9a7f5a0af1 100644 --- a/files/fr/web/api/geolocationpositionerror/index.html +++ b/files/fr/web/api/geolocationpositionerror/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/GeolocationPositionError <tbody> <tr> <th scope="col">Valeur</th> - <th scope="col"><span class="tlid-translation translation" lang="fr"><span title="">Constante associée</span></span></th> + <th scope="col">Constante associée</th> <th scope="col">Description</th> </tr> <tr> diff --git a/files/fr/web/api/gestureevent/index.html b/files/fr/web/api/gestureevent/index.html index 42e37d18cc..e69a862368 100644 --- a/files/fr/web/api/gestureevent/index.html +++ b/files/fr/web/api/gestureevent/index.html @@ -8,7 +8,7 @@ tags: - Interface translation_of: Web/API/GestureEvent --- -<p id="Summary">{{APIRef("DOM Events")}}</p> +<p>{{APIRef("DOM Events")}}</p> <p>{{Non-standard_header()}}</p> diff --git a/files/fr/web/api/globaleventhandlers/index.html b/files/fr/web/api/globaleventhandlers/index.html index 4207c5d0d1..7c24f31bb7 100644 --- a/files/fr/web/api/globaleventhandlers/index.html +++ b/files/fr/web/api/globaleventhandlers/index.html @@ -24,13 +24,13 @@ translation_of: Web/API/GlobalEventHandlers <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> <dd>Est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.</dd> <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> - <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd> + <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'<a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd> <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> - <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd> + <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'<a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd> <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> - <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé à jouer une nouvelle itération de la séquence d'animation.</dd> + <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé à jouer une nouvelle itération de la séquence d'animation.</dd> <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> - <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé.</dd> + <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé.</dd> <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).</dd> <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> @@ -188,9 +188,9 @@ translation_of: Web/API/GlobalEventHandlers <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.</dd> <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> a été abandonnée.</dd> + <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une <a href="/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> a été abandonnée.</dd> <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> - <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> est terminée.</dd> + <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une <a href="/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> est terminée.</dd> <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.</dd> </dl> diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.html b/files/fr/web/api/globaleventhandlers/onabort/index.html index 48bf36f069..746e9fa76e 100644 --- a/files/fr/web/api/globaleventhandlers/onabort/index.html +++ b/files/fr/web/api/globaleventhandlers/onabort/index.html @@ -11,15 +11,13 @@ translation_of: Web/API/GlobalEventHandlers/onabort --- <div>{{ ApiRef("HTML DOM") }}</div> -<h2 id="Summary" name="Summary">Sommaire</h2> - <p>Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).</p> <p>Bien que le <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document">standard pour l'abandon d'un chargement de document</a> soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une <code>window</code> qui déclencherait un appel à <code>onabort</code>.</p> <p>À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises <code>img</code>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">window.onabort =<em> refFonc</em> </pre> @@ -28,15 +26,15 @@ translation_of: Web/API/GlobalEventHandlers/onabort <li><code>refFonc</code> : référence à une fonction</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">window.onabort = function() { alert("Chargement interrompu."); }</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.html b/files/fr/web/api/globaleventhandlers/onauxclick/index.html index 2fe7737bd6..edf6be44f6 100644 --- a/files/fr/web/api/globaleventhandlers/onauxclick/index.html +++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.html @@ -14,13 +14,13 @@ translation_of: Web/API/GlobalEventHandlers/onauxclick <p>L'événement <code>auxclick</code> est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.</p> -<div class="blockIndicator note"> -<p><strong>Note:</strong> Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.</p> +<div class="note"> +<p><strong>Note :</strong> Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>target</var>.onauxclick = <var>functionRe<em>f</em></var>; +<pre class="syntaxbox"><var>target</var>.onauxclick = <var>functionRe<em>f</em></var>; </pre> <h3 id="Valeur">Valeur</h3> @@ -33,7 +33,7 @@ translation_of: Web/API/GlobalEventHandlers/onauxclick <p>Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et <code>onauxclick</code>. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (<a href="https://mdn.github.io/dom-examples/auxclick/">voir en direct sur GitHub</a>; également <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">voir le code source</a>).</p> -<pre class="brush: js notranslate">var button = document.querySelector('button'); +<pre class="brush: js">var button = document.querySelector('button'); var html = document.querySelector('html'); function random(number) { @@ -51,12 +51,12 @@ button.onauxclick = function() { }</pre> <div class="note"> -<p><strong>Note</strong>: Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire<code> onauxclick</code> est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.</p> +<p><strong>Note :</strong> Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire<code> onauxclick</code> est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.</p> </div> <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.html b/files/fr/web/api/globaleventhandlers/onblur/index.html index c4d87d1e82..3c668a51eb 100644 --- a/files/fr/web/api/globaleventhandlers/onblur/index.html +++ b/files/fr/web/api/globaleventhandlers/onblur/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/GlobalEventHandlers/onblur --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onblur</strong> renvoie le gestionnaire de l'évènement <code>blur</code> (perte de focus) pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">element.onblur = nomFonctionUtilisateur; </pre> @@ -26,7 +26,7 @@ translation_of: Web/API/GlobalEventHandlers/onblur }; </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <p>Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.</p> @@ -49,13 +49,13 @@ function afficherMessage() { </script> </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>blur</code> se déclenche lors de la perte de focus d'un élément.</p> <p>Microsoft Internet Explorer déclenche l'évènement <code>blur</code> sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.html b/files/fr/web/api/globaleventhandlers/onchange/index.html index e0e4aadf81..48920d3fb0 100644 --- a/files/fr/web/api/globaleventhandlers/onchange/index.html +++ b/files/fr/web/api/globaleventhandlers/onchange/index.html @@ -8,12 +8,12 @@ tags: translation_of: Web/API/GlobalEventHandlers/onchange --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <code>onchange</code> définit et renvoie le gestionnaire d'évènement <code>onChange</code> (modification) pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">element.onchange = code de gestion de l'évènement </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement <code>change</code> est implémenté dans Mozilla :</p> <pre> control.onfocus = focus; control.onblur = blur; @@ -27,10 +27,10 @@ translation_of: Web/API/GlobalEventHandlers/onchange } </pre> <p>Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement <code>change</code> si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements <code>focus</code> ou <code>blur</code>. De plus, l'évènement <code>change</code> se déclenche avant l'évènement <code>blur</code>. Ce comportement n'est pas le même que celui d'Internet Explorer.</p> -<h3 id="Specification" name="Specification">Specification</h3> +<h3 id="Specification">Specification</h3> <p>{{ DOM0() }}</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li> </ul> <p>{{ languages( { "en": "en/DOM/element.onchange" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.html b/files/fr/web/api/globaleventhandlers/onclick/index.html index 3d2ffb0150..b7935b47af 100644 --- a/files/fr/web/api/globaleventhandlers/onclick/index.html +++ b/files/fr/web/api/globaleventhandlers/onclick/index.html @@ -5,19 +5,19 @@ translation_of: Web/API/GlobalEventHandlers/onclick --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onclick</strong> représente le gestionnaire d'évènement onClick de l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <p><code><em>element</em>.onclick = <em>functionRef</em></code></p> -<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p> +<p>où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p> <p>Le paramètre fourni au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="brush: html"><!doctype html> <html> @@ -55,14 +55,14 @@ border: solid blue 2px; p.onclick = function() { alert("moot!"); }; </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>click</code> est déclenché lorsque l'utilisateur clique sur un élément.</p> <p>Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>Defini en <a class="external" href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p> +<p>Defini en <a href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p> <p>{{ languages( { "en": "en/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.html b/files/fr/web/api/globaleventhandlers/onclose/index.html index e7234b295e..757077c904 100644 --- a/files/fr/web/api/globaleventhandlers/onclose/index.html +++ b/files/fr/web/api/globaleventhandlers/onclose/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/GlobalEventHandlers/onclose <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.html b/files/fr/web/api/globaleventhandlers/ondblclick/index.html index 005a6e7264..a12610afcf 100644 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.html +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.html @@ -8,9 +8,9 @@ tags: translation_of: Web/API/GlobalEventHandlers/ondblclick --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>ondblclick</b> renvoie le gestionnaire d'évènement <code>dblclick</code> de l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">element.ondblclick = nomDeFonction; </pre> <ul> @@ -18,7 +18,7 @@ translation_of: Web/API/GlobalEventHandlers/ondblclick </ul> <pre class="eval">element.ondblclick = function() { alert("Évènement dblclick détecté"); }; </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><html> <head> @@ -53,8 +53,8 @@ border: solid blue 2px; </body> </html> </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>dblclick</code> est déclenché lorsque l'utilisateur double-clique sur un élément.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.ondblclick" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.html b/files/fr/web/api/globaleventhandlers/onerror/index.html index 192f28e23c..203d536eb2 100644 --- a/files/fr/web/api/globaleventhandlers/onerror/index.html +++ b/files/fr/web/api/globaleventhandlers/onerror/index.html @@ -28,11 +28,11 @@ translation_of: Web/API/GlobalEventHandlers/onerror <p>Paramètres de la fonction :</p> <ul> - <li><code>message </code>: message d'erreur (chaîne ou objet évènement). Disponible comme <code>event</code> (sic !) dans le gestionnaire de HTML <code>onerror=""</code> et aussi comme objet évènement lors de l'envoi d'un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">Event</a> à <code>window,</code> auquel cas les autres arguments ne seront pas fournis (au contraire de <a href="https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent">ErrorEvent</a>, qui amène le passage de l'ensemble complet des arguments à <code>window.onerror</code>, tandis que seul l'objet d'évènement d'erreur est passé aux gestionnaires de<code> window.addEventListener('error'))</code></li> + <li><code>message </code>: message d'erreur (chaîne ou objet évènement). Disponible comme <code>event</code> (sic !) dans le gestionnaire de HTML <code>onerror=""</code> et aussi comme objet évènement lors de l'envoi d'un <a href="/en-US/docs/Web/API/Event">Event</a> à <code>window,</code> auquel cas les autres arguments ne seront pas fournis (au contraire de <a href="/en-US/docs/Web/API/ErrorEvent">ErrorEvent</a>, qui amène le passage de l'ensemble complet des arguments à <code>window.onerror</code>, tandis que seul l'objet d'évènement d'erreur est passé aux gestionnaires de<code> window.addEventListener('error'))</code></li> <li>source : l'URL du script où l'erreur a été déclenchée (chaîne)</li> <li>noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)</li> <li>nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)</li> - <li>erreur : un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (objet) {{gecko_minversion_inline("31.0")}}</li> + <li>erreur : un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (objet) {{gecko_minversion_inline("31.0")}}</li> </ul> <h3 id="element.onerror_(et_window.addEventListener('error'))">element.onerror (et <code>window.addEventListener('error')</code>)</h3> @@ -43,7 +43,7 @@ translation_of: Web/API/GlobalEventHandlers/onerror <h2 id="Notes">Notes</h2> -<p>Quand une erreur de syntaxe<strong>(?)</strong> se produit dans un script chargé à partir d'une <a href="/en-US/docs/Web/Security/Same-origin_policy">origine différente</a>, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que <code><strong>"Script error"</strong></code>. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut <code>{{htmlattrxref("crossorigin","script")}}</code> de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.</p> +<p>Quand une erreur de syntaxe<strong>(?)</strong> se produit dans un script chargé à partir d'une <a href="/en-US/docs/Web/Security/Same-origin_policy">origine différente</a>, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que <code><strong>"Script error"</strong></code>. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut <code>{{htmlattrxref("crossorigin","script")}}</code> de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.</p> <pre><code>window.onerror = function (msg, url, noLigne, noColonne, erreur) { var chaine = msg.toLowerCase(); @@ -69,7 +69,7 @@ translation_of: Web/API/GlobalEventHandlers/onerror <h2 id="Spécifications">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.html b/files/fr/web/api/globaleventhandlers/onfocus/index.html index 98485a92d9..ee735aeeba 100644 --- a/files/fr/web/api/globaleventhandlers/onfocus/index.html +++ b/files/fr/web/api/globaleventhandlers/onfocus/index.html @@ -8,14 +8,14 @@ tags: translation_of: Web/API/GlobalEventHandlers/onfocus --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onfocus</b> renvoie le gestionnaire de l'évènement <code>focus</code> pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onfocus </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.</p> <p>Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onfocus" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.html b/files/fr/web/api/globaleventhandlers/onkeydown/index.html index 3753a32bae..ba7fb146e4 100644 --- a/files/fr/web/api/globaleventhandlers/onkeydown/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.html @@ -8,16 +8,16 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeydown --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onkeydown</strong> définit et renvoie le gestionnaire d'évènement <code>keydown</code> de l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onkeydown </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>keydown</code> se déclenche lorsque qu'une touche du clavier est enfoncée.</p> -<p>À différencier de <a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code> même s'ils se produisent quasiment au même instant)</p> -<h3 id="Notes" name="Notes">Voir aussi</h3> -<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<p>À différencier de <a href="/fr/DOM/element.onkeypress">onkeypress</a> qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code> même s'ils se produisent quasiment au même instant)</p> +<h3 id="Notes">Voir aussi</h3> +<p><a href="/fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeyup">onkeyup</a></p> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.html b/files/fr/web/api/globaleventhandlers/onkeypress/index.html index 83c4c911bc..abbf50f4ac 100644 --- a/files/fr/web/api/globaleventhandlers/onkeypress/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.html @@ -8,16 +8,16 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeypress --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onkeypress</strong> définit et renvoie le gestionnaire d'évènement <code>keypress</code> de l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">element.onkeypress = code de gestion de l'évènement </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>keypress</code> se déclenche lorsque qu'une touche du clavier est pressée.</p> -<p>À différencier de <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code>, même s'il se produisent quasiment au même instant)</p> -<h3 id="Notes" name="Notes">Voir aussi</h3> -<p><a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<p>À différencier de <a href="/fr/DOM/element.onkeydown">onkeydown</a> qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code>, même s'il se produisent quasiment au même instant)</p> +<h3 id="Notes">Voir aussi</h3> +<p><a href="/fr/DOM/element.onkeydown">onkeydown</a> <a href="/fr/DOM/element.onkeyup">onkeyup</a></p> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onkeypress" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.html b/files/fr/web/api/globaleventhandlers/onkeyup/index.html index 6c27a7cc02..ae3465af7c 100644 --- a/files/fr/web/api/globaleventhandlers/onkeyup/index.html +++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.html @@ -6,18 +6,18 @@ tags: translation_of: Web/API/GlobalEventHandlers/onkeyup --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onkeyup</strong> renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <p>code de gestion de l'évènement = element.onkeyup</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval"> <input type="text" onKeyUp="cleRelachee(event)"> <script>function cleRelachee(evt){ alert(evt.keyCode) }</script> </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>keyup</code> se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.</p> -<h3 id="Notes" name="Notes">Voir aussi</h3> -<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a></p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Notes">Voir aussi</h3> +<p><a href="/fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeydown">onkeydown</a></p> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>Ne fait partie d'aucune spécification.</p> <p>{{ languages( { "en": "en/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onload/index.html b/files/fr/web/api/globaleventhandlers/onload/index.html index d8a5227c92..e1c9c1d4c7 100644 --- a/files/fr/web/api/globaleventhandlers/onload/index.html +++ b/files/fr/web/api/globaleventhandlers/onload/index.html @@ -6,22 +6,19 @@ tags: translation_of: Web/API/GlobalEventHandlers/onload --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Un gestionnaire d'évènement pour l'évènement <code>load</code> (chargement) de la fenêtre.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre>window.onload = refFct; </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>refFct</code> est une référence à une fonction.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre>window.onload = init; </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>load</code> se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> -<p>Ne fait partie d'aucune spécification.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> +<p>Ne fait partie d'aucune spécification.</p>
\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.html b/files/fr/web/api/globaleventhandlers/onmousedown/index.html index 8da0125fb7..f0f533569d 100644 --- a/files/fr/web/api/globaleventhandlers/onmousedown/index.html +++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmousedown --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onmousedown</b> renvoie le gestionnaire de l'évènement <code>mousedown</code> (bouton de la souris enfoncé) pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onMouseDown </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>mousedown</code> se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.html b/files/fr/web/api/globaleventhandlers/onmousemove/index.html index b89d701db6..0521bff2f8 100644 --- a/files/fr/web/api/globaleventhandlers/onmousemove/index.html +++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.html @@ -9,33 +9,29 @@ translation_of: Web/API/GlobalEventHandlers/onmousemove --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onmousemove</strong> renvoie le code de gestion de l'évènement <code>mousemove</code> pour l'élément courant.</p> -<h3 id="Syntax" name="Syntax">Syntax</h3> +<h3 id="Syntax">Syntax</h3> <p><code><em>element</em>.onmousemove = <em>functionRef</em></code></p> -<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p> +<p>où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p> <p>Le paramètre fournit au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.</p> -<h3 id="Notes" name="Notes">Exemple</h3> +<h3 id="Notes">Exemple</h3> <pre class="brush: js">document.body.onmousemove = event => { // Suivi de la position de la souris dans la console console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`); }</pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>mousemove</code> se déclenche lorsque l'utilisateur déplace la souris.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/element.onmousemove", "pl": "pl/DOM/element.onmousemove" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.html b/files/fr/web/api/globaleventhandlers/onmouseout/index.html index ac9fb708bd..e1ef1192aa 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseout/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseout --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onmouseout</b> renvoie le code de gestion de l'évènement <code>mouseout</code> (sortie du pointeur de la souris) pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onmouseout </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>mouseout</code> se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément <code>image</code> correspondant).</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onmouseout" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.html b/files/fr/web/api/globaleventhandlers/onmouseover/index.html index f5f46d7ac9..cd357f569f 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseover/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.html @@ -6,15 +6,12 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseover --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onmouseover</b> renvoie le code de gestion de l'évènement <code>onMouseOver</code> pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onmouseover </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>mouseover</code> se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> -<p>Ne fait partie d'aucune spécification.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/element.onmouseover", "pl": "pl/DOM/element.onmouseover" } ) }}</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> +<p>Ne fait partie d'aucune spécification.</p>
\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.html b/files/fr/web/api/globaleventhandlers/onmouseup/index.html index c283e36862..b50f92fa88 100644 --- a/files/fr/web/api/globaleventhandlers/onmouseup/index.html +++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onmouseup --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onmouseup</b> renvoie le gestionnaire de l'évènement <code>mouseup</code> (bouton de la souris relaché) pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">code de gestion de l'évènement = element.onMouseUp </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>mouseup</code> se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.onmouseup" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.html b/files/fr/web/api/globaleventhandlers/onreset/index.html index 6b6a4569e1..8fd9028eb7 100644 --- a/files/fr/web/api/globaleventhandlers/onreset/index.html +++ b/files/fr/web/api/globaleventhandlers/onreset/index.html @@ -13,18 +13,18 @@ translation_of: Web/API/GlobalEventHandlers/onreset <p>La propriété <code><strong>GlobalEventHandlers.onreset</strong></code> contient un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) déclenché quand un évènement {{event("reset")}} est reçu.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre>window.onreset = funcRef; </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>funcRef</code> est une référence à une fonction.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval"><html> <script> @@ -47,13 +47,13 @@ function hit() { </html> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>L'évènement <code>reset</code> est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<code><input type="reset"/></code>).</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.html b/files/fr/web/api/globaleventhandlers/onresize/index.html index 635fa2d4c4..1e4ca16f5c 100644 --- a/files/fr/web/api/globaleventhandlers/onresize/index.html +++ b/files/fr/web/api/globaleventhandlers/onresize/index.html @@ -9,13 +9,13 @@ translation_of_original: Web/API/Element.onresize --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <strong>onresize</strong> renvoie le code de gestion <code>onresize</code> de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.</p> <p>Seul l'objet <var>window</var> possède un évènement <code>onresize</code>.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">// attribue une fonction anonyme à onresize window.onresize = function(){alert('Redimensionnement de la fenêtre')} @@ -31,7 +31,7 @@ alert(window.onresize); <p>Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> @@ -56,11 +56,11 @@ window.onresize = sayHi; </body> </html></pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet <code>window</code> possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.html b/files/fr/web/api/globaleventhandlers/onscroll/index.html index 5afe8002a1..a8e1f6bbd2 100644 --- a/files/fr/web/api/globaleventhandlers/onscroll/index.html +++ b/files/fr/web/api/globaleventhandlers/onscroll/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/GlobalEventHandlers/onscroll --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>La propriété <b>onscroll</b> renvoie le gestionnaire d'évènement <code>scroll</code> pour l'élément courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>code de gestion d'évènement</i> = element.onscroll; </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>L'évènement <code>scroll</code> se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>DOM Level 0. Ne fait partie d'aucune spécification.</p> <p>{{ languages( { "en": "en/DOM/element.onscroll" } ) }}</p> diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.html b/files/fr/web/api/globaleventhandlers/onselect/index.html index 862980360f..fea6ba3dde 100644 --- a/files/fr/web/api/globaleventhandlers/onselect/index.html +++ b/files/fr/web/api/globaleventhandlers/onselect/index.html @@ -15,9 +15,9 @@ translation_of: Web/API/GlobalEventHandlers/onselect <p>L'événement <code>select</code> n'est déclenché qu'après que du texte à l'intérieur d'un <code>{{HtmlElement('input/text', '<input type="text">')}}</code> ou d'un {{HtmlElement("textarea")}} a été sélectionné.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>target</em>.onselect = <em>functionRef</em>; +<pre class="syntaxbox"><em>target</em>.onselect = <em>functionRef</em>; </pre> <h3 id="Valeur">Valeur</h3> @@ -30,12 +30,12 @@ translation_of: Web/API/GlobalEventHandlers/onselect <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><textarea>Essayez de sélectionner du texte dans cet élément.</textarea> +<pre class="brush: html"><textarea>Essayez de sélectionner du texte dans cet élément.</textarea> <p id="log"></p></pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">function enregistrerSelection(event) { +<pre class="brush: js">function enregistrerSelection(event) { const log = document.getElementById('log'); const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd); log.textContent = `Vous avez sélectionné : ${selection}`; @@ -48,9 +48,9 @@ textarea.onselect = enregistrerSelection;</pre> <p>{{EmbedLiveSample("Examples")}}</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html index e364ee08d6..00be813af4 100644 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.html +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.html @@ -16,11 +16,11 @@ original_slug: Web/API/Element/onwheel <h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval line-numbers language-html"><code class="language-html">element.onwheel = function() { .. }</code></pre> +<pre class="brush: js">element.onwheel = function() { .. }</pre> <h2 id="Spécification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html index bb33724fa5..bd5d8fd41b 100644 --- a/files/fr/web/api/headers/index.html +++ b/files/fr/web/api/headers/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Headers --- <div>{{APIRef("Fetch API")}}</div> -<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme<span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</span></p> +<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</p> <p>Pour des raisons de sécurité, les <code>Headers</code> ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p> @@ -25,7 +25,7 @@ translation_of: Web/API/Headers <p>Un objet implémentant <code>Headers</code> peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> est équivalent à <code>for (var p of myHeaders.entries())</code>.</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p> </div> <h2 id="Constructeur">Constructeur</h2> @@ -59,15 +59,15 @@ translation_of: Web/API/Headers </dl> <div class="note"> -<p><strong>Note</strong>: Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p> +<p><strong>Note :</strong> Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p> </div> <div class="note"> -<p><strong>Note</strong>: Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p> +<p><strong>Note :</strong> Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p> </div> <div class="note"> -<p><strong>Note</strong>: Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p> +<p><strong>Note :</strong> Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p> </div> <h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> @@ -81,15 +81,15 @@ translation_of: Web/API/Headers <p>Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur <code>Headers()</code>, ajoutons un nouvel header à ce dernier en utilisant <code>append()</code>, puis retournons la valeur du header en utilisant <code>get()</code> :</p> -<pre class="brush: js notranslate">var monHeader = new Headers(); +<pre class="brush: js">var monHeader = new Headers(); monHeader.append('Content-Type', 'text/xml'); monHeader.get('Content-Type') // doit retourner 'text/xml' </pre> -<p>La même chose peut être accomplie en passant par un array d'array <span class="tlid-translation translation" lang="fr"><span title="">un littéral d'objet au constructeur.</span></span></p> +<p>La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur.</p> -<pre class="brush: js notranslate">var mesHeaders = new Headers({ +<pre class="brush: js">var mesHeaders = new Headers({ 'Content-Type': 'text/xml' }); diff --git a/files/fr/web/api/history/index.html b/files/fr/web/api/history/index.html index 615def5256..dcc99caefd 100644 --- a/files/fr/web/api/history/index.html +++ b/files/fr/web/api/history/index.html @@ -8,9 +8,9 @@ translation_of: Web/API/History --- <p>{{APIRef}}</p> -<p>L'interface<span style="line-height: 1.5;"> </span><strong style="line-height: 1.5;"><code>History</code></strong><span style="line-height: 1.5;"> permet de manipuler</span> l'historique de navigation du navigateur<span style="line-height: 1.5;">, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.</span></p> +<p>L'interface <strong><code>History</code></strong> permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.</p> -<h2 id="Propriétés" style="line-height: 30px;">Propriétés</h2> +<h2 id="Propriétés">Propriétés</h2> <p><em>L'interface <code>History</code></em><em> n'hérite d'aucune propriété.</em></p> @@ -34,21 +34,23 @@ translation_of: Web/API/History <dl> <dt>{{domxref("History.back()")}}</dt> <dd>Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de <code>history.go(-1)</code>. - <div class="note"><strong>Note:</strong> Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div> + <div class="note"> + <p><strong>Note:</strong> Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</p> + </div> </dd> <dt>{{domxref("History.forward()")}}</dt> <dd>Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de <code>history.go(1)</code>. - <div class="note"><strong>Note:</strong> Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div> + <div class="note"><p><strong>Note:</strong> Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</p></div> </dd> <dt>{{domxref("History.go()")}}</dt> - <dd>Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple <code>-1</code> pour la page précédente ou <code>1</code> pour la page suivante. Lorsque <code><em>integerDelta</em></code> sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler <code>go()</code> sans paramètres ou un paramètre autre qu'<span style="line-height: 1.5;">un </span><code style="font-style: normal; line-height: 1.5;">Integer</code><span style="line-height: 1.5;"> n‘a aucun effet (sauf par Internet Explorer, </span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx" style="line-height: 1.5;" title="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">qui supporte les URLs en String comme paramètre</a><span style="line-height: 1.5;">).</span></dd> + <dd>Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple <code>-1</code> pour la page précédente ou <code>1</code> pour la page suivante. Lorsque <code><em>integerDelta</em></code> sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler <code>go()</code> sans paramètres ou un paramètre autre qu'un <code>Integer</code> n‘a aucun effet (sauf par Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">qui supporte les URLs en String comme paramètre</a>).</dd> <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt> - <dd>Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>. - <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div> + <dd>Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a>. + <div class="note"><p><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</p></div> </dd> <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt> - <dd>Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>. - <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div> + <dd>Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a>. + <div class="note"><p><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</p></div> </dd> </dl> diff --git a/files/fr/web/api/history/length/index.html b/files/fr/web/api/history/length/index.html index aae76e8157..bbed2b4976 100644 --- a/files/fr/web/api/history/length/index.html +++ b/files/fr/web/api/history/length/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/History/length --- <div>{{APIRef("History API")}}</div> -<p><span class="seoSummary">La propriété en lecture seule <code><strong>History.length</strong></code> retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante.</span> Par exemple, pour une page dans un nouvel onglet, la propriété retournera <code>1</code>.</p> +<p>La propriété en lecture seule <code><strong>History.length</strong></code> retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera <code>1</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html index c7c7505a00..2376be43ae 100644 --- a/files/fr/web/api/history_api/example/index.html +++ b/files/fr/web/api/history_api/example/index.html @@ -5,9 +5,10 @@ translation_of: Web/API/History_API/Example original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example --- <p>Voici un exemple de site web AJAX composé uniquement de trois pages (<em>page_un.php</em>, <em>page_deux.php</em> et <em>page_trois.php</em>). Pour tester cet exemple, merci de créer les fichiers suivants :</p> + <p><strong>page_un.php</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: php"><?php + +<pre class="brush: php"><?php $page_title = "Page un"; $as_json = false; @@ -51,10 +52,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example } ?> </pre> -</div> + <p><strong>page_deux.php</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: php"><?php + +<pre class="brush: php"><?php $page_title = "Page deux"; $as_json = false; @@ -98,10 +99,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example } ?> </pre> -</div> + <p><strong>page_trois.php</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: php"><?php + +<pre class="brush: php"><?php $page_title = "Page trois"; $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; @@ -136,8 +137,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example } ?> </pre> -</div> + <p><strong>css/style.css</strong>:</p> + <pre class="brush: css">#ajax-loader { position: fixed; display: table; @@ -175,8 +177,8 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example <link rel="stylesheet" href="css/style.css" /> </pre> <p><strong>js/ajax_nav.js</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> - <pre class="brush: js">"use strict"; + +<pre class="brush: js">"use strict"; var ajaxRequest = new (function () { @@ -382,10 +384,12 @@ var ajaxRequest = new (function () { })(); </pre> + +<div class="note"> + <p><strong>Note :</strong> <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à </strong><strong><a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong> + </p> </div> -<div class="note" id="const_compatibility"> - <strong>Note:</strong> <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à </strong><strong><a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong></div> -<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p> +<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p> <h2 id="Lire_également">Lire également</h2> <ul> <li>{{ domxref("window.history") }}</li> diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html index 67b40d67f2..6fc89eae15 100644 --- a/files/fr/web/api/history_api/index.html +++ b/files/fr/web/api/history_api/index.html @@ -49,7 +49,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur <pre class="brush: js">var numberOfEntries = window.history.length; </pre> -<div class="note"><strong>Note:</strong> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode <code>go()</code>; ce comportement est non standard et non supporté par Gecko.</div> +<div class="note"> + <p><strong>Note :</strong> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode <code>go()</code>; ce comportement est non standard et non supporté par Gecko.</p> +</div> <h2 id="Ajouter_et_modifier_des_entrées_de_l'historique">Ajouter et modifier des entrées de l'historique</h2> @@ -57,21 +59,21 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur <p>HTML5 a introduit les méthodes <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()">history.pushState()</a> et <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()">history.replaceState()</a>, qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a>.</p> -<p>L'utilisation de <code>history.pushState()</code> change le référent créé habituellement dans l'en-tête HTTP pour les objets <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est <code>this</code> au moment de la création de l'objet <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p> +<p>L'utilisation de <code>history.pushState()</code> change le référent créé habituellement dans l'en-tête HTTP pour les objets <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est <code>this</code> au moment de la création de l'objet <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p> -<h3 id="Exemple_de_la_méthode_pushState()"><a id="Exemple de la méthode pushState()" name="Exemple de la méthode pushState()"></a>Exemple de la méthode pushState()</h3> +<h3 id="Exemple_de_la_méthode_pushState()">Exemple de la méthode pushState()</h3> -<p>Supposons que <span class="nowiki">http://mozilla.org/foo.html</span> exécute la séquence JavaScript suivante :</p> +<p>Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :</p> <pre class="brush: js">var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html"); </pre> -<p>Cela va provoquer l'apparition dans la barre de navigation de <span class="nowiki">http://mozilla.org/bar.html</span>, mais ne provoquera pas le chargement effectif de <code>bar.html</code> ni même le test d'existence de <code>bar.html</code>.</p> +<p>Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de <code>bar.html</code> ni même le test d'existence de <code>bar.html</code>.</p> -<p>Supposons à présent que l'utilisateur accède à la page <span class="nowiki">http://google.com</span>, puis clique sur l'icône "Recul". La barre de navigation va alors afficher <span class="nowiki">http://mozilla.org/bar.html</span>, et si vous lisez l'<code>history.state</code>, vous obtiendrez le <code>stateObj</code>. L'événement <code>popstate</code> ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à <code>bar.html</code>.</p> +<p>Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'<code>history.state</code>, vous obtiendrez le <code>stateObj</code>. L'événement <code>popstate</code> ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à <code>bar.html</code>.</p> -<p>Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en <span class="nowiki">http://mozilla.org/foo.html</span> et le document va recevoir un autre événement <code>popstate</code>, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement <code>popstate</code>.</p> +<p>Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement <code>popstate</code>, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement <code>popstate</code>.</p> <h3 id="La_méthode_pushState()">La méthode pushState()</h3> @@ -90,7 +92,9 @@ history.pushState(stateObj, "page 2", "bar.html"); </li> </ul> -<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div> +<div class="note"> + <p><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</p> +</div> <p>On peut assimiler l'appel à <code>pushState()</code> à l'affectation <code>window.location = "#foo"</code>, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais <code>pushState()</code> a quelques avantages :</p> @@ -102,7 +106,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <p>Notez que <code>pushState()</code> n'entraîne jamais le déclenchement d'un événement <code>hashchange</code>, même si la nouvelle URL diffère de l'ancienne seulement par son hash.</p> -<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL">XUL</a> elle crée l'élément XUL spécifié.</p> +<p>Dans un document <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a> elle crée l'élément XUL spécifié.</p> <p>Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom <code>null</code>. </p> @@ -112,18 +116,20 @@ history.pushState(stateObj, "page 2", "bar.html"); <p><code>replaceState()</code> est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.</p> -<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div> +<div class="note"> + <p><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</p> +</div> <h3 id="Exemple_de_la_méthode_replaceState()">Exemple de la méthode replaceState()</h3> -<p><span id="result_box" lang="fr"><span>Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :</span></span></p> +<p>Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> <span class="string token">"bar"</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> -history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 2"</span><span class="punctuation token">,</span> <span class="string token">"bar.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html");</pre> <p>L'explication des deux lignes ci-dessus peut être trouvée dans la section "<a href="#">Exemple de la méthode pushState()</a>". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 3"</span><span class="punctuation token">,</span> <span class="string token">"bar2.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html");</pre> <p>Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas <code>bar2.html</code> ou même vérifiera que <code>bar2.html</code> existe.</p> @@ -137,7 +143,7 @@ history<span class="punctuation token">.</span><span class="function token">push <h3 id="Lire_l'état_courant">Lire l'état courant</h3> -<p>Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec <code>pushState()</code> ou <code>replaceState()</code>) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> , mais pas l'événement <span style="font-family: courier new;">popstate</span>.</span> Néanmoins, si vous lisez la propriété <span style="font-family: courier new;">history.state</span>, vous récupèrerez l'objet état que vous auriez obtenu si un événement <span style="font-family: courier new;">popstate</span> avait été déclenché.</p> +<p>Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec <code>pushState()</code> ou <code>replaceState()</code>) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement onload , mais pas l'événement popstate. Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.</p> <p>Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement <code>popstate</code> en utilisant la propriété <code>history.state</code> comme ceci :</p> @@ -146,7 +152,7 @@ history<span class="punctuation token">.</span><span class="function token">push <h2 id="Exemples">Exemples</h2> -<p>Pour un exemple comple de site web AJAX, vous pouvez voir : <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a>.</p> +<p>Pour un exemple comple de site web AJAX, vous pouvez voir : <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example">Exemple de navigation en Ajax</a>.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html index 8e95bc78bb..d6349a6d4b 100644 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -6,9 +6,11 @@ original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement --- <p>Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.</p> -<p class="note">Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.</p> +<div class="note"> + <p><strong>Note :</strong> Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.</p> +</div> -<h2 id="draggableattribute" name="draggableattribute">L'attribut draggable</h2> +<h2 id="draggableattribute">L'attribut draggable</h2> <p>Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.</p> @@ -40,7 +42,7 @@ original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement <p> </p> -<h2 id="dragstart" name="dragstart">Démarrer une opération de glissement</h2> +<h2 id="dragstart">Démarrer une opération de glissement</h2> <p>Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut <code>ondragstart</code>.</p> @@ -51,26 +53,26 @@ original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement <p>Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.</p> -<h2 id="dragdata" name="dragdata">Donnée de glissement</h2> +<h2 id="dragdata">Donnée de glissement</h2> -<p>Tous les événements de glissement ont une propriété appelée <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer" title="Fr/GlisserDéposer/DataTransfer">dataTransfer</a> utilisée pour contenir la donnée de glissement.</p> +<p>Tous les événements de glissement ont une propriété appelée <a href="/Fr/GlisserD%C3%A9poser/DataTransfer">dataTransfer</a> utilisée pour contenir la donnée de glissement.</p> <p>Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.</p> -<p>La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements <code>dragenter</code> et <code>dragover</code> au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a>. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.</p> +<p>La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements <code>dragenter</code> et <code>dragover</code> au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a>. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.</p> -<p>Les types MIME habituels sont <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> ou <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image" title="Fr/GlisserDéposer/Types de glissement recommandés#image">image/jpeg</a>, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement" title="Fr/GlisserDéposer/Types de glissement">cette page</a>.</p> +<p>Les types MIME habituels sont <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> ou <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image">image/jpeg</a>, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement">cette page</a>.</p> -<p>Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>. La donnée n'en sera qu'une représentation sous la forme d'un texte.</p> +<p>Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a>. La donnée n'en sera qu'une représentation sous la forme d'un texte.</p> -<p>Pour définir une donnée dans un dataTransfer, utilisez la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a>. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :</p> +<p>Pour définir une donnée dans un dataTransfer, utilisez la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData">setData</a>. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :</p> <pre>event.dataTransfer.setData("text/plain", "Texte à glisser"); </pre> -<p>Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>.</p> +<p>Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a>.</p> -<p>Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a> plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.</p> +<p>Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData">setData</a> plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.</p> <pre>var dt = event.dataTransfer; dt.setData("application/x-bookmark", bookmarkString); @@ -80,20 +82,20 @@ dt.setData("text/plain", "http://www.mozilla.org"); <p>Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.</p> -<p>Notez que cet exemple, <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> et <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.</p> +<p>Notez que cet exemple, <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a> et <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.</p> <p>Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.</p> -<p>Vous pouvez effacer la donnée en utilisant la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a>, avec un seul argument qui est le type de la donnée à effacer.</p> +<p>Vous pouvez effacer la donnée en utilisant la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData">clearData</a>, avec un seul argument qui est le type de la donnée à effacer.</p> <pre>event.dataTransfer.clearData("text/uri-list"); </pre> -<p>L'argument de type de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a> est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.</p> +<p>L'argument de type de la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData">clearData</a> est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.</p> -<h2 id="dragfeedback" name="dragfeedback">Définir l'image filigrane d'un glissement</h2> +<h2 id="dragfeedback">Définir l'image filigrane d'un glissement</h2> -<p>Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a>.</p> +<p>Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage">setDragImage</a>.</p> <pre>event.dataTransfer.setDragImage(image, xOffset, yOffset); </pre> @@ -121,13 +123,13 @@ dt.setData("text/plain", "http://www.mozilla.org"); <p>Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.</p> -<p>Les deuxième et troisième arguments de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a> sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.</p> +<p>Les deuxième et troisième arguments de la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage">setDragImage</a> sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.</p> -<h2 id="drageffects" name="drageffects">Effets du glissement</h2> +<h2 id="drageffects">Effets du glissement</h2> <p>Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération <code>copy</code> indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération <code>move</code> indique que la donnée glissée sera déplacée, et l'opération <code>link</code> indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.</p> -<p>Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> dans un scrutateur d'événement <code>dragstart</code>.</p> +<p>Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> dans un scrutateur d'événement <code>dragstart</code>.</p> <pre>event.dataTransfer.effectAllowed = "copy"; </pre> @@ -153,15 +155,15 @@ dt.setData("text/plain", "http://www.mozilla.org"); <dd>Copie, déplacement ou lien</dd> </dl> -<p>Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.</p> +<p>Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a>, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.</p> -<p>Pendant une opération de glissement, un scrutateur pour les événements <code>dragenter</code> ou <code>dragover</code> peut tester la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> afin de voir quelles opérations sont autorisées. La propriété associée <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> sont <code>none</code>, <code>copy</code>, <code>move</code> ou <code>link</code>. Il n'y a pas de combinaison pour cette propriété.</p> +<p>Pendant une opération de glissement, un scrutateur pour les événements <code>dragenter</code> ou <code>dragover</code> peut tester la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> afin de voir quelles opérations sont autorisées. La propriété associée <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> sont <code>none</code>, <code>copy</code>, <code>move</code> ou <code>link</code>. Il n'y a pas de combinaison pour cette propriété.</p> -<p>Pour les événements <code>dragenter</code> et <code>dragover</code>, la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.</p> +<p>Pour les événements <code>dragenter</code> et <code>dragover</code>, la propriété <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.</p> -<p>Vous pouvez modifier les propriétés <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> et <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> pendant les événements <code>dragenter</code> ou <code>dragover</code>, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété <code>copyMove</code> permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.</p> +<p>Vous pouvez modifier les propriétés <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> et <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> pendant les événements <code>dragenter</code> ou <code>dragover</code>, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété <code>copyMove</code> permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.</p> -<p>Vous pouvez modifier la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, sinon une valeur alternative sera attribuée.</p> +<p>Vous pouvez modifier la propriété <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a>, sinon une valeur alternative sera attribuée.</p> <pre>event.dataTransfer.effectAllowed = "copyMove"; event.dataTransfer.dropEffect = "copy"; @@ -171,19 +173,19 @@ event.dataTransfer.dropEffect = "copy"; <p>Vous pouvez utiliser la valeur <code>none</code> pour interdir tout dépôt à cet emplacement.</p> -<h2 id="droptargets" name="droptargets">Spécifier les cibles de dépôt</h2> +<h2 id="droptargets">Spécifier les cibles de dépôt</h2> <p>Un scrutateur pour les événements <code>dragenter</code> et <code>dragover</code> est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.</p> -<p>Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner <code>false</code> à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a>. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.</p> +<p>Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner <code>false</code> à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle <a href="/fr/DOM/event.preventDefault">event.preventDefault</a>. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.</p> <pre><div ondragover="return false"> <div ondragover="event.preventDefault()"> </pre> -<p>L'appel de la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> pendant les événements <code>dragenter</code> et <code>dragover</code> indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.</p> +<p>L'appel de la méthode <a href="/fr/DOM/event.preventDefault">event.preventDefault</a> pendant les événements <code>dragenter</code> et <code>dragover</code> indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode <a href="/fr/DOM/event.preventDefault">event.preventDefault</a> seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.</p> -<p>Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#types" title="fr/GlisserDéposer/DataTransfer#types">types</a> de l'objet <code>dataTransfer</code>. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.</p> +<p>Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les <a href="/fr/GlisserD%C3%A9poser/DataTransfer#types">types</a> de l'objet <code>dataTransfer</code>. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.</p> <pre>function doDragOver(event) { @@ -193,13 +195,13 @@ event.dataTransfer.dropEffect = "copy"; } </pre> -<p>Dans cet exemple, la méthode <code>contains</code> est utilisée pour vérifier si le type <a class="internal" href="/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.</p> +<p>Dans cet exemple, la méthode <code>contains</code> est utilisée pour vérifier si le type <a href="/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a> est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.</p> -<p>Vous pouvez également définir une propriété <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> ou <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect" title="fr/GlisserDéposer/DataTransfer#dropEffect">dropEffect</a> ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.</p> +<p>Vous pouvez également définir une propriété <a href="/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> ou <a href="/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect">dropEffect</a> ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.</p> -<h2 id="dropfeedback" name="dropfeedback">Retour d'information du dépôt</h2> +<h2 id="dropfeedback">Retour d'information du dépôt</h2> -<p>Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a>. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.</p> +<p>Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a>. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.</p> <p>De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe <code>-moz-drag-over</code>sur la cible du dépôt.</p> @@ -208,21 +210,21 @@ event.dataTransfer.dropEffect = "copy"; } </pre> -<p>Dans cet example, l'élement comportant la classe <code>droparea</code> va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">event.preventDefault</a> est appelé durant l'évenement <code>dragenter</code>. Il est à noter que vous devez annuler l'évenement <code>dragenter</code> de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement <code>dragover</code>.</p> +<p>Dans cet example, l'élement comportant la classe <code>droparea</code> va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode <a href="/en/DOM/event.preventDefault">event.preventDefault</a> est appelé durant l'évenement <code>dragenter</code>. Il est à noter que vous devez annuler l'évenement <code>dragenter</code> de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement <code>dragover</code>.</p> -<p>For more complex visual effects, you can also perform other operations during the <code>dragenter</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en/XUL/image" title="image">image</a> or <a href="/en/XUL/separator" title="separator">separator</a> element for example, and simply insert it into the document during the <code>dragenter</code> event.</p> +<p>For more complex visual effects, you can also perform other operations during the <code>dragenter</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en/XUL/image">image</a> or <a href="/en/XUL/separator">separator</a> element for example, and simply insert it into the document during the <code>dragenter</code> event.</p> -<p>The <code>dragover</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>dragover</code> event as well. You can use the event's <a href="/en/DOM/event.clientX" title="clientX">clientX</a> and <a href="/en/DOM/event.clientY" title="clientY">clientY</a> properties as with other mouse events to determine the location of the mouse pointer.</p> +<p>The <code>dragover</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>dragover</code> event as well. You can use the event's <a href="/en/DOM/event.clientX">clientX</a> and <a href="/en/DOM/event.clientY">clientY</a> properties as with other mouse events to determine the location of the mouse pointer.</p> <p>Finally, the <code>dragleave</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>-moz-drag-over</code> pseudoclass will be removed automatically. The <code>dragleave</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p> -<h2 id="drop" name="drop">Performing a Drop</h2> +<h2 id="drop">Performing a Drop</h2> <p>When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last <code>dragenter</code> or <code>dragover</code> event, then the drop will be successful, and a <code>drop</code> event will fire at the target. Otherwise, the drag operation is cancelled and no <code>drop</code> event is fired.</p> -<p>During the <code>drop</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property to determine which drag operation was desired.</p> +<p>During the <code>drop</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> property to determine which drag operation was desired.</p> -<p>As with all drag related events, the event's <code>dataTransfer</code> property will hold the data that is being dragged. The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method may be used to retrieve the data again.</p> +<p>As with all drag related events, the event's <code>dataTransfer</code> property will hold the data that is being dragged. The <a href="/En/DragDrop/DataTransfer#getData.28.29">getData</a> method may be used to retrieve the data again.</p> <pre>function onDrop(event) { @@ -232,13 +234,13 @@ event.dataTransfer.dropEffect = "copy"; } </pre> -<p>The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method takes one argument, the type of data to retrieve. It will return the string value that was set when the <a href="/En/DragDrop/DataTransfer#setData.28.29" title="setData">setData</a> was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a <code>dragover</code> event.</p> +<p>The <a href="/En/DragDrop/DataTransfer#getData.28.29">getData</a> method takes one argument, the type of data to retrieve. It will return the string value that was set when the <a href="/En/DragDrop/DataTransfer#setData.28.29">setData</a> was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a <code>dragover</code> event.</p> <p>In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p> -<p>In a web page, you should call the <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">preventDefault</a> method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.</p> +<p>In a web page, you should call the <a href="/en/DOM/event.preventDefault">preventDefault</a> method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.</p> -<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a>. You could then insert a link into the content.</p> +<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/En/DragDrop/Recommended_Drag_Types#link">text/uri-list</a>. You could then insert a link into the content.</p> <pre>function doDrop(event) { @@ -256,7 +258,7 @@ event.dataTransfer.dropEffect = "copy"; } </pre> -<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split" title="split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p> +<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/En/DragDrop/Recommended_Drag_Types#link">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p> <p>For simple cases, you can use the special type <code>URL</code> to just retrieve the first valid URL in the list. For example:</p> @@ -265,7 +267,7 @@ event.dataTransfer.dropEffect = "copy"; <p>This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.</p> -<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the <a href="/En/DragDrop/DataTransfer#types.28.29" title="types">types</a> property.</p> +<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the <a href="/En/DragDrop/DataTransfer#types.28.29">types</a> property.</p> <p>Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.</p> @@ -284,12 +286,12 @@ event.dataTransfer.dropEffect = "copy"; <p>This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.</p> -<h2 id="dragend" name="dragend">Finishing a Drag</h2> +<h2 id="dragend">Finishing a Drag</h2> -<p>Once the drag is complete, a <code>dragend</code> is fired at the source of the drag (the same element that received the <code>dragstart</code> event). This event will fire if the drag was successful or if it was cancelled. However, you can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> to determine what drop operation occurred.</p> +<p>Once the drag is complete, a <code>dragend</code> is fired at the source of the drag (the same element that received the <code>dragstart</code> event). This event will fire if the drag was successful or if it was cancelled. However, you can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> to determine what drop operation occurred.</p> -<p>If the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property has the value <code>none</code> during a <code>dragend</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The <a href="/En/DragDrop/DataTransfer#mozUserCancelled.28.29" title="dropEffect">mozUserCancelled</a> property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.</p> +<p>If the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> property has the value <code>none</code> during a <code>dragend</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The <a href="/En/DragDrop/DataTransfer#mozUserCancelled.28.29">mozUserCancelled</a> property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.</p> -<p>A drop can occur inside the same window or over another application. The <code>dragend</code> event will always fire regardless. The event's <a href="/en/DOM/event.screenX" title="screenX">screenX</a> and <a href="/en/DOM/event.screenY" title="screenY">screenY</a> properties will be set to the screen coordinate where the drop occurred.</p> +<p>A drop can occur inside the same window or over another application. The <code>dragend</code> event will always fire regardless. The event's <a href="/en/DOM/event.screenX">screenX</a> and <a href="/en/DOM/event.screenY">screenY</a> properties will be set to the screen coordinate where the drop occurred.</p> <p>After the <code>dragend</code> event has finished propagating, the drag and drop operation is complete.</p> diff --git a/files/fr/web/api/html_drag_and_drop_api/index.html b/files/fr/web/api/html_drag_and_drop_api/index.html index 8a41f5a36f..f9856ebd08 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.html +++ b/files/fr/web/api/html_drag_and_drop_api/index.html @@ -12,7 +12,9 @@ original_slug: Web/API/API_HTML_Drag_and_Drop --- <p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> -<p><span class="seoSummary"><strong>L'interface HTML <em>Drag and Drop</em></strong> (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.</span> L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.</p> +<p><strong>L'interface HTML <em>Drag and Drop</em></strong> (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.</p> + +<p>L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.</p> <p>Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.</p> @@ -41,12 +43,12 @@ original_slug: Web/API/API_HTML_Drag_and_Drop <tr> <td>{{event('dragend')}}</td> <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td> - <td>…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un déplacement</a>)</td> + <td>…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" >Terminer un déplacement</a>)</td> </tr> <tr> <td>{{event('dragenter')}}</td> <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td> - <td>…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">indiquer une cible de destination</a>).</td> + <td>…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#droptargets" >indiquer une cible de destination</a>).</td> </tr> <tr> <td>{{event('dragexit')}}</td> @@ -66,17 +68,19 @@ original_slug: Web/API/API_HTML_Drag_and_Drop <tr> <td>{{event('dragstart')}}</td> <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td> - <td>…l'utilisateur commence à déplacer un élément (voir <a href="/fr/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">démarrer une opération de glissement</a>).</td> + <td>…l'utilisateur commence à déplacer un élément (voir <a href="/fr/docs/DragDrop/Drag_Operations#dragstart" >démarrer une opération de glissement</a>).</td> </tr> <tr> <td>{{event('drop')}}</td> <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td> - <td>…un élément est déposé sur une cible valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">déposer un élément</a>).</td> + <td>…un élément est déposé sur une cible valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#drop" >déposer un élément</a>).</td> </tr> </tbody> </table> -<p class="note"><strong>Note :</strong> Les évènements <code>dragstart</code> et <code>dragend</code> ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.</p> +<div class="note"> + <p><strong>Note :</strong> Les évènements <code>dragstart</code> et <code>dragend</code> ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.</p> +</div> <h2 id="Interfaces">Interfaces</h2> @@ -101,11 +105,13 @@ original_slug: Web/API/API_HTML_Drag_and_Drop <p>La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.</p> -<p class="note"><strong>Note :</strong> {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.</p> +<div class="note"> + <p><strong>Note :</strong> {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.</p> +</div> <h3 id="Interfaces_spécifiques_à_Gecko">Interfaces spécifiques à Gecko</h3> -<p>Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir <a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a>. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble <a href="/fr/docs/Web/API/DataTransfer#Gecko_properties">des propriétés spécifique à Gecko</a> et <a href="/fr/docs/Web/API/DataTransfer#Gecko_methods">des méthodes spécifiques à Gecko</a>.</p> +<p>Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir <a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" >Glisser-déposer plusieurs objets</a>. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble <a href="/fr/docs/Web/API/DataTransfer#Gecko_properties">des propriétés spécifique à Gecko</a> et <a href="/fr/docs/Web/API/DataTransfer#Gecko_methods">des méthodes spécifiques à Gecko</a>.</p> <h2 id="Bases">Bases</h2> @@ -125,7 +131,7 @@ function dragstart_handler(ev) { <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément est déplaçable.</p> </pre> -<p>Voir <a href="/fr/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">la page de référence sur l'attribut <code>draggable</code></a> et <a href="/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute">le guide sur les opérations de déplacement</a> pour plus d'informations.</p> +<p>Voir <a href="/fr/docs/Web/HTML/Global_attributes/draggable" >la page de référence sur l'attribut <code>draggable</code></a> et <a href="/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute">le guide sur les opérations de déplacement</a> pour plus d'informations.</p> <h3 id="Définir_les_données_déplacées">Définir les données déplacées</h3> @@ -141,7 +147,7 @@ function dragstart_handler(ev) { } </pre> -<p>Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir <a href="/fr/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">les types recommandés</a>. Pour plus d'informations sur les informations transportées, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p> +<p>Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir <a href="/fr/docs/DragDrop/Recommended_Drag_Types" >les types recommandés</a>. Pour plus d'informations sur les informations transportées, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#dragdata" >Drag Data</a>.</p> <h3 id="Définir_limage_pour_le_déplacement">Définir l'image pour le déplacement</h3> @@ -157,7 +163,7 @@ function dragstart_handler(ev) { } </pre> -<p>Pour en savoir plus, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Définir l'image de <em>feedback</em> pour le glisser-déposer</a>.</p> +<p>Pour en savoir plus, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragfeedback" >Définir l'image de <em>feedback</em> pour le glisser-déposer</a>.</p> <h3 id="Définir_leffet_de_déplacement">Définir l'effet de déplacement</h3> @@ -180,7 +186,7 @@ function dragstart_handler(ev) { } </pre> -<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> for more details.</p> +<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" >Drag Effects</a> for more details.</p> <h3 id="Définir_la_zone_où_déposer_lélément_déplacé">Définir la zone où déposer l'élément déplacé</h3> @@ -241,13 +247,13 @@ function drop_handler(ev) { <p>À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché <em>sur l'élément source</em> (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.</p> -<p>Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un glisser-déposer</a>.</p> +<p>Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragend" >Terminer un glisser-déposer</a>.</p> <h2 id="Interopérabilité">Interopérabilité</h2> <p>Comme on peut le voir <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">dans le tableau de compatibilité pour l'interface <code>DataTransferItem</code></a>, la prise en charge du <em>drag-and-drop</em> est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.</p> -<h2 id="Examples_and_demos" name="Examples_and_demos">Exemples et démos</h2> +<h2 id="Examples_and_demos">Exemples et démos</h2> <ul> <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copier et déplacer des éléments avec l'interface <code>DataTransfer</code></a></li> @@ -258,12 +264,12 @@ function drop_handler(ev) { </li> </ul> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Les opérations de déplacement</a></li> - <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a></li> - <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Types de déplacement recommandés</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">Spécification HTML5 : Drag and Drop</a></li> - <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Données d'interopérabilité pour l'API Drag and Drop sur CanIUse</a></li> + <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">Les opérations de déplacement</a></li> + <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">Glisser-déposer plusieurs objets</a></li> + <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types">Types de déplacement recommandés</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd">Spécification HTML5 : Drag and Drop</a></li> + <li><a href="http://caniuse.com/#search=draganddrop">Données d'interopérabilité pour l'API Drag and Drop sur CanIUse</a></li> </ul> diff --git a/files/fr/web/api/htmlbuttonelement/index.html b/files/fr/web/api/htmlbuttonelement/index.html index b9bb05e2c0..267f98b17b 100644 --- a/files/fr/web/api/htmlbuttonelement/index.html +++ b/files/fr/web/api/htmlbuttonelement/index.html @@ -11,70 +11,70 @@ translation_of: Web/API/HTMLButtonElement --- <div>{{APIRef("HTML DOM")}}</div> -<p> <span class="tlid-translation translation"><span title="">L'interface</span></span> <span class="tlid-translation translation"><span title=""> </span></span><strong><code>HTMLButtonElement</code></strong> <span class="tlid-translation translation"><span title="">fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</span></span></p> +<p> L'interface <strong><code>HTMLButtonElement</code></strong> fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</p> <p>{{InheritanceDiagram(600, 120)}}</p> -<h2 id="Propriétés"><span class="tlid-translation translation"><span title="">Propriétés</span></span></h2> +<h2 id="Propriétés">Propriétés</h2> -<p><span class="tlid-translation translation"><span title="">Hérite des propriétés de son parent,</span></span> <em> {{domxref("HTMLElement")}}.</em></p> +<p>Hérite des propriétés de son parent, <em> {{domxref("HTMLElement")}}.</em></p> <dl> <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</dd> <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent.</span> <span title="">Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</span></span></dd> + <dd>Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent. Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</dd> <dt>{{domxref("HTMLButtonElement.disabled")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic</span></span> .</dd> + <dd>Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic .</dd> <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé.</span> <span title="">Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.</span><br> - <span title="">Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond</span></span> .</dd> + <dd>Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé. Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.<br> + Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond .</dd> <dt>{{domxref("HTMLButtonElement.formAction")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd> <dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd> <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd> + <dd>Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd> <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd> + <dd>Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd> <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd> + <dd>Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd> <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</span></span></dd> + <dd>Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</dd> <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</span></span></dd> + <dd>Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</dd> <dt>{{domxref("HTMLButtonElement.name")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire.</span> <span title="">{{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</dd> <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un</span></span> <code>long</code> <span class="tlid-translation translation"><span title="">qui représente la position de cet élément dans l'ordre de tabulation</span></span> .</dd> + <dd>Est un <code>long</code> qui représente la position de cet élément dans l'ordre de tabulation .</dd> <dt>{{domxref("HTMLButtonElement.type")}}</dt> - <dd>: <span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant le comportement du bouton.</span> <span title="">C'est un attribut énuméré avec les valeurs possibles suivantes:</span></span> + <dd>: Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: <ul> - <li><code>"submit"</code>: <span class="tlid-translation translation"><span title="">Le bouton soumet le formulaire.</span> <span title="">Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</span></span></li> - <li><code>"reset"</code>: <span class="tlid-translation translation"><span title="">Le bouton réinitialise le formulaire.</span></span></li> - <li><code>"button"</code>: <span class="tlid-translation translation"><span title="">Le bouton ne fait rien.</span></span></li> - <li><code>"menu"</code>: <span class="tlid-translation translation"><span title="">Le bouton affiche un menu.</span> <span title="">{{experimental_inline}}</span></span></li> + <li><code>"submit"</code>: Le bouton soumet le formulaire. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</li> + <li><code>"reset"</code>: Le bouton réinitialise le formulaire.</li> + <li><code>"button"</code>: Le bouton ne fait rien.</li> + <li><code>"menu"</code>: Le bouton affiche un menu. {{experimental_inline}}</li> </ul> </dd> <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant).</span> <span title="">Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</dd> <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</span></span></dd> + <dd>Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</dd> <dt>{{domxref("HTMLButtonElement.value")}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</span></span></dd> + <dd>Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</dd> <dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt> - <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte.</span> <span title="">Il est</span></span> <code>false</code> <span class="tlid-translation translation"><span title="">si des conditions l'empêchent de valider la contrainte</span></span> .</dd> + <dd>Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est <code>false</code> si des conditions l'empêchent de valider la contrainte .</dd> </dl> -<h2 id="Les_méthodes"><span class="tlid-translation translation"><span title="">Les méthodes</span></span></h2> +<h2 id="Les_méthodes">Les méthodes</h2> -<p><span class="tlid-translation translation"><span title="">Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</span></span></p> +<p>Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</p> -<table class="standard-table" style="height: 239px; width: 1383px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Nom</th> - <th scope="col"><span class="tlid-translation translation"><span title="">Type de retour</span></span></th> + <th scope="col">Type de retour</th> <th scope="col">Description</th> </tr> </thead> @@ -83,7 +83,7 @@ translation_of: Web/API/HTMLButtonElement <td><code>checkValidity()</code></td> <td>{{domxref("Boolean")}}</td> <td> - <p><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></p> + <p>Non pris en charge pour les éléments de bouton.</p> </td> </tr> <tr> @@ -91,12 +91,12 @@ translation_of: Web/API/HTMLButtonElement <p><code>setCustomValidity(in DOMString error)</code></p> </td> <td><code>void</code></td> - <td><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></td> + <td>Non pris en charge pour les éléments de bouton.</td> </tr> </tbody> </table> -<p><span class="tlid-translation translation"><span title="">Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</span></span></p> +<p>Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</p> <h2 id="Spécifications">Spécifications</h2> @@ -110,26 +110,26 @@ translation_of: Web/API/HTMLButtonElement <tr> <td>{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td><span class="tlid-translation translation"><span title="">L'attribut suivant a été ajouté</span></span> : <code>menu</code>.<br> - <span class="tlid-translation translation"><span title="">L'attribut</span></span> <code>type</code> <span class="tlid-translation translation"><span title="">peut prendre une valeur supplémentaire</span></span> , <code>"menu"</code>.</td> + <td>L'attribut suivant a été ajouté : <code>menu</code>.<br> + L'attribut <code>type</code> peut prendre une valeur supplémentaire , <code>"menu"</code>.</td> </tr> <tr> <td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td><span class="tlid-translation translation"><span title="">Les attributs</span></span> <code>tabindex</code> et <code>accesskey</code>, <span class="tlid-translation translation"><span title="">sont maintenant définis sur</span></span> {{domxref("HTMLElement")}}.<br> - <span class="tlid-translation translation"><span title="">Les attributs suivants ont été ajoutés</span></span> : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br> - <span class="tlid-translation translation"><span title="">Les méthodes suivantes ont été ajoutées</span></span> : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br> + <td>Les attributs <code>tabindex</code> et <code>accesskey</code>, sont maintenant définis sur {{domxref("HTMLElement")}}.<br> + Les attributs suivants ont été ajoutés : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br> + Les méthodes suivantes ont été ajoutées : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br> The <code>type</code> attribute is no more read-only.</td> </tr> <tr> <td>{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}</td> <td>{{Spec2('DOM2 HTML')}}</td> - <td><span class="tlid-translation translation"><span title="">Aucun changement de</span></span> {{SpecName("DOM1")}}.</td> + <td>Aucun changement de {{SpecName("DOM1")}}.</td> </tr> <tr> <td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td> <td>{{Spec2('DOM1')}}</td> - <td>. <span class="tlid-translation translation"><span title="">Définition initiale</span></span></td> + <td>. Définition initiale</td> </tr> </tbody> </table> @@ -138,8 +138,8 @@ translation_of: Web/API/HTMLButtonElement <p>{{Compat("api.HTMLButtonElement")}}</p> -<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2> +<h2 id="Voir_également">Voir également</h2> <ul> - <li><span class="tlid-translation translation"><span title="">Élément HTML implémentant cette interface</span></span> : {{HTMLElement("button")}}</li> + <li>Élément HTML implémentant cette interface : {{HTMLElement("button")}}</li> </ul> diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.html b/files/fr/web/api/htmlcanvaselement/getcontext/index.html index d3f60a88a1..db299b5342 100644 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.html +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.html @@ -25,8 +25,8 @@ translation_of: Web/API/HTMLCanvasElement/getContext <dd>Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : <ul> <li><code>"2d</code>", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.</li> - <li><code>"webgl"</code> (ou <code>"experimental-webgl"</code>) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 2.0).</li> - <li>"<code>webgl2</code>" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 3.0). {{experimental_inline}}.</li> + <li><code>"webgl"</code> (ou <code>"experimental-webgl"</code>) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de <a href="/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 2.0).</li> + <li>"<code>webgl2</code>" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de <a href="/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 3.0). {{experimental_inline}}.</li> <li><code>"bitmaprenderer"</code> pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.</li> </ul> diff --git a/files/fr/web/api/htmlcanvaselement/height/index.html b/files/fr/web/api/htmlcanvaselement/height/index.html index 6dda886f53..c56de245f4 100644 --- a/files/fr/web/api/htmlcanvaselement/height/index.html +++ b/files/fr/web/api/htmlcanvaselement/height/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/HTMLCanvasElement/height </div> </div> -<p>La propriété <strong><code><span>HTMLCanvasElement.height</span></code></strong> est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de <code>150</code> is utilisée.</p> +<p>La propriété <strong><code>HTMLCanvasElement.height</code></strong> est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de <code>150</code> is utilisée.</p> <p>C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height; <em>canvas</em>.height = <em>pxl</em>; @@ -68,7 +68,7 @@ console.log(canvas.height); // 300 <p>{{Compat("api.HTMLCanvasElement.height")}}</p> -<h2 id="See_Also" name="See_Also">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li> diff --git a/files/fr/web/api/htmlcanvaselement/index.html b/files/fr/web/api/htmlcanvaselement/index.html index b87a8ee1fd..bdfdfd8945 100644 --- a/files/fr/web/api/htmlcanvaselement/index.html +++ b/files/fr/web/api/htmlcanvaselement/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLCanvasElement --- <div>{{ApiRef}}</div> -<p>L'interface <strong><code><span>HTMLCanvasElement</span></code></strong> fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface <code>HTMLCanvasElement</code> hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.</p> +<p>L'interface <strong><code>HTMLCanvasElement</code></strong> fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface <code>HTMLCanvasElement</code> hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.</p> <h2 id="Propriétés">Propriétés</h2> @@ -111,7 +111,9 @@ translation_of: Web/API/HTMLCanvasElement <td><code>void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type)</code> {{non-standard_inline}}</td> <td><code>void</code></td> <td>Crée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si <code>type</code> n'est pas précisée, Le format de l'image est <code>image/png.</code> - <div class="note"><strong>Note:</strong> Cette méthode ne peut être utilisée que depuis le code chrome.</div> + <div class="note"> + <p><strong>Note :</strong> Cette méthode ne peut être utilisée que depuis le code chrome.</p> + </div> </td> </tr> </tbody> diff --git a/files/fr/web/api/htmlcollection/index.html b/files/fr/web/api/htmlcollection/index.html index ef8d29878a..4776f87c85 100644 --- a/files/fr/web/api/htmlcollection/index.html +++ b/files/fr/web/api/htmlcollection/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLCollection --- <p>{{APIRef("HTML DOM")}}</p> -<p>L'interface <strong>HTMLCollection</strong> est constituée d'une collection générique (à la manière d'un tableau similaire à <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.</p> +<p>L'interface <strong>HTMLCollection</strong> est constituée d'une collection générique (à la manière d'un tableau similaire à <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.</p> <p><strong>Note:</strong> Cette interface est appelée <code>HTMLCollection</code> pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).</p> diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html index 0b80a65c12..282b4a2933 100644 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html @@ -17,14 +17,14 @@ translation_of: Web/API/HTMLContentElement/getDistributedNodes <pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes() </pre> -<h2 id="Specifications" name="Specifications">Exemple</h2> +<h2 id="Specifications">Exemple</h2> <pre class="brush: js">// Récupère les éléments var nodes = myContentObject.getDistributedNodes();</pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> -<table class="spec-table standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/htmlcontentelement/index.html b/files/fr/web/api/htmlcontentelement/index.html index ef454595d1..9746995c4a 100644 --- a/files/fr/web/api/htmlcontentelement/index.html +++ b/files/fr/web/api/htmlcontentelement/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLContentElement <p>L'interface <code><strong>HTMLContentElement</strong></code> represente un élément HTML {{HTMLElement("content")}}, utilisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p> @@ -33,7 +33,7 @@ translation_of: Web/API/HTMLContentElement <h2 id="Spécifications">Spécifications</h2> -<table class="spec-table standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/htmlcontentelement/select/index.html b/files/fr/web/api/htmlcontentelement/select/index.html index bb6160b8db..f5b8eda778 100644 --- a/files/fr/web/api/htmlcontentelement/select/index.html +++ b/files/fr/web/api/htmlcontentelement/select/index.html @@ -18,14 +18,14 @@ translation_of: Web/API/HTMLContentElement/select <pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ..."; </pre> -<h2 id="Specifications" name="Specifications">Exemple</h2> +<h2 id="Specifications">Exemple</h2> <pre class="brush: js">// Choisi les éléments <h1> et les elements avec la class "error" myContentObject.select = "h1 .error";</pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> -<table class="spec-table standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html index e6920a2db2..e2a81f2a09 100644 --- a/files/fr/web/api/htmldialogelement/close_event/index.html +++ b/files/fr/web/api/htmldialogelement/close_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLDialogElement/close_event --- <p>{{ APIRef() }}</p> -<p><span class="seoSummary">L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée</span></p> +<p>L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.</p> <table class="properties"> <tbody> @@ -42,7 +42,7 @@ translation_of: Web/API/HTMLDialogElement/close_event <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><dialog class="example-dialog"> +<pre class="brush: html"><dialog class="example-dialog"> <button class="close" type="reset">Close</button> </dialog> @@ -50,18 +50,14 @@ translation_of: Web/API/HTMLDialogElement/close_event <div class="result"></div></pre> -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">button, div { +<pre class="brush: css hidden">button, div { margin: .5rem; } </pre> -</div> <h4 id="JS">JS</h4> -<pre class="brush: js notranslate">const result = document.querySelector('.result') +<pre class="brush: js">const result = document.querySelector('.result') const dialog = document.querySelector('.example-dialog') dialog.addEventListener('close', (event) => { diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html index 7a5458bf48..15d1449571 100644 --- a/files/fr/web/api/htmldialogelement/index.html +++ b/files/fr/web/api/htmldialogelement/index.html @@ -54,7 +54,7 @@ translation_of: Web/API/HTMLDialogElement <p>The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the <em>Cancel</em> button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.</p> -<pre class="brush: html notranslate"> <!-- Simple pop-up dialog box, containing a form --> +<pre class="brush: html"> <!-- Simple pop-up dialog box, containing a form --> <dialog id="favDialog"> <form method="dialog"> <section> @@ -108,7 +108,7 @@ translation_of: Web/API/HTMLDialogElement </script></pre> <div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p> +<p><strong>Note :</strong> You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p> </div> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/api/htmldocument/index.html b/files/fr/web/api/htmldocument/index.html index ff96e73ff6..649b922b25 100644 --- a/files/fr/web/api/htmldocument/index.html +++ b/files/fr/web/api/htmldocument/index.html @@ -5,12 +5,12 @@ translation_of: Web/API/HTMLDocument --- <p>{{ APIRef("HTML DOM") }}</p> -<p><strong><code>HTMLDocument</code></strong> est une interface abstraite de <a href="/fr-FR/docs/DOM" title="en/DOM">DOM</a> qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).</p> +<p><strong><code>HTMLDocument</code></strong> est une interface abstraite de <a href="/fr-FR/docs/DOM">DOM</a> qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).</p> <p>Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.</p> <h2 id="Spécification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li> </ul> diff --git a/files/fr/web/api/htmlelement/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html index fa212865d4..e89e767a56 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.html +++ b/files/fr/web/api/htmlelement/accesskey/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/Element/accessKey <div> </div> -<p>La propriété <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p> +<p>La propriété <strong>Element.accessKey</strong> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p> <div class="note"> <p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p> diff --git a/files/fr/web/api/htmlelement/animationend_event/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html index 79b3ef1424..836a817daf 100644 --- a/files/fr/web/api/htmlelement/animationend_event/index.html +++ b/files/fr/web/api/htmlelement/animationend_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationend <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> @@ -78,5 +78,5 @@ original_slug: Web/Events/animationend <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> + <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> </ul> diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html index a8aef20b45..f0e8c058b7 100644 --- a/files/fr/web/api/htmlelement/animationiteration_event/index.html +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationiteration <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt> @@ -80,5 +80,5 @@ original_slug: Web/Events/animationiteration <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> + <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> </ul> diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html index e5290e40c2..f4dfb8d3cb 100644 --- a/files/fr/web/api/htmlelement/animationstart_event/index.html +++ b/files/fr/web/api/htmlelement/animationstart_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/animationstart <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> @@ -78,5 +78,5 @@ original_slug: Web/Events/animationstart <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> + <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li> </ul> diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html index 552a6d0e70..ba007c779b 100644 --- a/files/fr/web/api/htmlelement/change_event/index.html +++ b/files/fr/web/api/htmlelement/change_event/index.html @@ -67,8 +67,7 @@ translation_of: Web/API/HTMLElement/change_event <div class="result"></div></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { display: grid; grid-template-areas: "select result"; } @@ -80,7 +79,6 @@ select { .result { grid-area: result; }</pre> -</div> <h4 id="Javascript">Javascript</h4> diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html index 06b82aff69..4fcce54685 100644 --- a/files/fr/web/api/htmlelement/click/index.html +++ b/files/fr/web/api/htmlelement/click/index.html @@ -7,14 +7,14 @@ tags: translation_of: Web/API/HTMLElement/click --- <p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>La méthode <b>click</b> simule un clic sur un élément.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">element.click()</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Lorsque la méthode <code>click</code> est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement <code>click</code> de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p> -<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p> -<div class="geckoVersionNote"> +<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p> +<div> <p>{{gecko_callout_heading("5.0")}}</p> <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type <i> @@ -32,7 +32,7 @@ translation_of: Web/API/HTMLElement/click <i> submit</i> . Gecko n'implémentait pas la méthode <code>click</code> sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.</p> - <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5" title="/fr/docs/HTML/HTML5">HTML5</a>.</p> + <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5">HTML5</a>.</p> <p>D'autres implémentations du DOM peuvent se comporter différemment.</p> </div> @@ -48,7 +48,7 @@ translation_of: Web/API/HTMLElement/click </thead> <tbody> <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td> <td>{{Spec2('DOM2 HTML')}}</td> <td> </td> </tr> diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html index c38bc857ec..ceb68bb2f8 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.html +++ b/files/fr/web/api/htmlelement/contenteditable/index.html @@ -57,7 +57,7 @@ element.contentEditable = "true" <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li> <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li> + <li> <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li> <li>{{domxref("HTMLElement.isContentEditable")}}</li> - <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li> + <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li> </ul> diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html index e4bd63a25e..96848e9935 100644 --- a/files/fr/web/api/htmlelement/dir/index.html +++ b/files/fr/web/api/htmlelement/dir/index.html @@ -7,28 +7,28 @@ tags: translation_of: Web/API/HTMLElement/dir --- <p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> <pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir; referenceElement.dir = <var>NouvelleDirection</var>; </pre> <p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p> <p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="brush: js">var para = document.getElementById("para1"); para.dir = "rtl"; // change la direction du texte sur un paragraphe identifié par "para1" </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p> <p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p> <p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p> -<div class="geckoVersionNote"> +<div> <p>{{ gecko_callout_heading("7.0") }}</p> <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p> </div> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <thead> <tr> @@ -39,7 +39,7 @@ para.dir = "rtl"; </thead> <tbody> <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td> <td>{{Spec2('DOM2 HTML')}}</td> <td> </td> </tr> diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html index b4cbdd147a..f54affe844 100644 --- a/files/fr/web/api/htmlelement/hidden/index.html +++ b/files/fr/web/api/htmlelement/hidden/index.html @@ -3,11 +3,11 @@ title: HTMLElement.hidden slug: Web/API/HTMLElement/hidden translation_of: Web/API/HTMLElement/hidden --- -<div> <div>{{ APIRef("HTML DOM") }}</div> -</div> -<p><span class="seoSummary">La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</span> La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p> +<p>La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</p> + +<p>La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p> <p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p> @@ -26,12 +26,12 @@ translation_of: Web/API/HTMLElement/hidden </ul> <div class="note"> -<p>Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p> +<p><strong>Note :</strong> Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>estCaché</em> = <em>HTMLElement</em>.hidden; +<pre class="syntaxbox"><em>estCaché</em> = <em>HTMLElement</em>.hidden; <em>HTMLElement</em>.hidden = true | false;</pre> @@ -39,13 +39,13 @@ translation_of: Web/API/HTMLElement/hidden <p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.getElementById("boutonOk") +<pre class="brush: js">document.getElementById("boutonOk") .addEventListener("click", function() { document.getElementById("bienvenue").hidden = true; document.getElementById("impressionnant").hidden = false; @@ -59,7 +59,7 @@ translation_of: Web/API/HTMLElement/hidden <h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4> -<pre class="brush: html notranslate"><div id="bienvenue" class="panneau"> +<pre class="brush: html"><div id="bienvenue" class="panneau"> <h1>Bienvenue à Machin.com !</h1> <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p> <button class="bouton" id="boutonOk">OK</button> @@ -71,7 +71,7 @@ translation_of: Web/API/HTMLElement/hidden <p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p> -<pre class="brush: html notranslate"><div id="impressionnant" class="panneau" hidden> +<pre class="brush: html"><div id="impressionnant" class="panneau" hidden> <h1>Merci !</h1> <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes @@ -82,7 +82,7 @@ translation_of: Web/API/HTMLElement/hidden <p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p> -<pre class="brush: css notranslate">.panneau { +<pre class="brush: css">.panneau { font: 16px "Open Sans", Helvetica, Arial, sans-serif; border: 1px solid #22d; padding: 12px; diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html index 0f220e9526..5b5276f04e 100644 --- a/files/fr/web/api/htmlelement/index.html +++ b/files/fr/web/api/htmlelement/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLElement <div> {{ApiRef}}</div> <h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2> -<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM" title="en-US/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p> +<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p> <h2 id="Propriétés">Propriétés</h2> <table class="standard-table"> <thead> @@ -33,7 +33,7 @@ translation_of: Web/API/HTMLElement <tr> <td>{{domxref("element.className", "className")}}</td> <td>{{domxref("DOMString")}}</td> - <td>Le nom de la classe <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> définie pour l'élément.</td> + <td>Le nom de la classe <a href="/fr/docs/CSS">CSS</a> définie pour l'élément.</td> </tr> <tr> <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td> diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html index fee68327fa..e49115801b 100644 --- a/files/fr/web/api/htmlelement/innertext/index.html +++ b/files/fr/web/api/htmlelement/innertext/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/Node/innerText <tr> <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> <td>{{Spec2('HTML WHATWG')}}</td> - <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec" lang="en">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td> + <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html index f4996fe3c1..1e5ed92105 100644 --- a/files/fr/web/api/htmlelement/input_event/index.html +++ b/files/fr/web/api/htmlelement/input_event/index.html @@ -10,13 +10,13 @@ translation_of: Web/API/HTMLElement/input_event --- <p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code> n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p> -<p>De plus, l'évènement <code>input</code> se déclenche sur les éditeurs <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . <span class="short_text" id="result_box" lang="fr"><span>S'il y a deux éléments ou plus qui ont</span></span> <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" <span id="result_box" lang="fr"><span>est l'élément ancêtre le plus proche dont le parent n'est pas modifiable</span></span> . <span id="result_box" lang="fr"><span>De même, il est déclenché sur l'élément racine des éditeurs</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode" title="document.designMode"><code>designMode</code></a> .</p> +<p>De plus, l'évènement <code>input</code> se déclenche sur les éditeurs <a href="/fr/docs/Web/API/HTMLElement/contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . S'il y a deux éléments ou plus qui ont <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs <a href="/fr/docs/Web/API/Document/designMode"><code>designMode</code></a> .</p> <h2 id="Information_générale">Information générale</h2> <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html index e1d53fb7c0..dd7c704998 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.html +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/HTMLElement/isContentEditable <p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable </pre> @@ -25,16 +25,16 @@ translation_of: Web/API/HTMLElement/isContentEditable <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span> -document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span></code></pre> +<pre class="brush: js">document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable; +document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Uneditable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText2<span class="punctuation token">"</span></span> <span class="attr-name token">contentEditable</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Editable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html"><p id="myText1">Uneditable Paragraph</p> +<p id="myText2" contentEditable="true">Editable Paragraph</p> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Can edit the first paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Can edit the second paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> +<p id="infoText1">Can edit the first paragraph? </p> +<p id="infoText2">Can edit the second paragraph? </p></pre> <h3 id="Résultat">Résultat</h3> diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html index 990a1cd780..15d2f5536f 100644 --- a/files/fr/web/api/htmlelement/lang/index.html +++ b/files/fr/web/api/htmlelement/lang/index.html @@ -7,14 +7,14 @@ tags: translation_of: Web/API/HTMLElement/lang --- <p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.</p> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2> <pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang </pre> <p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="brush: js">// ce bout de code compare la langue de base et // redirige vers une autre URL suivant la langue if (document.documentElement.lang === "en") { @@ -23,10 +23,10 @@ if (document.documentElement.lang === "en") { window.location.href = "un_document.html.ru"; } </pre> -<h2 id="Notes" name="Notes">Notes</h2> -<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p> +<h2 id="Notes">Notes</h2> +<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a href="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p> <p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <table class="standard-table"> <thead> <tr> diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html index bfd4b1d130..ae436458f9 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.html +++ b/files/fr/web/api/htmlelement/offsetheight/index.html @@ -7,60 +7,50 @@ translation_of: Web/API/HTMLElement/offsetHeight --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>Propriété <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p> +<p>Propriété <abbr>DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight; </pre> <p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>Typiquement, la propriété <strong>offsetHeight</strong> d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> +<h2 id="Example">Example</h2> -<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> +<p><img src="dimensions-offset.png"></p> -<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/1176/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> +<p>L'exemple d'image ci-avant montre une barre de défilement et un décalage <code>offsetHeight</code> qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs <code>offsetHeight</code> élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de <code>scrollTop</code> pour le conteneur.</p> -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> - -<p style="margin-top: 270px;"><img alt="Image:offsetHeight.png" class="internal" src="/@api/deki/files/1419/=OffsetHeight.png"></p> - -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p><code>offsetHeight</code> est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).</p> -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li> + <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> </ul> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> - <li><a href="/fr/DOM/element.clientHeight" title="fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li> - <li><a href="/fr/DOM/element.scrollHeight" title="fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li> - <li><a href="/fr/DOM/element.offsetWidth" title="fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li> + <li><a href="/fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li> + <li><a href="/fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li> + <li><a href="/fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li> </ul> <p>{{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}</p> diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html index b9c055927b..c29542abcc 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.html +++ b/files/fr/web/api/htmlelement/offsetleft/index.html @@ -6,18 +6,18 @@ tags: translation_of: Web/API/HTMLElement/offsetLeft --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie le nombre de pixels dont le <i> coin supérieur gauche</i> de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>left</i> =<i>element</i>.offsetLeft; </pre> <p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p> -<h3 id="Note" name="Note">Note</h3> +<h3 id="Note">Note</h3> <p><code>offsetLeft</code> renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments <b>span</b> dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété <code>offsetLeft</code> fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre>var colorTable = document.getElementById("t1"); var tOLeft = colorTable.offsetLeft; @@ -25,10 +25,12 @@ if (tOLeft > 5) { // grand décalage à gauche : faire quelque chose ici } </pre> -<h3 id="Exemple_2" name="Exemple_2">Exemple</h3> +<h3 id="Exemple_2">Exemple</h3> <p>Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.</p> -<p><img alt="Image:offsetLeft.jpg"></p> -<p><small><font color="gray">Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</font></small></p> + +<p><img src="offsetleft.jpg"></p> + +<p><small>Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</small></p> <pre><div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>Short span. </span> @@ -48,9 +50,9 @@ if (tOLeft > 5) { box.style.height = long.offsetHeight; </script> </pre> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p> -<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p> +<p><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p> <p>{{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}</p> diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html index d466de34de..5e278fefe9 100644 --- a/files/fr/web/api/htmlelement/offsetparent/index.html +++ b/files/fr/web/api/htmlelement/offsetparent/index.html @@ -8,15 +8,15 @@ tags: translation_of: Web/API/HTMLElement/offsetParent --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'<b>offsetParent</b>.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>objetParent</i> = element.offsetParent </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li> </ul> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}</p> diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html index 6be7a15bd3..44e3b80d2c 100644 --- a/files/fr/web/api/htmlelement/offsettop/index.html +++ b/files/fr/web/api/htmlelement/offsettop/index.html @@ -8,22 +8,22 @@ translation_of: Web/API/HTMLElement/offsetTop --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><em>topPos</em> = element.offsetTop; </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre>d = document.getElementById("div1"); @@ -37,14 +37,10 @@ if (topPos > 10 ) { } </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> -<p><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}</p> +<p><a href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html index 4d65ebae61..a7d58e4448 100644 --- a/files/fr/web/api/htmlelement/offsetwidth/index.html +++ b/files/fr/web/api/htmlelement/offsetwidth/index.html @@ -5,52 +5,38 @@ translation_of: Web/API/HTMLElement/offsetWidth --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie la largeur totale d'un élément.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth; </pre> <p><code>offsetWidth</code> est une propriété en lecture seule.</p> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>Typiquement, l'attribut <code>offsetWidth</code> est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.</p> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h2 id="exemple">Exemple</h2> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> -<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> -<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> +<p><img src="dimensions-offset.png"></p> -<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> -<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> +<p><code>offsetWidth</code> fait partie du modèle objet <abbr>DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> -<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> +<h3 id="Notes">Notes</h3> -<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> -</div> -<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p><code>offsetWidth</code> est une propriété du modèle objet <abbr>DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p> -<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png"></p> - -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> - -<p><code>offsetWidth</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> - -<h3 id="Notes" name="Notes">Notes</h3> - -<p><code>offsetWidth</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p> - -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> + <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li> + <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li> </ul> <p>{{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}</p> diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html index cd11dd3bc9..6c545982d7 100644 --- a/files/fr/web/api/htmlelement/title/index.html +++ b/files/fr/web/api/htmlelement/title/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/HTMLElement/title <p>La propriété <strong><code>HTMLElement.title</code></strong> représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.</p> <div class="note"> -<p>Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p> +<p><strong>Note :</strong> Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p> <pre> <div title="InfoCool"> <div title="">le survol de la souris ici fera apparaître "InfoCool"</div> @@ -23,18 +23,18 @@ translation_of: Web/API/HTMLElement/title </pre> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">var <em>chn</em> = <em>element</em>.title;<em> </em>element.title = <em>chn</em>; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir"; </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html index 4a4a13d291..a780a3023b 100644 --- a/files/fr/web/api/htmlelement/transitionend_event/index.html +++ b/files/fr/web/api/htmlelement/transitionend_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/transitionend --- <div>{{APIRef}}</div> -<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. <span class="tlid-translation translation" lang="fr"><span title="">Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur</span></span> <code>none</code>, alors l'événement ne pourra pas être généré.</p> +<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur <code>none</code>, alors l'événement ne pourra pas être généré.</p> <table class="properties"> <tbody> @@ -91,7 +91,7 @@ original_slug: Web/Events/transitionend <p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p> -<pre class="brush: js notranslate">const transition = document.querySelector('.transition'); +<pre class="brush: js">const transition = document.querySelector('.transition'); transition.addEventListener('transitionend', () => { console.log('Transition ended'); @@ -99,7 +99,7 @@ transition.addEventListener('transitionend', () => { <p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p> -<pre class="brush: js notranslate">const transition = document.querySelector('.transition'); +<pre class="brush: js">const transition = document.querySelector('.transition'); transition.ontransitionend = () => { console.log('Transition ended'); @@ -109,10 +109,10 @@ transition.ontransitionend = () => { <p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p> -<pre class="brush: html notranslate"><div class="transition">Hover over me</div> +<pre class="brush: html"><div class="transition">Hover over me</div> <div class="message"></div></pre> -<pre class="brush: css notranslate">.transition { +<pre class="brush: css">.transition { width: 100px; height: 100px; background: rgba(255,0,0,1); @@ -128,7 +128,7 @@ transition.ontransitionend = () => { <p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.</p> -<pre class="brush: js notranslate">const message = document.querySelector('.message'); +<pre class="brush: js">const message = document.querySelector('.message'); const el = document.querySelector('.transition'); el.addEventListener('transitionrun', function() { diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.html b/files/fr/web/api/htmlformelement/acceptcharset/index.html index 281ebf7a43..59cf90bc64 100644 --- a/files/fr/web/api/htmlformelement/acceptcharset/index.html +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.html @@ -9,19 +9,19 @@ translation_of: Web/API/HTMLFormElement/acceptCharset <p>La propriété <code><strong>HTMLFormElement.acceptCharset</strong></code> représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>string</em> = form.acceptCharset; form.acceptCharset = <em>string</em><code>;</code> </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">inputs = document.forms["myform"].acceptCharset </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset" title="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></p> +<p><a href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p> diff --git a/files/fr/web/api/htmlformelement/action/index.html b/files/fr/web/api/htmlformelement/action/index.html index 7963547cd3..7faeadc67a 100644 --- a/files/fr/web/api/htmlformelement/action/index.html +++ b/files/fr/web/api/htmlformelement/action/index.html @@ -9,18 +9,18 @@ translation_of: Web/API/HTMLFormElement/action <p>L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>string</em> = form.action form.action = <em>string</em> </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>form.action = "/cgi-bin/publish";</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> +<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p> diff --git a/files/fr/web/api/htmlformelement/elements/index.html b/files/fr/web/api/htmlformelement/elements/index.html index 14ba012b3b..fbe30d563e 100644 --- a/files/fr/web/api/htmlformelement/elements/index.html +++ b/files/fr/web/api/htmlformelement/elements/index.html @@ -7,25 +7,25 @@ translation_of: Web/API/HTMLFormElement/elements <div>{{APIRef("HTML DOM")}}</div> </div> -<p>La propriété <code><strong>HTMLFormElement.elements</strong></code> retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type <a href="/fr-FR/docs/HTML/Element/Input" title="input">input</a> dont l'attribut <code>type</code> est égal à <code>image</code>.</p> +<p>La propriété <code><strong>HTMLFormElement.elements</strong></code> retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type <a href="/fr-FR/docs/HTML/Element/Input">input</a> dont l'attribut <code>type</code> est égal à <code>image</code>.</p> <p>Vous pouvez accéder à un élément particulier en utilisant soit un index soit le <code>name</code> ou l'<code>id</code> de l'élément.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var inputs = document.getElementById("form1").elements; var inputByIndex = inputs[2]; var inputByName = inputs["login"]; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-elements" title="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li> + <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li> </ul> diff --git a/files/fr/web/api/htmlformelement/enctype/index.html b/files/fr/web/api/htmlformelement/enctype/index.html index c78cfc4b29..d706eec625 100644 --- a/files/fr/web/api/htmlformelement/enctype/index.html +++ b/files/fr/web/api/htmlformelement/enctype/index.html @@ -9,18 +9,18 @@ translation_of: Web/API/HTMLFormElement/enctype <p>Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>string</em> = form.enctype form.enctype = <em>string</em> </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">form.enctype = "application/x-www-form-urlencoded";</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> +<p><a href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype">HTML 5, Section 4.10.19.6, Form submission</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p> diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html index 6cbdaa5313..747286a784 100644 --- a/files/fr/web/api/htmlformelement/index.html +++ b/files/fr/web/api/htmlformelement/index.html @@ -66,7 +66,7 @@ translation_of: Web/API/HTMLFormElement <h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3> -<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p> +<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p> <p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p> @@ -108,75 +108,75 @@ f.method = "POST" f.submit(); // On appelle la méhtode submit pour l'envoyer </pre> -<p id="Extraction_d'informations_et_définition_d'attributs">Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>formA<span class="punctuation token">"</span></span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>/cgi-bin/test<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getFormInfo();<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Info<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setFormInfo(this.form);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Set<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form-info<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">function</span> <span class="function token">getFormInfo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// Obtenir une référence au formulaire par son nom</span> - <span class="keyword token">var</span> f <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="comment token">// Les propriétés du formulaire qui nous intéressent</span> - <span class="keyword token">var</span> properties <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="string token">'elements'</span><span class="punctuation token">,</span> <span class="string token">'length'</span><span class="punctuation token">,</span> <span class="string token">'name'</span><span class="punctuation token">,</span> <span class="string token">'charset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'acceptCharset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'enctype'</span><span class="punctuation token">,</span> <span class="string token">'method'</span><span class="punctuation token">,</span> <span class="string token">'target'</span> <span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="comment token">// Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur</span> - <span class="keyword token">var</span> info <span class="operator token">=</span> properties<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>property<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> property <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> f<span class="punctuation token">[</span>property<span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">"\n"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// Définir les <textarea> du formulaire pour en afficher les propriétés</span> - document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">.</span>elements<span class="punctuation token">[</span><span class="string token">'form-info'</span><span class="punctuation token">]</span><span class="punctuation token">.</span>value <span class="operator token">=</span> info<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">setFormInfo</span><span class="punctuation token">(</span>f<span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="comment token">//L'argument doit être une référence d'élément de formulaire.</span> - f<span class="punctuation token">.</span>action <span class="operator token">=</span> <span class="string token">"a-different-url.cgi"</span><span class="punctuation token">;</span> - f<span class="punctuation token">.</span>name <span class="operator token">=</span> <span class="string token">"a-different-name"</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> - -<p id="Envoyer_un_formulaire_via_une_popup">Envoi d'un formulaire dans une nouvelle fenêtre :</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Example new-window form submission<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test.php<span class="punctuation token">"</span></span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span>First name: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>firstname<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span>Last name: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastname<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Pet preference<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cat<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> Cat<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dog<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> Dog<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Owned vehicles<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Bike<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>I have a bike<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Car<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>I have a car<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> +<p>Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p> + +<pre class="brush: html"><form name="formA" action="/cgi-bin/test" method="post"> + <p>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.</p> + <p> + <button type="button" onclick="getFormInfo();">Info</button> + <button type="button" onclick="setFormInfo(this.form);">Set</button> + <button type="reset">Reset</button> + </p> + + <textarea id="form-info" rows="15" cols="20"></textarea> +</form> + +<script> + function getFormInfo(){ + // Obtenir une référence au formulaire par son nom + var f = document.forms["formA"]; + // Les propriétés du formulaire qui nous intéressent + var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ]; + // Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur + var info = properties.reduce(function(property) { return property + ": " + f[property] }, "").join("\n"); + + // Définir les <textarea> du formulaire pour en afficher les propriétés + document.forms["formA"].elements['form-info'].value = info; + } + + function setFormInfo(f){ //L'argument doit être une référence d'élément de formulaire. + f.action = "a-different-url.cgi"; + f.name = "a-different-name"; + } +</script></pre> + +<p>Envoi d'un formulaire dans une nouvelle fenêtre :</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Example new-window form submission</title> +</head> +<body> + +<form action="test.php" target="_blank"> + <p><label>First name: <input type="text" name="firstname"></label></p> + <p><label>Last name: <input type="text" name="lastname"></label></p> + <p><label><input type="password" name="pwd"></label></p> + + <fieldset> + <legend>Pet preference</legend> + <p><label><input type="radio" name="pet" value="cat"> Cat</label></p> + <p><label><input type="radio" name="pet" value="dog"> Dog</label></p> + </fieldset> + + <fieldset> + <legend>Owned vehicles</legend> + + <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p> + <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p> + </fieldset> + + <p><button>Submit</button></p> +</form> + +</body> +</html></pre> <h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3> -<p>Vous pouvez consulter <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p> +<p>Vous pouvez consulter <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/htmlformelement/length/index.html b/files/fr/web/api/htmlformelement/length/index.html index 9ca717ea44..93fb19ff7c 100644 --- a/files/fr/web/api/htmlformelement/length/index.html +++ b/files/fr/web/api/htmlformelement/length/index.html @@ -9,21 +9,21 @@ translation_of: Web/API/HTMLFormElement/length <p>La propriété en lecture seule <code><strong>HTMLFormElement.length</strong></code> retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>integer</var> = form.length </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">if (document.getElementById("form1").length > 1) { // more than one form control here } </pre> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <ul> - <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length" title="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li> + <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li> <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li> </ul> diff --git a/files/fr/web/api/htmlformelement/method/index.html b/files/fr/web/api/htmlformelement/method/index.html index 5072c652ab..2b6d2ab603 100644 --- a/files/fr/web/api/htmlformelement/method/index.html +++ b/files/fr/web/api/htmlformelement/method/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/HTMLFormElement/method <p>La propriété <code><strong>HTMLFormElement.method</strong></code> représente la méthode HTTP utilisée pour soumettre un formulaire.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>string</em> = form.method form.method = <em>string</em> </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">document.forms["myform"].method = "post"; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> +<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p> diff --git a/files/fr/web/api/htmlformelement/name/index.html b/files/fr/web/api/htmlformelement/name/index.html index 6a144b2e79..50fa4fe6b1 100644 --- a/files/fr/web/api/htmlformelement/name/index.html +++ b/files/fr/web/api/htmlformelement/name/index.html @@ -11,12 +11,12 @@ translation_of: Web/API/HTMLFormElement/name <p>Si votre {{HTMLElement("Form")}} contient un élément appelé <em>name</em>, alors ce dernier redéfinit la propriété <code>form.name</code>, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec <code>createElement()</code> à partir de la propriété <code>name</code>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>string</em> = form.name form.name = <em>string</em></pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var form1name = document.getElementById("form1").name; @@ -24,9 +24,9 @@ if (form1name != document.form.form1) { // browser doesn't support this form of reference }</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-name" title="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML 5, Section 4.10.3, The form Element</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li> + <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML 5, Section 4.10.3, The form Element</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li> </ul> diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.html b/files/fr/web/api/htmlformelement/reportvalidity/index.html index c53f63570e..c41fd7c61d 100644 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.html +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.html @@ -8,14 +8,14 @@ translation_of: Web/API/HTMLFormElement/reportValidity --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="tlid-translation translation"><span title="">La méthode</span></span> <strong><code>HTMLFormElement.reportValidity()</code></strong> <span class="tlid-translation translation"><span title="">renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation.</span> <span title="">Lorsque la valeur</span></span> <code>false</code> <span class="tlid-translation translation"><span title="">est renvoyée,</span></span> , <span class="tlid-translation translation"><span title="">les événements</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid">invalid</a></code> <span class="tlid-translation translation"><span title="">annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur.</span></span> .</p> +<p>La méthode <strong><code>HTMLFormElement.reportValidity()</code></strong> renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur <code>false</code> est renvoyée, , les événements <code><a href="/en-US/docs/Web/Events/invalid">invalid</a></code> annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. .</p> <h2 id="Syntax">Syntax</h2> <pre class="syntaxbox"><em>HTMLFormElement</em>.reportValidity() </pre> -<h3 id="Valeur_de_retour"><span class="tlid-translation translation"><span title="">Valeur de retour</span></span></h3> +<h3 id="Valeur_de_retour">Valeur de retour</h3> <p>{{domxref("Boolean")}}</p> @@ -48,7 +48,7 @@ document.forms['myform'].addEventListener('submit', function() { <tr> <td>{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}</td> <td>{{Spec2("HTML5.1")}}</td> - <td><span class="tlid-translation translation"><span title="">Définition initiale</span></span></td> + <td>Définition initiale</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/htmlformelement/reset/index.html b/files/fr/web/api/htmlformelement/reset/index.html index 7ed17f275f..6d43514959 100644 --- a/files/fr/web/api/htmlformelement/reset/index.html +++ b/files/fr/web/api/htmlformelement/reset/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/HTMLFormElement/reset <p>Si un élément du formulaire (comme un bouton reset par exemple) a un <code>name</code> ou <code>id</code> valant <var>reset</var>, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme <code>disabled</code>, ne sont pas réinitialisés.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>HTMLFormElement</em>.reset() </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">document.getElementById("myform").reset(); </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> diff --git a/files/fr/web/api/htmlformelement/submit/index.html b/files/fr/web/api/htmlformelement/submit/index.html index d322958397..19479867d2 100644 --- a/files/fr/web/api/htmlformelement/submit/index.html +++ b/files/fr/web/api/htmlformelement/submit/index.html @@ -9,17 +9,17 @@ translation_of: Web/API/HTMLFormElement/submit --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="tlid-translation translation"><span title="">La méthode</span></span> <strong><code>HTMLFormElement.submit()</code></strong> <span class="tlid-translation translation"><span title="">soumet un</span></span> {{HtmlElement("form")}} <span class="tlid-translation translation"><span title="">donné</span></span></p> +<p>La méthode <strong><code>HTMLFormElement.submit()</code></strong> soumet un {{HtmlElement("form")}} donné</p> -<p><span class="tlid-translation translation"><span title="">Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}.</span> <span title="">Lors de l'appel direct de cette méthode, cependant:</span></span></p> +<p>Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Aucun événement {{event ("submit")}} n'est déclenché.</span> <span title="">En particulier, le formulaire</span></span> </li> - <li>{{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} <span class="tlid-translation translation"><span title="">le gestionnaire d'événement n'est pas exécuté</span></span> .</li> - <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> <span class="tlid-translation translation"><span title="">n'est pas déclenché</span></span> .</li> + <li>Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire </li> + <li>{{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté .</li> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> n'est pas déclenché .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Si un contrôle de formulaire (tel qu'un</span></span> submit <span class="tlid-translation translation"><span title="">bouton</span></span> ) <span class="tlid-translation translation"><span title="">a un</span></span><code>name</code> ou un <code>id</code> de <code>submit</code>, <span class="tlid-translation translation"><span title="">cette méthode masquera la méthode d'envoi du formulaire.</span></span></p> +<p>Si un contrôle de formulaire (tel qu'un submit bouton ) a un<code>name</code> ou un <code>id</code> de <code>submit</code>, cette méthode masquera la méthode d'envoi du formulaire.</p> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/api/htmlformelement/submit_event/index.html b/files/fr/web/api/htmlformelement/submit_event/index.html index 0b5eae85bc..2e6139eced 100644 --- a/files/fr/web/api/htmlformelement/submit_event/index.html +++ b/files/fr/web/api/htmlformelement/submit_event/index.html @@ -12,7 +12,7 @@ original_slug: Web/API/HTMLFormElement/submit_event_ <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</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;">Bouillonne</dt> diff --git a/files/fr/web/api/htmlformelement/target/index.html b/files/fr/web/api/htmlformelement/target/index.html index ac4d5f1e75..3d7a6002d0 100644 --- a/files/fr/web/api/htmlformelement/target/index.html +++ b/files/fr/web/api/htmlformelement/target/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/HTMLFormElement/target <p>La propriété <strong><code>HTMLFormElement.target</code></strong> représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>string</em> = form.target form.target = <em>string</em> </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">myForm.target = document.frames[1].name; </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> +<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p> +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p> diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.html b/files/fr/web/api/htmliframeelement/contentdocument/index.html index 7b9d4c9a8e..5580e0abc8 100644 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.html +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.html @@ -4,7 +4,7 @@ slug: Web/API/HTMLIFrameElement/contentDocument browser-compat: api.HTMLIFrameElement.contentDocument translation_of: 'HTMLIFrameElement.contentDocument' --- -<p>Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la <a href="/fr/docs/Web/Security/Same-origin_policy">même origine</a>, <code>HTMLIFrameElement.contentDocument</code> retourne un <a href="/fr/docs/Web/API/Document" title="L'interface « Document » représente toute page web chargée dans le navigateur en tant que point d'entrée dans le contenu de la page, à savoir l'arbre DOM."><code>Document</code></a> (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne <code>null</code>.</p> +<p>Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la <a href="/fr/docs/Web/Security/Same-origin_policy">même origine</a>, <code>HTMLIFrameElement.contentDocument</code> retourne un <a href="/fr/docs/Web/API/Document"><code>Document</code></a> (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne <code>null</code>.</p> <h2 id="examples">Exemples</code></h2> diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.html b/files/fr/web/api/htmliframeelement/contentwindow/index.html index 8ebaf2afd9..2dd8193ca3 100644 --- a/files/fr/web/api/htmliframeelement/contentwindow/index.html +++ b/files/fr/web/api/htmliframeelement/contentwindow/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/HTMLIFrameElement/contentWindow <h2 id="Exemples">Exemples</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>contentWindow<span class="punctuation token">;</span> -<span class="comment token">//x = window.frames[0];</span> +<pre class="brush: js">var x = document.getElementsByTagName("iframe")[0].contentWindow; +//x = window.frames[0]; -x<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">"blue"</span><span class="punctuation token">;</span> -<span class="comment token">// ceci devrait changer le 1er iframe dans le document bleu.</span></code></pre> +x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue"; +// ceci devrait changer le 1er iframe dans le document bleu.</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/htmliframeelement/csp/index.html b/files/fr/web/api/htmliframeelement/csp/index.html index f8a625f5ae..b07bf82f45 100644 --- a/files/fr/web/api/htmliframeelement/csp/index.html +++ b/files/fr/web/api/htmliframeelement/csp/index.html @@ -15,7 +15,7 @@ HTMLIFrameElement.csp = <em>csp</em></pre> <h3 id="value">Valeur</h3> -<p>Une <a href="https://w3c.github.io/webappsec-cspee/#dom-htmliframeelement-csp" class="external">stratégie de sécurité du contenu</a>.</p> +<p>Une <a href="https://w3c.github.io/webappsec-cspee/#dom-htmliframeelement-csp">stratégie de sécurité du contenu</a>.</p> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.html b/files/fr/web/api/htmliframeelement/featurepolicy/index.html index 452e826dd6..54bcd1037e 100644 --- a/files/fr/web/api/htmliframeelement/featurepolicy/index.html +++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.html @@ -12,15 +12,15 @@ translation_of: Web/API/HTMLIFrameElement/featurePolicy --- <div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <code><iframe></code> spécifique.</span></p> +<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <code><iframe></code> spécifique.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var policy = <em>HTMLIFrameElement</em>.featurePolicy</pre> +<pre class="syntaxbox">var policy = <em>HTMLIFrameElement</em>.featurePolicy</pre> <h3 id="Valeur">Valeur</h3> -<p>Un objet <a href="https://developer.mozilla.org/en-US/docs/Web/API/FeaturePolicy" title="Note: This interface is called Policy in Firefox."><code>FeaturePolicy</code></a> pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.</p> +<p>Un objet <a href="/en-US/docs/Web/API/FeaturePolicy"><code>FeaturePolicy</code></a> pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.</p> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/htmlimageelement/image/index.html b/files/fr/web/api/htmlimageelement/image/index.html index a3c9157213..669d6095b2 100644 --- a/files/fr/web/api/htmlimageelement/image/index.html +++ b/files/fr/web/api/htmlimageelement/image/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLImageElement/Image --- <div>{{ APIRef("HTML DOM") }}</div> -<p id="Image_Element_constructor">Le constructeur <strong><code>Image()</code></strong> crée une nouvelle instance {{domxref("HTMLImageElement")}} .</p> +<p>Le constructeur <strong><code>Image()</code></strong> crée une nouvelle instance {{domxref("HTMLImageElement")}} .</p> <p>C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.</p> @@ -26,21 +26,19 @@ translation_of: Web/API/HTMLImageElement/Image <dd>La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).</dd> </dl> -<h2 id="Exemples"><span style="line-height: 1.572;">Exemples</span></h2> +<h2 id="Exemples">Exemples</h2> <pre class="brush: js">var myImage = new Image(100, 200); myImage.src = 'picture.jpg'; console.log(myImage);</pre> -<div><span id="result_box" lang="fr"><span>Cela équivaudrait à définir la balise HTML suivante dans le</span></span> {{htmlelement("body")}} (<em>corps</em>) :</div> +<div>Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("body")}} (<em>corps</em>) :</div> <pre class="brush: html"><img width="100" height="200" src="picture.jpg"> </pre> -<div> </div> - <div class="note"> -<p><strong>Note </strong>: Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.</p> +<p><strong>Note :</strong> Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/htmlimageelement/index.html b/files/fr/web/api/htmlimageelement/index.html index 8ffe240cfb..cc2ab84054 100644 --- a/files/fr/web/api/htmlimageelement/index.html +++ b/files/fr/web/api/htmlimageelement/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLImageElement <h2 id="Propriétés">Propriétés</h2> -<p><em><span id="result_box" lang="fr"><span>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</span></span></em></p> +<p><em>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</em></p> <dl> <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt> @@ -21,7 +21,7 @@ translation_of: Web/API/HTMLImageElement <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt> <dd>Retourne un {{domxref("Boolean")}} <em>(booléen)</em> qui est <code>true</code> <em>(vrai)</em> si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .</dd> <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd> + <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd> <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt> <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).</dd> <dt>{{domxref("HTMLImageElement.height")}}</dt> @@ -33,13 +33,13 @@ translation_of: Web/API/HTMLImageElement <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt> <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL d'une longue description de l'image.</dd> <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui <span id="result_box" lang="fr"><span> fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</span></span></dd> + <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</dd> <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt> <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant le nom de l'élément.</dd> <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt> <dd>Retourne un <code>unsigned long</code> représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.</dd> <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} <span id="result_box" lang="fr"><span>indiquant la référence à utiliser pour récupérer l'image.</span></span></dd> + <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image.</dd> <dt>{{domxref("HTMLImageElement.src")}}</dt> <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.</dd> <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt> @@ -64,7 +64,7 @@ translation_of: Web/API/HTMLImageElement <dl> <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt> - <dd>Le constructeur d'image, comprend<span id="result_box" lang="fr"><span> deux propriétés </span></span> <code>unsigned</code> et <code>long</code> <span lang="fr"><span>, qui sont la largeur et la hauteur de la ressource, et crée une instance de </span></span> <code>HTMLImageElement</code> <span lang="fr"><span>, non insérée dans une arborescence DOM.</span></span></dd> + <dd>Le constructeur d'image, comprend deux propriétés <code>unsigned</code> et <code>long</code> , qui sont la largeur et la hauteur de la ressource, et crée une instance de <code>HTMLImageElement</code> , non insérée dans une arborescence DOM.</dd> </dl> <h2 id="Erreurs">Erreurs</h2> @@ -81,20 +81,20 @@ translation_of: Web/API/HTMLImageElement <h2 id="Exemple">Exemple</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> img1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Constructeur HTML5</span> -img1<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image1.png'</span><span class="punctuation token">;</span> -img1<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt'</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img1<span class="punctuation token">)</span><span class="punctuation token">;</span></code> +<pre class="brush: js">var img1 = new Image(); // Constructeur HTML5 +img1.src = 'image1.png'; +img1.alt = 'alt'; +document.body.appendChild(img1); -<span class="keyword token">var</span> img2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'img'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// utilise DOM HTMLImageElement</span> -img2<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image2.jpg'</span><span class="punctuation token">;</span> -img2<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt text'</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img2<span class="punctuation token">)</span><span class="punctuation token">;</span> +var img2 = document.createElement('img'); // utilise DOM HTMLImageElement +img2.src = 'image2.jpg'; +img2.alt = 'alt text'; +document.body.appendChild(img2); -<span class="comment token">// en utilisant la première image dans le document</span> -<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>images<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>src<span class="punctuation token">)</span><span class="punctuation token">;</span></pre> +// en utilisant la première image dans le document +alert(document.images[0].src);</pre> -<h2 class="brush: js line-numbers language-js" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/htmlinputelement/index.html b/files/fr/web/api/htmlinputelement/index.html index 6a61fadaed..05a9d8bdd6 100644 --- a/files/fr/web/api/htmlinputelement/index.html +++ b/files/fr/web/api/htmlinputelement/index.html @@ -77,7 +77,7 @@ translation_of: Web/API/HTMLInputElement <tr> <td><code>value</code></td> <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control. - <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p> + <div><p><strong>Note :</strong> If the user enters a value different from the value expected, this may return an empty string.</p></div> </td> </tr> <tr> @@ -96,7 +96,7 @@ translation_of: Web/API/HTMLInputElement </table> <table class="standard-table"> - <caption><a id="Properties_checkbox_radio" name="Properties_checkbox_radio"></a>Properties that apply only to elements of type <code>"checkbox"</code> or <code>"radio"</code></caption> + <caption>Properties that apply only to elements of type <code>"checkbox"</code> or <code>"radio"</code></caption> <tbody> <tr> <td><code>checked</code></td> @@ -107,7 +107,7 @@ translation_of: Web/API/HTMLInputElement <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td> </tr> <tr> - <td><code><a id="indeterminate" name="indeterminate"></a>indeterminate</code></td> + <td><code>indeterminate</code></td> <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td> </tr> </tbody> @@ -136,7 +136,7 @@ translation_of: Web/API/HTMLInputElement </table> <table class="standard-table"> - <caption><a id="Properties_file" name="Properties_file"></a>Properties that apply only to elements of type <code>"file"</code></caption> + <caption>Properties that apply only to elements of type <code>"file"</code></caption> <tbody> <tr> <td><code>accept</code></td> @@ -147,7 +147,7 @@ translation_of: Web/API/HTMLInputElement <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td> </tr> <tr> - <td><a id="files_prop" name="files_prop"><code>files</code></a></td> + <td><code>files</code></td> <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td> </tr> <tr> @@ -176,7 +176,7 @@ translation_of: Web/API/HTMLInputElement </tr> <tr> <td><code>maxLength</code></td> - <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> + <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <strong>maximum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> </tr> <tr> <td><code>min</code></td> @@ -184,11 +184,11 @@ translation_of: Web/API/HTMLInputElement </tr> <tr> <td><code>minLength</code></td> - <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <u><strong>minimum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> + <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <strong>minimum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td> </tr> <tr> <td><code>pattern</code></td> - <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td> + <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <strong>regular expression</strong> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td> </tr> <tr> <td><code>placeholder</code></td> @@ -216,7 +216,7 @@ translation_of: Web/API/HTMLInputElement </tr> <tr> <td><code>size</code></td> - <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>visual size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td> + <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <strong>visual size of the control</strong>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html index 05fe0a451a..2708b7193f 100644 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.html +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">const video = document.querySelector('video'); +<pre class="brush: js">const video = document.querySelector('video'); const videoSrc = 'https://path/to/video.webm'; video.addEventListener('abort', () => { diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html index 95fdb08c7e..8c55a0b0ef 100644 --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.html +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/canplay_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</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;">Propagation</dt> diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html index 9a67a55a00..4d19f00190 100644 --- a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html +++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/canplaythrough_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</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;">Propagation</dt> diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html index 0c5573379c..b49118ca25 100644 --- a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html +++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/durationchange_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</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> diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html index d550ba2b11..34243d5fcd 100644 --- a/files/fr/web/api/htmlmediaelement/emptied_event/index.html +++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLMediaElement/emptied_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</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> diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html index 742ad75319..db59f0187f 100644 --- a/files/fr/web/api/htmlmediaelement/ended_event/index.html +++ b/files/fr/web/api/htmlmediaelement/ended_event/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/HTMLMediaElement/ended_event <ul> <li>Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent <strong>ended</strong> lorsque la lecture du média atteint la fin.</li> - <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque <span id="result_box" lang="fr"><span>la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver</span></span>: + <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver: <ul> <li>il n'y a plus de données à envoyer.</li> - <li>L'utilisateur a <span id="result_box" lang="fr"><span>révoqué les autorisations nécessaires pour que les données soient envoyées</span></span>.</li> - <li><span id="result_box" lang="fr"><span>Le matériel générant les données source a été supprimé ou éjecté</span></span>.</li> - <li><span id="result_box" lang="fr"><span>Un peer distant a définitivement cessé d'envoyer des données.</span> <span>La mise en pause des médias ne génère pas l'événement <strong>ended</strong></span></span>.</li> + <li>L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.</li> + <li>Le matériel générant les données source a été supprimé ou éjecté.</li> + <li>Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement <strong>ended</strong>.</li> </ul> </li> </ul> @@ -23,7 +23,7 @@ translation_of: Web/API/HTMLMediaElement/ended_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</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> @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLMediaElement/ended_event </dl> <div class="note"> -<p><span id="result_box" lang="fr"><span>Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une.</span> <span>Si à un moment donné, cela change, la documentation sera révisée.</span></span></p> +<p><strong>Note :</strong> Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.</p> </div> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html index e29df54e39..86941892db 100644 --- a/files/fr/web/api/htmlmediaelement/index.html +++ b/files/fr/web/api/htmlmediaelement/index.html @@ -22,10 +22,9 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> <dd>est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (<em>pistes audio</em>) contenus dans l'élément.</dd> <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt> - <dd>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</dd> - <dd> + <dd><p>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</p> <div class="note"> - <p>Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p> + <p><strong>Note :</strong> Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p> </div> </dd> <dt>{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}</dt> @@ -37,7 +36,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt> <dd>renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La <code>DOMTokenList</code> prend une ou plusieurs des trois valeurs possibles : <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</dd> <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd> + <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd> <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt> <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avec l'URL absolue de la ressource de média choisie.</dd> <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt> @@ -101,9 +100,9 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}</dt> <dd>Renvoie la liste d'objets {{domxref("TextTrack")}} (<em>piste de texte</em>) contenus dans l'élément.</dd> <dt>{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}</dt> - <dd>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément. + <dd><p>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément.</p> <div class="note"> - <p><strong>Note : </strong>Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p> + <p><strong>Note :</strong> Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p> </div> </dd> <dt>{{domxref("HTMLMediaElement.volume")}}</dt> @@ -163,7 +162,7 @@ translation_of: Web/API/HTMLMediaElement <dt>{{domxref("HTMLMediaElement.pause()")}}</dt> <dd>met en pause la lecture du média.</dd> <dt>{{domxref("HTMLMediaElement.play()")}}</dt> - <dd><span class="short_text" id="result_box" lang="fr"><span>commence la lecture du média.</span></span></dd> + <dd>commence la lecture du média.</dd> <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt> <dd>cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.</dd> <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt> @@ -230,9 +229,9 @@ translation_of: Web/API/HTMLMediaElement </li> <li>Articles <ul> - <li><a class="internal" href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> - <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li> + <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li> </ul> </li> </ul> diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html index 091fd3406d..67d72a2cc2 100644 --- a/files/fr/web/api/htmlmediaelement/play/index.html +++ b/files/fr/web/api/htmlmediaelement/play/index.html @@ -78,7 +78,7 @@ myVideo.play().then(() => { </table> <div class="note"> -<p>Notez que les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p> +<p><strong>Note :</strong> Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p> </div> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html index 130734e004..718b08a924 100644 --- a/files/fr/web/api/htmlmediaelement/volume/index.html +++ b/files/fr/web/api/htmlmediaelement/volume/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/HTMLMediaElement/volume <p>La propriété <strong><code>HTMLMediaElement.volume</code></strong> définit le volume auquel le média doit être lu. </p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <em>volume</em> = <em>video</em>.volume; //1</pre> @@ -58,7 +58,7 @@ obj.volume = 0.75;</pre> <p>{{Compat("api.HTMLMediaElement.volume")}}</p> -<h2 id="See_Also" name="See_Also">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> diff --git a/files/fr/web/api/htmloptionelement/index.html b/files/fr/web/api/htmloptionelement/index.html index 86864530ff..b1294570c6 100644 --- a/files/fr/web/api/htmloptionelement/index.html +++ b/files/fr/web/api/htmloptionelement/index.html @@ -88,15 +88,10 @@ translation_of: Web/API/HTMLOptionElement <h2 id="Methods">Méthodes</h2> <p><em>Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.</em></p> + <dl> - <dt> - {{domxref("HTMLOptionElement.Option()")}}</dt> - <dd> - </dd> - <dd> - </dd> - <dd> - c'est le constructeur créant l'objet <code>HTMLOptionElement</code> object. il accepte quatre valeurs : le texte à afficher , <code>text</code>, la valeur associée au texte , <code>value</code>, la valeur du <code>defaultSelected</code>, et la valeur du <code>selected</code>. les trois dernières sont optionnelles.</dd> + <dt>{{domxref("HTMLOptionElement.Option()")}}</dt> + <dd><p>C'est le constructeur créant l'objet <code>HTMLOptionElement</code> object. il accepte quatre valeurs : le texte à afficher , <code>text</code>, la valeur associée au texte , <code>value</code>, la valeur du <code>defaultSelected</code>, et la valeur du <code>selected</code>. les trois dernières sont optionnelles.</p></dd> </dl> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/htmloptionelement/option/index.html b/files/fr/web/api/htmloptionelement/option/index.html index 80dc7f77cd..975d2cc634 100644 --- a/files/fr/web/api/htmloptionelement/option/index.html +++ b/files/fr/web/api/htmloptionelement/option/index.html @@ -92,8 +92,7 @@ options.forEach(function(element, key) { </thead> <tbody> <tr> - <td><a class="external external-icon" href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option" hreflang="en" lang="en">HTML5<br> - <small lang="en-US">The definition of 'Option' in that specification.</small></a></td> + <td><a href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option">HTML5 La définition de Option dans cette spécification.</a></td> <td>Recommendation</td> <td></td> </tr> diff --git a/files/fr/web/api/htmlquoteelement/index.html b/files/fr/web/api/htmlquoteelement/index.html index 793915e248..e76d04bb47 100644 --- a/files/fr/web/api/htmlquoteelement/index.html +++ b/files/fr/web/api/htmlquoteelement/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/HTMLQuoteElement --- <p>{{ ApiRef() }}</p> <h2 id="Interface_des_éléments_HTML_de_citation">Interface des éléments HTML de citation</h2> -<p>Les objets DOM quote expose l'interface <a href="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement" title="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement"><code>HTMLQuoteElement</code></a> (ou {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763"><code>HTMLQuoteElement</code></a>), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).</p> +<p>Les objets DOM quote expose l'interface <a href="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement"><code>HTMLQuoteElement</code></a> (ou {{ HTMLVersionInline(4) }} <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763"><code>HTMLQuoteElement</code></a>), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).</p> <h2 id="Propriétés">Propriétés</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/htmlselectelement/remove/index.html b/files/fr/web/api/htmlselectelement/remove/index.html index 003a8e727c..71b6fd591e 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.html +++ b/files/fr/web/api/htmlselectelement/remove/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLSelectElement/remove <pre class="eval">collection.remove(index); </pre> -<h3 id="Parameters" name="Parameters">Paramètre</h3> +<h3 id="Parameters">Paramètre</h3> <ul> <li><em>index est</em> un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.</li> diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.html b/files/fr/web/api/htmlselectelement/selectedindex/index.html index 5abdf83974..4000816569 100644 --- a/files/fr/web/api/htmlselectelement/selectedindex/index.html +++ b/files/fr/web/api/htmlselectelement/selectedindex/index.html @@ -30,7 +30,7 @@ translation_of: Web/API/HTMLSelectElement/selectedIndex <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select'); +<pre class="brush: js">var selectElem = document.getElementById('select'); var pElem = document.getElementById('p'); // Quand une nouvelle <option> est selectionnée diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html index da37763056..aa5cad6adc 100644 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLSelectElement/setCustomValidity <h2 id="Syntaxe">Syntaxe</h2> -<pre class="eval language-html"><code class="language-html"><em>ElmSelectionne</em>.setCustomValidity(<em>message</em>);</code></pre> +<pre class="brush: js">ElmSelectionne.setCustomValidity(message);</pre> <h3 id="Paramètres">Paramètres</h3> diff --git a/files/fr/web/api/htmlshadowelement/index.html b/files/fr/web/api/htmlshadowelement/index.html index 74297aa31f..baaff80c85 100644 --- a/files/fr/web/api/htmlshadowelement/index.html +++ b/files/fr/web/api/htmlshadowelement/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLShadowElement --- <div>{{APIRef("Web Components")}}{{Deprecated_header}}</div> -<p class="summary">L'interface <code><strong>HTMLShadowElement</strong></code> représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le <a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p> +<p>L'interface <code><strong>HTMLShadowElement</strong></code> représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le <a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>.</p> <p>{{InheritanceDiagram(600, 120)}}</p> diff --git a/files/fr/web/api/htmlspanelement/index.html b/files/fr/web/api/htmlspanelement/index.html index 013a2d9777..1746f9c197 100644 --- a/files/fr/web/api/htmlspanelement/index.html +++ b/files/fr/web/api/htmlspanelement/index.html @@ -8,12 +8,12 @@ translation_of: Web/API/HTMLSpanElement --- <div> {{ ApiRef() }}</div> -<p>L'élément DOM <code>span</code> supporte l'interface <code><span class="external">HTMLSpanElement</span></code>, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à <code>HTMLElement</code>.</p> +<p>L'élément DOM <code>span</code> supporte l'interface <code>HTMLSpanElement</code>, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à <code>HTMLElement</code>.</p> <h2 id="Voir_également">Voir également</h2> <ul> <li>{{ HTMLElement("span") }}</li> - <li>Spécification W3C de l'élément <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN">span</a></li> - <li>Spécification DOM : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">interface <span class="external"><code>HTMLElement</code></span></a></li> + <li>Spécification W3C de l'élément <a href="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN">span</a></li> + <li>Spécification DOM : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">interface <code>HTMLElement</code></a></li> </ul> <div> </div> diff --git a/files/fr/web/api/htmlstyleelement/index.html b/files/fr/web/api/htmlstyleelement/index.html index 75fb1d9b74..c9ed1c8cbf 100644 --- a/files/fr/web/api/htmlstyleelement/index.html +++ b/files/fr/web/api/htmlstyleelement/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/API/HTMLStyleElement --- <p>{{ ApiRef() }}</p> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :</p> <ul> <li><a href="fr/DOM/element.style">L'objet DOM element.style</a></li> @@ -14,7 +14,7 @@ translation_of: Web/API/HTMLStyleElement <li><a href="fr/DOM/cssRule">L'objet DOM cssRule</a></li> <li><a href="fr/DOM/CSS">La liste des propriétés DOM CSS</a></li> </ul> -<h3 id="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages" name="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages">Informations à déplacer vers d'autres pages</h3> +<h3 id="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages">Informations à déplacer vers d'autres pages</h3> <p>L'objet basique <code>style</code> explose les interfaces <code>StyleSheet</code> et <code>CSSStyleSheet</code> de la spécification <i> DOM Level 2 Style</i> @@ -66,7 +66,7 @@ function resetStyle(elemId) { </html> </pre> <p>La méthode <code>getComputedStyle()</code> de l'objet <code>document.defaultView</code> renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'<a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples#Exemple_6_:_getComputedStyle">exemple 6 : getComputedStyle</a> dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.</p> -<h3 id="L.27objet_DOM_style" name="L.27objet_DOM_style">L'objet DOM style</h3> +<h3 id="L.27objet_DOM_style">L'objet DOM style</h3> <p>L'objet <code>style</code> représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection <code><a href="fr/DOM/document.styleSheets">document.styleSheets</a></code>, on accède à l'objet depuis l'objet <code>document</code> ou depuis les éléments auxquels ce style est appliqué. Il représente les styles <i> in-line</i> @@ -98,7 +98,7 @@ el.setAttribute("style", "background-color:darkblue;"); </pre> <p><br> Soyez cependant conscient que <code>setAttribute</code> écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple <code>style="font-size: 18px"</code>, cette valeur serait supprimée par l'utilisation de <code>setAttribute</code>.</p> -<h5 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h5> +<h5 id="Propri.C3.A9t.C3.A9s">Propriétés</h5> <dl> <dt> <a href="fr/DOM/style.media">style.media</a></dt> @@ -108,8 +108,4 @@ el.setAttribute("style", "background-color:darkblue;"); <a href="fr/DOM/style.type">style.type</a></dt> <dd> renvoie le type de style appliqué par cette règle.</dd> -</dl> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/style", "es": "es/DOM/style", "pl": "pl/DOM/style" } ) }}</p> +</dl>
\ No newline at end of file diff --git a/files/fr/web/api/htmltablecellelement/index.html b/files/fr/web/api/htmltablecellelement/index.html index 0369164d8e..f3f3fdf60e 100644 --- a/files/fr/web/api/htmltablecellelement/index.html +++ b/files/fr/web/api/htmltablecellelement/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/HTMLTableCellElement <div>{{ APIRef("HTML DOM") }}</div> </div> -<p>L'interface <strong><span class="external"><code>HTMLTableCellElement</code></span></strong> expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.</p> +<p>L'interface <strong><code>HTMLTableCellElement</code></strong> expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.</p> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p> @@ -40,14 +40,14 @@ translation_of: Web/API/HTMLTableCellElement <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt> <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple <code>'.'</code> pour l'anglais, <code>ou ','</code> pour le français. Cette propriété était optionnelle et peu supportée.</dd> <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt> - <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>; sinon à gauche pour les écritures de droite à gauche) du caractère défini par <code>HTMLTableCellElement.ch</code>. Cette propriété était optionnelle et peu supportée.</dd> + <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite ; sinon à gauche pour les écritures de droite à gauche) du caractère défini par <code>HTMLTableCellElement.ch</code>. Cette propriété était optionnelle et peu supportée.</dd> <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt> <dd>Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.</dd> <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt> <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, <code>ou "baseline"</code>.</dd> </dl> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <p><em>Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p> @@ -68,7 +68,7 @@ translation_of: Web/API/HTMLTableCellElement <tr> <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td> <td>{{Spec2('HTML5 W3C')}}</td> - <td>Les propriétés suivantes sont devenues obsolètes<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>: <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, <code>et vAlign</code>.<br> + <td>Les propriétés suivantes sont devenues obsolètes : <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, <code>et vAlign</code>.<br> La propriété <code>headers</code> est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.<br> Les propriétés <code>colspan</code> et <code>rowspan</code> renvoient maintenant des entiers long positifs (<code>unsigned long)</code>.</td> </tr> @@ -92,5 +92,5 @@ translation_of: Web/API/HTMLTableCellElement <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>Éléments HTML implémentant cette interface <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span> : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.</li> + <li>Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.</li> </ul> diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html index a3d9226edd..2c92407bea 100644 --- a/files/fr/web/api/htmltableelement/caption/index.html +++ b/files/fr/web/api/htmltableelement/caption/index.html @@ -6,21 +6,21 @@ tags: translation_of: Web/API/HTMLTableElement/caption --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p><b>caption</b> renvoie la légende du tableau.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>string</i> = table.caption </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval">if (table.caption) { // On peut alors faire quelque chose avec la légende du tableau } </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li> </ul> <p>{{ languages( { "en": "en/DOM/table.caption", "pl": "pl/DOM/table.caption" } ) }}</p> diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html index ab997c53a9..e14d2f1f47 100644 --- a/files/fr/web/api/htmltableelement/index.html +++ b/files/fr/web/api/htmltableelement/index.html @@ -7,9 +7,9 @@ translation_of: Web/API/HTMLTableElement --- <div> {{ ApiRef() }}</div> -<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table" name="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2> -<p>Les objets <code>table</code> exposent l'interface <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p> -<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2> +<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2> +<p>Les objets <code>table</code> exposent l'interface <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p> +<h2 id="Propri.C3.A9t.C3.A9s">Propriétés</h2> <dl> <dt> <a href="/fr/docs/DOM/table.caption">table.caption</a></dt> @@ -73,7 +73,7 @@ translation_of: Web/API/HTMLTableElement <dd> <b>width</b> obtient ou définit la largeur du tableau.</dd> </dl> -<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> +<h2 id="M.C3.A9thodes">Méthodes</h2> <dl> <dt> <a href="/fr/docs/DOM/table.createTHead">table.createTHead</a></dt> diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html index e469cb6679..f07140adda 100644 --- a/files/fr/web/api/htmltableelement/insertrow/index.html +++ b/files/fr/web/api/htmltableelement/insertrow/index.html @@ -16,20 +16,20 @@ translation_of: Web/API/HTMLTableElement/insertRow <p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre> <ul> - <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li> + <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li> <li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li> - <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut.</li> + <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut.</li> <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br> <code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br> var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:html"><table id="TableA"> <tr> @@ -60,7 +60,7 @@ ajouteLigne('TableA'); <p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p> -<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p> +<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html index 18955f4af7..a382d43e45 100644 --- a/files/fr/web/api/htmltablerowelement/index.html +++ b/files/fr/web/api/htmltablerowelement/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/HTMLTableRowElement <p>{{InheritanceDiagram(600, 120)}}</p> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p> @@ -38,7 +38,7 @@ translation_of: Web/API/HTMLTableRowElement <dd>Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, ou <code>"baseline"</code>.</dd> </dl> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <p><em>Hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p> diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html index 34414eead6..7b4ebb53b1 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.html +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.html @@ -7,8 +7,8 @@ translation_of: Web/API/HTMLTableRowElement/insertCell <p>La méthode <strong><code>HTMLTableRowElement.insertCell()</code></strong> insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> <code>insertCell()</code> insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <code><td></code>.</p> +<div class="note"> +<p><strong>Note :</strong> <code>insertCell()</code> insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <code><td></code>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/htmltimeelement/index.html b/files/fr/web/api/htmltimeelement/index.html index 86edbee186..aa3bf1b0c7 100644 --- a/files/fr/web/api/htmltimeelement/index.html +++ b/files/fr/web/api/htmltimeelement/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLTimeElement --- <div>{{ APIRef("HTML DOM") }}</div> -<p><span class="seoSummary">L'interface <strong><code>HTMLTimeElement</code></strong> fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.</span></p> +<p>L'interface <strong><code>HTMLTimeElement</code></strong> fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.</p> <p>{{InheritanceDiagram(600, 120)}}</p> diff --git a/files/fr/web/api/htmlvideoelement/index.html b/files/fr/web/api/htmlvideoelement/index.html index cb4fc66b5f..e146b86d4e 100644 --- a/files/fr/web/api/htmlvideoelement/index.html +++ b/files/fr/web/api/htmlvideoelement/index.html @@ -80,7 +80,7 @@ translation_of: Web/API/HTMLVideoElement <h2 id="Évènements">Évènements</h2> -<p><font><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on<NomEvenement></code> (ex. <code>onclick</code>) de l'interface.</font></p> +<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on<NomEvenement></code> (ex. <code>onclick</code>) de l'interface.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbcursor/index.html b/files/fr/web/api/idbcursor/index.html index dec3306209..a60210cbee 100644 --- a/files/fr/web/api/idbcursor/index.html +++ b/files/fr/web/api/idbcursor/index.html @@ -44,11 +44,13 @@ translation_of: Web/API/IDBCursor <dd>Renvoie la clé primaire effective actuelle du curseur ou <code>undefined</code> si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.</dd> </dl> -<h2 id="Constantes"><a id="constantes" name="constantes">Constantes</a></h2> +<h2 id="Constantes">Constantes</h2> <p>{{deprecated_header(13)}}</p> -<p class="warning">Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).</p> +<div class="warning"> + <p><strong>Attention :</strong> Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).</p> +</div> <table class="standard-table"> <thead> @@ -142,5 +144,5 @@ translation_of: Web/API/IDBCursor <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li> <li>Manipuler des curseurs: {{domxref("IDBCursor")}}</li> - <li>Exemple de référence pour IndexedDB : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li> + <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li> </ul> diff --git a/files/fr/web/api/idbdatabase/close/index.html b/files/fr/web/api/idbdatabase/close/index.html index 26473ab2d7..63f025584d 100644 --- a/files/fr/web/api/idbdatabase/close/index.html +++ b/files/fr/web/api/idbdatabase/close/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/IDBDatabase/close <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[16]">// ouverture de la connexion à la base de données toDoList +<pre class="brush: js">// ouverture de la connexion à la base de données toDoList var DBOpenRequest = window.indexedDB.open("toDoList", 4); // deux gestionnaires d’événements effectuant les diff --git a/files/fr/web/api/idbdatabase/index.html b/files/fr/web/api/idbdatabase/index.html index 6a9bfb1fd7..9be924fb0b 100644 --- a/files/fr/web/api/idbdatabase/index.html +++ b/files/fr/web/api/idbdatabase/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/IDBDatabase <p>{{AvailableInWorkers}}</p> <div class="note"> -<p><strong>Note : </strong>Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.</p> +<p><strong>Note :</strong> Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.</p> </div> <h2 id="Méthodes">Méthodes</h2> @@ -53,14 +53,13 @@ translation_of: Web/API/IDBDatabase <dd>S’exécute au déclenchement de l'événement <code>error</code> quand la connexion à la base de donnée échoue.</dd> <dt>{{domxref("IDBDatabase.onversionchange")}}</dt> <dd>S’exécute au déclenchement de l'événement <code>versionchange</code> quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.</dd> - <dt> - <h2 id="Exemples">Exemples</h2> - </dt> </dl> +<h2 id="Exemples">Exemples</h2> + <p>Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p> -<pre class="brush: js;highlight:[13,24,26,27,28,32]">// On ouvre la base de données +<pre class="brush: js">// On ouvre la base de données var DBOpenRequest = window.indexedDB.open("toDoList", 4); // On ajoute les deux gestionnaires d'événements diff --git a/files/fr/web/api/idbdatabase/name/index.html b/files/fr/web/api/idbdatabase/name/index.html index c2247da499..635a6ae383 100644 --- a/files/fr/web/api/idbdatabase/name/index.html +++ b/files/fr/web/api/idbdatabase/name/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/IDBDatabase/name <p>Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable <code>db</code>, puis sa propriété <code>name</code> est affichée dans la console.</p> -<pre class="brush: js;highlight:[16]">// Connexion à la base de données +<pre class="brush: js">// Connexion à la base de données var DBOpenRequest = window.indexedDB.open("toDoList", 4); // Les deux gestionnaires d'événement activés pour @@ -48,7 +48,9 @@ DBOpenRequest.onsuccess = function(event) { console.log(db.name); };</pre> -<p class="note">Pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.html b/files/fr/web/api/idbdatabase/objectstorenames/index.html index 95de1826a2..f9263bdf33 100644 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.html +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.html @@ -45,7 +45,9 @@ DBOpenRequest.onsuccess = function(event) { console.log(db.objectStoreNames); };</pre> -<p class="note">Pour un exemple fonctionnel complet, voir notre application de démo <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em></a>).</p> +<div class="note"> + <p><strong>Note :</strong>Pour un exemple fonctionnel complet, voir notre application de démo <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em></a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbdatabase/transaction/index.html b/files/fr/web/api/idbdatabase/transaction/index.html index 501c1fe7a3..531edfbdb2 100644 --- a/files/fr/web/api/idbdatabase/transaction/index.html +++ b/files/fr/web/api/idbdatabase/transaction/index.html @@ -19,18 +19,14 @@ translation_of: Web/API/IDBDatabase/transaction <dl> <dt>storeNames</dt> - <dd>un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin.<br> - Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes : + <dd><p>un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin. Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :</p> <pre class="brush: js">var transaction = db.transaction(['my-store-name']); var transaction = db.transaction('my-store-name');</pre> - Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}: - + <p>Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:</p> <pre class="brush:js;">var transaction = db.transaction(db.objectStoreNames);</pre> - Passer un tableau vide lèvera une exception.</dd> + <p>Passer un tableau vide lèvera une exception.</p></dd> <dt>mode {{optional_inline}}</dt> - <dd> - <p>Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default <code>readonly</code>):</p> - + <dd><p>Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default <code>readonly</code>):</p> <table class="standard-table"> <thead> <tr> @@ -40,32 +36,30 @@ var transaction = db.transaction('my-store-name');</pre> </thead> <tbody> <tr> - <td id="readonly"><code>readonly</code></td> + <td><code>readonly</code></td> <td>permet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.</td> </tr> <tr> - <td id="readwrite"><code>readwrite</code></td> + <td><code>readwrite</code></td> <td>Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.</td> </tr> - <tr id="versionchange"> + <tr> <td><code>versionchange</code></td> <td>Permet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.</td> </tr> <tr> - <td id="readwriteflush "><code>readwriteflush</code></td> + <td><code>readwriteflush</code></td> <td> <p>Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le <code> dom.indexedDB.experimental </code> pref est réglé sur <code> true </code> dans <code> about:config.</code></p> - <p class="note">Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code> l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p> + <div class="note"><p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code> l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p></div> </td> </tr> </tbody> </table> - {{note("Pour éviter des pertes de performance, n’utilisez le mode <code>readwrite</code> que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe: - + <p>Pour éviter des pertes de performance, n’utilisez le mode <code>readwrite</code> que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:</p> <pre class="brush:js">var transaction = db.transaction('monMagasin','readwrite');</pre> </dd> - <dd> </dd> </dl> <h2 id="Renvoie">Renvoie</h2> @@ -121,7 +115,8 @@ transaction.onerror = function(event) { var objectStore = transaction.objectStore("toDoList"); // etc.</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong>Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécification">Spécification</h2> @@ -153,5 +148,5 @@ var objectStore = transaction.objectStore("toDoList"); <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbdatabase/version/index.html b/files/fr/web/api/idbdatabase/version/index.html index c692965224..81289060e2 100644 --- a/files/fr/web/api/idbdatabase/version/index.html +++ b/files/fr/web/api/idbdatabase/version/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/IDBDatabase/version <h2 id="Exemples">Exemples</h2> -<pre class="brush: js;highlight:[16]">// On ouvre la base de données +<pre class="brush: js">// On ouvre la base de données var DBOpenRequest = window.indexedDB.open("toDoList", 4); // On déclare des gestionnaires d'évènements pour l'ouverture @@ -73,5 +73,5 @@ DBOpenRequest.onsuccess = function(event) { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbenvironment/index.html b/files/fr/web/api/idbenvironment/index.html index aabd28dfab..ffe93f3b02 100644 --- a/files/fr/web/api/idbenvironment/index.html +++ b/files/fr/web/api/idbenvironment/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/IDBEnvironment <div>{{APIRef}}</div> <div class="warning"> -<p><strong>Important :</strong> À partir de Firefox 52, la propriété définie dans ce <em>mixin</em> a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.</p> +<p><strong>Attention :</strong> À partir de Firefox 52, la propriété définie dans ce <em>mixin</em> a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.</p> </div> <p>L'utilitaire <strong><code>IDBEnvironment</code></strong>, lié à l'interface <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a>, contient la propriété <code>indexedDB</code> qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.</p> @@ -29,7 +29,7 @@ translation_of: Web/API/IDBEnvironment <p>Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements <code>onsuccess</code> de la requête :</p> -<pre class="brush: js;highlight:[3]">var db; +<pre class="brush: js">var db; function openDB() { var DBOpenRequest = window.indexedDB.open("toDoList"); DBOpenRequest.onsuccess = function(e) { @@ -74,5 +74,5 @@ function openDB() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbfactory/cmp/index.html b/files/fr/web/api/idbfactory/cmp/index.html index f564db7da3..0abf09e9d2 100644 --- a/files/fr/web/api/idbfactory/cmp/index.html +++ b/files/fr/web/api/idbfactory/cmp/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/IDBFactory/cmp <p>{{AvailableInWorkers}}</p> -<p class="note"><strong>Note :</strong> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.</p> +<div class="note"><p><strong>Note :</strong> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.</p></div> <h2 id="Syntaxe">Syntaxe</h2> @@ -109,5 +109,5 @@ console.log( "Résultat de la comparaison : " + result );</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.html b/files/fr/web/api/idbfactory/deletedatabase/index.html index 77b4765efd..a890a63166 100644 --- a/files/fr/web/api/idbfactory/deletedatabase/index.html +++ b/files/fr/web/api/idbfactory/deletedatabase/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/IDBFactory/deleteDatabase <pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(<em>nom</em>);</pre> -<p><span class="idlInterface"><span class="idlMethod">Une version expérimentale permet de gérer des options (cf. ci-après) :</span></span></p> +<p>Une version expérimentale permet de gérer des options (cf. ci-après) :</p> <pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(nom, options);</pre> diff --git a/files/fr/web/api/idbfactory/index.html b/files/fr/web/api/idbfactory/index.html index cc1728ca4a..b424b0af20 100644 --- a/files/fr/web/api/idbfactory/index.html +++ b/files/fr/web/api/idbfactory/index.html @@ -24,9 +24,9 @@ translation_of: Web/API/IDBFactory <h2 id="Exemples">Exemples</h2> -<p>Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notre application To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir l'exemple en <em>live</em></a>).</p> +<p>Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notre application To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple en <em>live</em></a>).</p> -<pre class="brush:js;highlight:[10]">var note = document.querySelector("ul"); +<pre class="brush:js">var note = document.querySelector("ul"); // Dans la ligne suivante, inclure les préfixes des // implémentations à tester diff --git a/files/fr/web/api/idbfactory/open/index.html b/files/fr/web/api/idbfactory/open/index.html index 34d73134b2..1bc014016e 100644 --- a/files/fr/web/api/idbfactory/open/index.html +++ b/files/fr/web/api/idbfactory/open/index.html @@ -43,12 +43,14 @@ var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>, <em>versio <dl> <dt><code>options</code> (<code>version</code> et <code>storage</code>) {{optional_inline}} {{deprecated_inline}}</dt> <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible de passer en paramètre un objet <code>options</code> non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre <code>version</code> définit ci-avant), et également une valeur <code>storage</code> qui décrit si on souhaite utiliser un stockage permanent (avec la valeur <code>persistent</code>) ou un stockage temporaire (avec la valeur <code>temporary</code>). - <div class="warning"><strong>Attention :</strong> l’attribut <code>storage</code> est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.</div> + <div class="warning"> + <p><strong>Attention :</strong> l’attribut <code>storage</code> est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.</p> + </div> </dd> </dl> <div class="note"> -<p><strong>Note :</strong> Vous pouvez consulter l'article <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">les limites de stockage du navigateur et les critères d'éviction</a> pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.</p> +<p><strong>Note :</strong> Vous pouvez consulter l'article <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">les limites de stockage du navigateur et les critères d'éviction</a> pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.</p> </div> <h3 id="Valeur_de_retour">Valeur de retour</h3> @@ -80,7 +82,7 @@ var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>, <em>versio <pre class="brush: js">var request = window.indexedDB.open("toDoList", 4);</pre> -<p>Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p> +<p>Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p> <pre class="brush:js">var note = document.querySelector("ul"); diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html index b9b6022001..f5cbe56570 100644 --- a/files/fr/web/api/idbindex/get/index.html +++ b/files/fr/web/api/idbindex/get/index.html @@ -87,7 +87,7 @@ translation_of: Web/API/IDBIndex/get }; };</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div> <h2 id="Spécification">Spécification</h2> @@ -106,7 +106,7 @@ translation_of: Web/API/IDBIndex/get </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBIndex.get")}}</p> @@ -119,5 +119,5 @@ translation_of: Web/API/IDBIndex/get <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html index 5099371f31..f9ed6d0d8f 100644 --- a/files/fr/web/api/idbindex/getall/index.html +++ b/files/fr/web/api/idbindex/getall/index.html @@ -97,5 +97,5 @@ getAllKeysRequest.onsuccess = function() { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html index cabf74e895..fd13fd5758 100644 --- a/files/fr/web/api/idbindex/getallkeys/index.html +++ b/files/fr/web/api/idbindex/getallkeys/index.html @@ -25,7 +25,7 @@ var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quant <dt><code>requete</code> {{optional_inline}}</dt> <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.</dd> <dt><code>quantite</code> {{optional_inline}}</dt> - <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2<sup>32</sup>-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd> + <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2^32-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd> </dl> <h3 id="Valeur_de_retour">Valeur de retour</h3> @@ -54,7 +54,7 @@ var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quant </tr> <tr> <td>{{jsxref("TypeError")}}</td> - <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2<sup>32</sup>-1</code></td> + <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2^32-1</code></td> </tr> </tbody> </table> @@ -98,5 +98,5 @@ getAllKeysRequest.onsuccess = function() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html index 6eb5146021..828f700fb9 100644 --- a/files/fr/web/api/idbindex/getkey/index.html +++ b/files/fr/web/api/idbindex/getkey/index.html @@ -131,5 +131,5 @@ var request = myIndex.getKey(key);</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li> + <li>L'exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li> </ul> diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html index f70700fe74..57e72be398 100644 --- a/files/fr/web/api/idbindex/index.html +++ b/files/fr/web/api/idbindex/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/IDBIndex <h2 id="Méthodes">Méthodes</h2> -<p>Hérite de: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p> +<p>Hérite de: <a href="/en/DOM/EventTarget">EventTarget</a></p> <dl> <dt>{{domxref("IDBIndex.count()")}}</dt> @@ -56,7 +56,7 @@ translation_of: Web/API/IDBIndex <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt> <dd>Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.</dd> <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt> - <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd> + <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="/fr/IndexedDB/Index#gloss_auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd> <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt> <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.</dd> <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt> @@ -69,7 +69,7 @@ translation_of: Web/API/IDBIndex <p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p> -<pre class="brush:js notranslate">function displayDataByIndex() { +<pre class="brush:js">function displayDataByIndex() { tableEntry.innerHTML = ''; //ouvre un transaction @@ -103,7 +103,7 @@ translation_of: Web/API/IDBIndex }; };</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div> <h2 id="Spécification">Spécification</h2> @@ -135,6 +135,6 @@ translation_of: Web/API/IDBIndex <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li> </ul> </div> diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html index 32aa7556ed..70a7c7ea4a 100644 --- a/files/fr/web/api/idbindex/isautolocale/index.html +++ b/files/fr/web/api/idbindex/isautolocale/index.html @@ -75,5 +75,5 @@ console.log(monIndex.isAutoLocale);</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html index b4378bccd4..551f9f0b73 100644 --- a/files/fr/web/api/idbindex/keypath/index.html +++ b/files/fr/web/api/idbindex/keypath/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/IDBIndex/keyPath <p>{{ APIRef("IndexedDB") }}</p> <div> -<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="en/IndexedDB#gloss key path">chemin de clé</a> de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p> +<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">chemin de clé</a> de l'index. Si l'index n'est pas <a href="/fr/IndexedDB/Index#gloss_auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p> <p>{{AvailableInWorkers}}</p> </div> @@ -62,7 +62,7 @@ translation_of: Web/API/IDBIndex/keyPath }; };</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div> <h2 id="Spécification">Spécification</h2> @@ -94,5 +94,5 @@ translation_of: Web/API/IDBIndex/keyPath <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html index 830760797c..6f91a28888 100644 --- a/files/fr/web/api/idbindex/locale/index.html +++ b/files/fr/web/api/idbindex/locale/index.html @@ -60,7 +60,7 @@ translation_of: Web/API/IDBIndex/locale }; };</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div> <h2 id="Spécification">Spécification</h2> @@ -79,5 +79,5 @@ translation_of: Web/API/IDBIndex/locale <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html index d3e827a3e8..730a9f074a 100644 --- a/files/fr/web/api/idbindex/multientry/index.html +++ b/files/fr/web/api/idbindex/multientry/index.html @@ -93,5 +93,5 @@ console.log(monIndex.multiEntry);</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html index 62877bbc51..1211cc937e 100644 --- a/files/fr/web/api/idbindex/name/index.html +++ b/files/fr/web/api/idbindex/name/index.html @@ -108,5 +108,5 @@ translation_of: Web/API/IDBIndex/name <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html index 51002bc8f1..72f83bc88e 100644 --- a/files/fr/web/api/idbindex/objectstore/index.html +++ b/files/fr/web/api/idbindex/objectstore/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IDBIndex/objectStore <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js" style="font-size: 14px;">var indexObjectStore = myIndex.objectStore;</pre> +<pre class="brush: js">var indexObjectStore = myIndex.objectStore;</pre> <h2 id="Valeur">Valeur</h2> @@ -64,7 +64,7 @@ translation_of: Web/API/IDBIndex/objectStore }; };</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div> <h2 id="Spécification">Spécification</h2> @@ -96,5 +96,5 @@ translation_of: Web/API/IDBIndex/objectStore <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html index 360aecc871..8e0dff9573 100644 --- a/files/fr/web/api/idbindex/opencursor/index.html +++ b/files/fr/web/api/idbindex/opencursor/index.html @@ -118,7 +118,9 @@ translation_of: Web/API/IDBIndex/openCursor }; };</pre> -<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +<div class="note"> + <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -150,5 +152,5 @@ translation_of: Web/API/IDBIndex/openCursor <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html index f575bc4419..a52f7c4e8e 100644 --- a/files/fr/web/api/idbindex/openkeycursor/index.html +++ b/files/fr/web/api/idbindex/openkeycursor/index.html @@ -114,7 +114,9 @@ var request = monIndex.openKeyCursor(keyRange,direction);</pre> }; };</pre> -<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +<div class="note"> + <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html index c2271edaf5..4e199912a4 100644 --- a/files/fr/web/api/idbindex/unique/index.html +++ b/files/fr/web/api/idbindex/unique/index.html @@ -92,5 +92,5 @@ translation_of: Web/API/IDBIndex/unique <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/bound/index.html b/files/fr/web/api/idbkeyrange/bound/index.html index 487ce2897d..e235d21a8c 100644 --- a/files/fr/web/api/idbkeyrange/bound/index.html +++ b/files/fr/web/api/idbkeyrange/bound/index.html @@ -76,7 +76,7 @@ translation_of: Web/API/IDBKeyRange/bound };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécification">Spécification</h2> @@ -111,5 +111,5 @@ translation_of: Web/API/IDBKeyRange/bound <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/index.html b/files/fr/web/api/idbkeyrange/index.html index 9a92d00cca..9962a1488a 100644 --- a/files/fr/web/api/idbkeyrange/index.html +++ b/files/fr/web/api/idbkeyrange/index.html @@ -130,7 +130,7 @@ translation_of: Web/API/IDBKeyRange <p>Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet <code>keyRangeValue</code> qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que <code>keyRangeValue</code> est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.</p> -<pre class="brush: js notranslate">function displayData() { +<pre class="brush: js">function displayData() { var keyRangeValue = IDBKeyRange.bound("A", "F"); var transaction = db.transaction(['fThings'], 'readonly'); @@ -151,7 +151,7 @@ translation_of: Web/API/IDBKeyRange };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -191,5 +191,5 @@ translation_of: Web/API/IDBKeyRange <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/lower/index.html b/files/fr/web/api/idbkeyrange/lower/index.html index 6470e2dd77..228da25525 100644 --- a/files/fr/web/api/idbkeyrange/lower/index.html +++ b/files/fr/web/api/idbkeyrange/lower/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/lower };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/lower <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.html b/files/fr/web/api/idbkeyrange/lowerbound/index.html index 6698847c92..3175f20150 100644 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.html +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.html @@ -65,7 +65,7 @@ IDBKeyRange.lowerBound(borne, ouvert);</pre> };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécification">Spécification</h2> @@ -98,5 +98,5 @@ IDBKeyRange.lowerBound(borne, ouvert);</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.html b/files/fr/web/api/idbkeyrange/loweropen/index.html index eb52d0eab0..e81e42a0d3 100644 --- a/files/fr/web/api/idbkeyrange/loweropen/index.html +++ b/files/fr/web/api/idbkeyrange/loweropen/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/lowerOpen };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/lowerOpen <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/only/index.html b/files/fr/web/api/idbkeyrange/only/index.html index f63dccc31d..dc2ed37fac 100644 --- a/files/fr/web/api/idbkeyrange/only/index.html +++ b/files/fr/web/api/idbkeyrange/only/index.html @@ -59,7 +59,7 @@ translation_of: Web/API/IDBKeyRange/only };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -92,5 +92,5 @@ translation_of: Web/API/IDBKeyRange/only <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/upper/index.html b/files/fr/web/api/idbkeyrange/upper/index.html index d96314a08f..74b9545f8e 100644 --- a/files/fr/web/api/idbkeyrange/upper/index.html +++ b/files/fr/web/api/idbkeyrange/upper/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/IDBKeyRange/upper };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -84,5 +84,5 @@ translation_of: Web/API/IDBKeyRange/upper <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.html b/files/fr/web/api/idbkeyrange/upperbound/index.html index 58f7c8b695..6adcc4fe8b 100644 --- a/files/fr/web/api/idbkeyrange/upperbound/index.html +++ b/files/fr/web/api/idbkeyrange/upperbound/index.html @@ -66,7 +66,7 @@ IDBKeyRange.upperBound(borne, ouvert);</pre> };</pre> <div class="note"> -<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> +<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p> </div> <h2 id="Spécification">Spécification</h2> @@ -99,5 +99,5 @@ IDBKeyRange.upperBound(borne, ouvert);</pre> <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.html b/files/fr/web/api/idbkeyrange/upperopen/index.html index 78bd094f95..be0068210d 100644 --- a/files/fr/web/api/idbkeyrange/upperopen/index.html +++ b/files/fr/web/api/idbkeyrange/upperopen/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/IDBKeyRange/upperOpen <p>La propriété <strong><code>upperOpen</code></strong> sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.</p> -<pre class="brush: js" style="font-size: 14px;">function displayData() { +<pre class="brush: js">function displayData() { var keyRangeValue = IDBKeyRange.bound("F", "W", true, true); console.log(keyRangeValue.upperOpen); @@ -66,7 +66,7 @@ translation_of: Web/API/IDBKeyRange/upperOpen </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBKeyRange.upperOpen")}}</p> @@ -79,5 +79,5 @@ translation_of: Web/API/IDBKeyRange/upperOpen <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/add/index.html b/files/fr/web/api/idbobjectstore/add/index.html index 465c318d74..8aadd297b3 100644 --- a/files/fr/web/api/idbobjectstore/add/index.html +++ b/files/fr/web/api/idbobjectstore/add/index.html @@ -159,5 +159,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.html b/files/fr/web/api/idbobjectstore/autoincrement/index.html index 834991b34f..58aebe2096 100644 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.html +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.html @@ -7,7 +7,9 @@ translation_of: Web/API/IDBObjectStore/autoIncrement <p>La propriété <strong><code>autoIncrement</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p> -<p class="note">Note: Chaque magasin d'objets à son conteur d’incrémentation automatique.</p> +<div class="note"> + <p><strong>Note :</strong> Chaque magasin d'objets à son conteur d’incrémentation automatique.</p> +</div> <p>{{AvailableInWorkers}}</p> @@ -75,7 +77,9 @@ function addData() { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécification">Spécification</h2> @@ -94,7 +98,7 @@ function addData() { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBObjectStore.autoIncrement")}}</p> @@ -107,5 +111,5 @@ function addData() { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/clear/index.html b/files/fr/web/api/idbobjectstore/clear/index.html index ad64ef25e0..7a46763b74 100644 --- a/files/fr/web/api/idbobjectstore/clear/index.html +++ b/files/fr/web/api/idbobjectstore/clear/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/IDBObjectStore/clear <p>Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.</p> <div class="note"> -<p>Note: La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.</p> +<p><strong>Note :</strong> La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.</p> </div> <p>{{AvailableInWorkers}}</p> @@ -78,7 +78,9 @@ function clearData() { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécification">Spécification</h2> @@ -97,7 +99,7 @@ function clearData() { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBObjectStore.clear")}}</p> @@ -110,5 +112,5 @@ function clearData() { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/count/index.html b/files/fr/web/api/idbobjectstore/count/index.html index a3664d60f1..929daad96b 100644 --- a/files/fr/web/api/idbobjectstore/count/index.html +++ b/files/fr/web/api/idbobjectstore/count/index.html @@ -100,5 +100,5 @@ countRequest.onsuccess = function() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/createindex/index.html b/files/fr/web/api/idbobjectstore/createindex/index.html index 4990563c73..64b80ef538 100644 --- a/files/fr/web/api/idbobjectstore/createindex/index.html +++ b/files/fr/web/api/idbobjectstore/createindex/index.html @@ -8,14 +8,14 @@ translation_of: Web/API/IDBObjectStore/createIndex <p>La méthode <strong><code>createIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</p> <div class="note"> -<p>Note: cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.</p> +<p><strong>Note :</strong> Cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.</p> </div> <p>{{AvailableInWorkers}}</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js" style="font-size: 14px;">objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);</pre> +<pre class="brush: js">objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);</pre> <h2 id="Paramètres">Paramètres</h2> @@ -47,7 +47,7 @@ translation_of: Web/API/IDBObjectStore/createIndex <tr> <td><code>locale</code></td> <td> - <p>Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">trie dans localisation courante</a>, en). Vous pouvez spécifier sa valeur de trois façons différentes:</p> + <p>Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">trie dans localisation courante</a>, en). Vous pouvez spécifier sa valeur de trois façons différentes:</p> <ul> <li><code>string</code>: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou <code>'en-US'</code>.</li> @@ -72,7 +72,7 @@ translation_of: Web/API/IDBObjectStore/createIndex <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} <code>versionchange</code>.</dd> <dt><code>TransactionInactiveError</code></dt> <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. - <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levé dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a> ).</p> + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165">bug 1176165</a> ). </dd> <dt><code>ConstraintError</code></dt> <dd>Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.</dd> @@ -128,7 +128,9 @@ DBOpenRequest.onupgradeneeded = function(event) { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -147,7 +149,7 @@ DBOpenRequest.onupgradeneeded = function(event) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBObjectStore.createIndex")}}</p> @@ -160,5 +162,5 @@ DBOpenRequest.onupgradeneeded = function(event) { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/delete/index.html b/files/fr/web/api/idbobjectstore/delete/index.html index bf825252f0..66ebf75c18 100644 --- a/files/fr/web/api/idbobjectstore/delete/index.html +++ b/files/fr/web/api/idbobjectstore/delete/index.html @@ -138,5 +138,5 @@ function deleteData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li> + <li>L'exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.html b/files/fr/web/api/idbobjectstore/deleteindex/index.html index 4177b1015b..6c01a8ab42 100644 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.html +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/IDBObjectStore/deleteIndex <p>La méthode <strong><code>deleteIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).</p> <div class="note"> -<p><strong>Note</strong>: Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) <strong><a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange">versionchange</a></strong>. Les propriétés<strong> indexNames ({{domxref("IDBObjectStore.indexNames")}}) </strong>des accès au magasin d'object seront aussi mises à jour.</p> +<p><strong>Note :</strong> Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) <strong><a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange">versionchange</a></strong>. Les propriétés<strong> indexNames ({{domxref("IDBObjectStore.indexNames")}}) </strong>des accès au magasin d'object seront aussi mises à jour.</p> </div> <p>{{AvailableInWorkers}}</p> @@ -34,8 +34,8 @@ translation_of: Web/API/IDBObjectStore/deleteIndex <dt><code>InvalidStateError</code></dt> <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) <a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange"><code>versionchange</code></a>.</dd> <dt><code>TransactionInactiveError</code></dt> - <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. - <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levée dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a>).</p> + <dd><p>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. + <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165">bug 1176165</a>).</p> </dd> <dt><code>NotFoundError</code></dt> <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.</dd> @@ -94,7 +94,9 @@ DBOpenRequest.onupgradeneeded = function(event) { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécification">Spécification</h2> @@ -113,7 +115,7 @@ DBOpenRequest.onupgradeneeded = function(event) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <p>{{Compat("api.IDBObjectStore.deleteIndex")}}</p> @@ -126,5 +128,5 @@ DBOpenRequest.onupgradeneeded = function(event) { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/get/index.html b/files/fr/web/api/idbobjectstore/get/index.html index b0f3cf48ce..28850ce536 100644 --- a/files/fr/web/api/idbobjectstore/get/index.html +++ b/files/fr/web/api/idbobjectstore/get/index.html @@ -92,7 +92,9 @@ function deleteData() { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -124,5 +126,5 @@ function deleteData() { <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.html b/files/fr/web/api/idbobjectstore/getallkeys/index.html index 98ab2eb86e..88032f4682 100644 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.html +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.html @@ -36,7 +36,7 @@ var request = <em>objectStore</em>.getAllKeys(<em>query</em>, <em>count</em>);</ <dt><code>query</code> {{optional_inline}}</dt> <dd>Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).</dd> <dt><code>count</code> {{optional_inline}}</dt> - <dd>Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à <code>0</code> ou inférieure <code>à 2<sup>32</sup>-1</code>, sinon une exception {{jsxref("TypeError")}} sera levée.</dd> + <dd>Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à <code>0</code> ou inférieure <code>à 2^32-1</code>, sinon une exception {{jsxref("TypeError")}} sera levée.</dd> </dl> <h3 id="Valeur_de_retour">Valeur de retour</h3> @@ -102,5 +102,5 @@ var request = <em>objectStore</em>.getAllKeys(<em>query</em>, <em>count</em>);</ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/getkey/index.html b/files/fr/web/api/idbobjectstore/getkey/index.html index 5c8f6ca6ba..84581d2293 100644 --- a/files/fr/web/api/idbobjectstore/getkey/index.html +++ b/files/fr/web/api/idbobjectstore/getkey/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IDBObjectStore/getKey --- <p>{{APIRef("IndexedDB")}}</p> -<p class="summary">La méthode <strong><code>getKey()</code></strong> de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un <em>thread</em> séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.</p> +<p>La méthode <strong><code>getKey()</code></strong> de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un <em>thread</em> séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.</p> <p>Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.</p> diff --git a/files/fr/web/api/idbobjectstore/index.html b/files/fr/web/api/idbobjectstore/index.html index 7a83d69130..2f048f7b9e 100644 --- a/files/fr/web/api/idbobjectstore/index.html +++ b/files/fr/web/api/idbobjectstore/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBObjectStore <dl> <dt>{{domxref("IDBObjectStore.add()")}}</dt> - <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passé en paramètre et sa clé .</dd> + <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passé en paramètre et sa clé .</dd> <dt>{{domxref("IDBObjectStore.clear()")}}</dt> <dd>Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.</dd> <dt>{{domxref("IDBObjectStore.delete()")}}</dt> @@ -35,7 +35,7 @@ translation_of: Web/API/IDBObjectStore <dt>{{domxref("IDBObjectStore.index()")}}</dt> <dd>L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.</dd> <dt>{{domxref("IDBObjectStore.put()")}}</dt> - <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passée en paramètre et sa clé.</dd> + <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passée en paramètre et sa clé.</dd> <dt>{{domxref("IDBObjectStore.openCursor()")}}</dt> <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.</dd> <dt>{{domxref("IDBObjectStore.openKeyCursor()")}}</dt> @@ -50,7 +50,7 @@ translation_of: Web/API/IDBObjectStore <dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt> <dd>La liste des noms d'index du magasin d'objet relié.</dd> <dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt> - <dd>Le <a href="https://developer.mozilla.org/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">nom de la clé</a> du magasin d'objets relié.</dd> + <dd>Le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">nom de la clé</a> du magasin d'objets relié.</dd> <dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt> <dd>Le nom du magasin d'objet relié.</dd> <dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt> @@ -130,7 +130,9 @@ objectStoreRequest.onsuccess = function(event) { note.innerHTML += '<li>L\'enregistrement à été ajouté au magasin d\'objet.</li>'; }</pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -161,5 +163,5 @@ objectStoreRequest.onsuccess = function(event) { <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li> <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li> <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/index/index.html b/files/fr/web/api/idbobjectstore/index/index.html index c1e0b9c4f9..f0cef79029 100644 --- a/files/fr/web/api/idbobjectstore/index/index.html +++ b/files/fr/web/api/idbobjectstore/index/index.html @@ -120,5 +120,5 @@ translation_of: Web/API/IDBObjectStore/index <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.html b/files/fr/web/api/idbobjectstore/indexnames/index.html index 3d8de9359e..96cfe6186a 100644 --- a/files/fr/web/api/idbobjectstore/indexnames/index.html +++ b/files/fr/web/api/idbobjectstore/indexnames/index.html @@ -108,5 +108,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/keypath/index.html b/files/fr/web/api/idbobjectstore/keypath/index.html index bff72a916c..cca4866bd8 100644 --- a/files/fr/web/api/idbobjectstore/keypath/index.html +++ b/files/fr/web/api/idbobjectstore/keypath/index.html @@ -110,5 +110,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/name/index.html b/files/fr/web/api/idbobjectstore/name/index.html index 1914280158..214f9ce32a 100644 --- a/files/fr/web/api/idbobjectstore/name/index.html +++ b/files/fr/web/api/idbobjectstore/name/index.html @@ -116,5 +116,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.html b/files/fr/web/api/idbobjectstore/opencursor/index.html index c4a99970e1..6e19a926d8 100644 --- a/files/fr/web/api/idbobjectstore/opencursor/index.html +++ b/files/fr/web/api/idbobjectstore/opencursor/index.html @@ -110,5 +110,5 @@ request.onsuccess = function(event) { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.html b/files/fr/web/api/idbobjectstore/openkeycursor/index.html index 25390421f9..a7270562d0 100644 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.html +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.html @@ -107,5 +107,5 @@ request.onsuccess = function(event) { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/put/index.html b/files/fr/web/api/idbobjectstore/put/index.html index 383a548934..f4c51928b1 100644 --- a/files/fr/web/api/idbobjectstore/put/index.html +++ b/files/fr/web/api/idbobjectstore/put/index.html @@ -146,5 +146,5 @@ objectStoreTitleRequest.onsuccess = function() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbobjectstore/transaction/index.html b/files/fr/web/api/idbobjectstore/transaction/index.html index 281ad9afdf..92c8a187db 100644 --- a/files/fr/web/api/idbobjectstore/transaction/index.html +++ b/files/fr/web/api/idbobjectstore/transaction/index.html @@ -68,7 +68,9 @@ function addData() { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +</div> <h2 id="Spécification">Spécifications</h2> diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html index 0c9bdbf588..6789721695 100644 --- a/files/fr/web/api/idbopendbrequest/blocked_event/index.html +++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/API/IDBRequest/blocked_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">IDBVersionChangeEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> @@ -69,20 +69,20 @@ original_slug: Web/API/IDBRequest/blocked_event <h2 id="Exemple">Exemple</h2> -<pre class="brush:js; line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> req1 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush:js">var req1 = indexedDB.open("addressbook", 3); -req1<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> addressbookDB <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> +req1.onsuccess = function( event ) { + var addressbookDB = event.target.result; - <span class="comment token">// Essayons d'ouvrir la même base de données avec une version de révision plus élevée</span> - <span class="keyword token">var</span> req2 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // Essayons d'ouvrir la même base de données avec une version de révision plus élevée + var req2 = indexedDB.open("addressbook", 4); - <span class="comment token">// Dans ce cas, le handler onblocked</span> sera exécuté - req2<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> e <span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> + // Dans ce cas, le handler onblocked sera exécuté + req2.onblocked = function( e ) { + console.log(e) + }; -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +};</pre> <h2 id="Evénements_liés">Evénements liés</h2> diff --git a/files/fr/web/api/idbopendbrequest/index.html b/files/fr/web/api/idbopendbrequest/index.html index 6ded1bf71a..2cbb5b3c7e 100644 --- a/files/fr/web/api/idbopendbrequest/index.html +++ b/files/fr/web/api/idbopendbrequest/index.html @@ -29,21 +29,20 @@ translation_of: Web/API/IDBOpenDBRequest <dl> <dt>{{domxref("IDBOpenDBRequest.onblocked")}}</dt> - <dd><span id="result_box" lang="fr"><span>Le gestionnaire d'événements pour événement bloqué</span></span> . Cet événement est lancé lorsqu' un événement <code>upgradeneeded </code>doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement <code>versionchange</code> .</dd> + <dd>Le gestionnaire d'événements pour événement bloqué . Cet événement est lancé lorsqu' un événement <code>upgradeneeded </code>doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement <code>versionchange</code> .</dd> <dt>{{domxref("IDBOpenDBRequest.onupgradeneeded")}}</dt> <dd>Le gestionnaire d'évènement pour évènement <code>upgradeneeded</code> <em>(mise-à-jour nécessaire)</em>, lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.</dd> - <dt> - <h2 id="Méthodes">Méthodes</h2> - - <p><em>Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.</em></p> - </dt> </dl> +<h2 id="Méthodes">Méthodes</h2> + +<p><em>Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.</em></p> + <h2 id="Exemple">Exemple</h2> -<p>Dans l'exemple ci-dessous, le gestionnaire <code>onupgradeneeded</code> est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<u><a href="http://mdn.github.io/to-do-notifications/">voir cet exemple réel</a></u>)</p> +<p>Dans l'exemple ci-dessous, le gestionnaire <code>onupgradeneeded</code> est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir cet exemple réel</a>)</p> -<pre class="brush: js; highlight:[15,25,26,28,29,30,31,32,33,34]">var db; +<pre class="brush: js">var db; // Ouvre la base de données. var DBOpenRequest = window.indexedDB.open("toDoList", 4); @@ -118,11 +117,11 @@ DBOpenRequest.onupgradeneeded = function(event) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li> + <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li> <li>Démarrage de transactions : {{domxref("IDBDatabase")}}</li> <li>Utilisation de transactions : {{domxref("IDBTransaction")}}</li> <li>Définition un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupération et modification des données : {{domxref("IDBObjectStore")}}</li> <li>Utilisation de curseurs : {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbrequest/error/index.html b/files/fr/web/api/idbrequest/error/index.html index b669c94cda..1604f594ad 100644 --- a/files/fr/web/api/idbrequest/error/index.html +++ b/files/fr/web/api/idbrequest/error/index.html @@ -130,5 +130,5 @@ objectStoreTitleRequest.onerror = function() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbrequest/index.html b/files/fr/web/api/idbrequest/index.html index 87759d881f..dac0d4018c 100644 --- a/files/fr/web/api/idbrequest/index.html +++ b/files/fr/web/api/idbrequest/index.html @@ -64,7 +64,7 @@ translation_of: Web/API/IDBRequest <p>Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement <code>{{domxref("IDBRequest.onsuccess","onsuccess")}}</code> et <code>{{domxref("IDBRequest","onerror")}}</code> sont inclus. Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>).</p> -<pre class="brush: js notranslate">var db; +<pre class="brush: js">var db; // Ouvre une base de données. var DBOpenRequest = window.indexedDB.open("toDoList", 4); @@ -104,7 +104,7 @@ DBOpenRequest.onsuccess = function(event) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2> <div> <div> @@ -125,5 +125,5 @@ DBOpenRequest.onsuccess = function(event) { <li>Définir un intervalle de clés: {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier vos données: {{domxref("IDBObjectStore")}}</li> <li>utiliser les curseurs: {{domxref("IDBCursor")}}</li> - <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbrequest/onerror/index.html b/files/fr/web/api/idbrequest/onerror/index.html index d7622ff6f6..dc57020d05 100644 --- a/files/fr/web/api/idbrequest/onerror/index.html +++ b/files/fr/web/api/idbrequest/onerror/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBRequest/onerror <h2 id="Exemple">Exemple</h2> -<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que <code style="font-style: normal;">objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> +<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p> <pre>var title = "Walk dog"; @@ -80,5 +80,5 @@ objectStoreTitleRequest.onerror = function() { <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> <li>Using cursors: {{domxref("IDBCursor")}}</li> - <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbrequest/onsuccess/index.html b/files/fr/web/api/idbrequest/onsuccess/index.html index 38033b6fa6..a13ed4c5e7 100644 --- a/files/fr/web/api/idbrequest/onsuccess/index.html +++ b/files/fr/web/api/idbrequest/onsuccess/index.html @@ -82,5 +82,5 @@ objectStoreTitleRequest.onerror = function() { <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> <li>Using cursors: {{domxref("IDBCursor")}}</li> - <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbrequest/result/index.html b/files/fr/web/api/idbrequest/result/index.html index bb19ba4f1d..066ba37fa7 100644 --- a/files/fr/web/api/idbrequest/result/index.html +++ b/files/fr/web/api/idbrequest/result/index.html @@ -8,7 +8,9 @@ browser-compat: api.IDBRequest.result <p>La propriété <strong><code>result</code></strong>, rattachée à l'interface <a href="/fr/docs/Web/API/IDBRequest"><code>IDBRequest</code></a>, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception <code>InvalidStateError</code> sera levée.</p> -<div class="note"><strong>Note :</strong> Cette fonctionnalité est disponible via les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette fonctionnalité est disponible via les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +</div> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/api/idbrequest/source/index.html b/files/fr/web/api/idbrequest/source/index.html index 7a0337c248..8a03050021 100644 --- a/files/fr/web/api/idbrequest/source/index.html +++ b/files/fr/web/api/idbrequest/source/index.html @@ -30,7 +30,7 @@ var <em>IDBObjectStore</em> = <em>request</em>.source; <p>Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p> -<pre class="brush: js;highlight:[11]">var title = "Walk dog"; +<pre class="brush: js">var title = "Walk dog"; // On ouvre une transaction var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); diff --git a/files/fr/web/api/idbrequest/transaction/index.html b/files/fr/web/api/idbrequest/transaction/index.html index 85bfaaa3f0..a81f6d0774 100644 --- a/files/fr/web/api/idbrequest/transaction/index.html +++ b/files/fr/web/api/idbrequest/transaction/index.html @@ -7,7 +7,9 @@ translation_of: Web/API/IDBRequest/transaction <p>La propriété <strong><code>transaction</code></strong> de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</p> -<p class="note"> Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété <strong><code>transaction</code></strong> doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} <code>"versionchange"</code>, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété <strong><code>transaction</code></strong> renverra encore <code>null</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété <strong><code>transaction</code></strong> doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} <code>"versionchange"</code>, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété <strong><code>transaction</code></strong> renverra encore <code>null</code>.</p> +</div> <p>{{AvailableInWorkers}}</p> @@ -109,5 +111,5 @@ openRequest.onsuccess = function() { <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> <li>Using cursors: {{domxref("IDBCursor")}}</li> - <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> </ul> diff --git a/files/fr/web/api/idbtransaction/abort/index.html b/files/fr/web/api/idbtransaction/abort/index.html index 3a8040d959..a7baf8d966 100644 --- a/files/fr/web/api/idbtransaction/abort/index.html +++ b/files/fr/web/api/idbtransaction/abort/index.html @@ -113,5 +113,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbtransaction/abort_event/index.html b/files/fr/web/api/idbtransaction/abort_event/index.html index 36d16a63ac..86a1413564 100644 --- a/files/fr/web/api/idbtransaction/abort_event/index.html +++ b/files/fr/web/api/idbtransaction/abort_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/IDBTransaction/abort_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</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;">Propagation</dt> diff --git a/files/fr/web/api/idbtransaction/complete_event/index.html b/files/fr/web/api/idbtransaction/complete_event/index.html index 78ced266c7..ed134208b2 100644 --- a/files/fr/web/api/idbtransaction/complete_event/index.html +++ b/files/fr/web/api/idbtransaction/complete_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/IDBTransaction/complete_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</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;">Propagation</dt> diff --git a/files/fr/web/api/idbtransaction/db/index.html b/files/fr/web/api/idbtransaction/db/index.html index d81591a87a..a193d733ca 100644 --- a/files/fr/web/api/idbtransaction/db/index.html +++ b/files/fr/web/api/idbtransaction/db/index.html @@ -74,7 +74,9 @@ function addData() { }; </pre> -<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +<div class="note"> + <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -106,5 +108,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbtransaction/error/index.html b/files/fr/web/api/idbtransaction/error/index.html index aa1012bc7b..ccbd3c3252 100644 --- a/files/fr/web/api/idbtransaction/error/index.html +++ b/files/fr/web/api/idbtransaction/error/index.html @@ -26,7 +26,9 @@ translation_of: Web/API/IDBTransaction/error <p>Cette propriété vaut <code>null</code> si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.</p> -<p class="note"><strong>Note :</strong> Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.</p> +<div class="note"> + <p><strong>Note :</strong> Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.</p> +</div> <h2 id="Exemples">Exemples</h2> @@ -77,7 +79,9 @@ function addData() { }; </pre> -<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +<div class="note"> + <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> @@ -109,5 +113,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbtransaction/index.html b/files/fr/web/api/idbtransaction/index.html index f87fc8eb1a..b856029dee 100644 --- a/files/fr/web/api/idbtransaction/index.html +++ b/files/fr/web/api/idbtransaction/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/IDBTransaction <p>On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :</p> -<pre class="brush: js" id="comment_text_0">var trans1 = db.transaction("toto", "readwrite"); +<pre class="brush: js">var trans1 = db.transaction("toto", "readwrite"); var trans2 = db.transaction("toto", "readwrite"); trans2.put("2", "clé"); trans1.put("1", "clé"); @@ -184,5 +184,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbtransaction/mode/index.html b/files/fr/web/api/idbtransaction/mode/index.html index 234a44dd51..2cc9c693bc 100644 --- a/files/fr/web/api/idbtransaction/mode/index.html +++ b/files/fr/web/api/idbtransaction/mode/index.html @@ -130,5 +130,5 @@ function addData() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/idbtransaction/objectstore/index.html b/files/fr/web/api/idbtransaction/objectstore/index.html index 56208fb7ca..61fa2e0d56 100644 --- a/files/fr/web/api/idbtransaction/objectstore/index.html +++ b/files/fr/web/api/idbtransaction/objectstore/index.html @@ -93,7 +93,9 @@ function addData() { }; </pre> -<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em> est disponible ici</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em> est disponible ici</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbtransaction/onabort/index.html b/files/fr/web/api/idbtransaction/onabort/index.html index 1a4f4d8a0c..22ae924a6f 100644 --- a/files/fr/web/api/idbtransaction/onabort/index.html +++ b/files/fr/web/api/idbtransaction/onabort/index.html @@ -79,7 +79,9 @@ function addData() { transaction.abort(); };</pre> -<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.html b/files/fr/web/api/idbtransaction/oncomplete/index.html index f243276fda..2c92b816b8 100644 --- a/files/fr/web/api/idbtransaction/oncomplete/index.html +++ b/files/fr/web/api/idbtransaction/oncomplete/index.html @@ -15,7 +15,8 @@ translation_of: Web/API/IDBTransaction/oncomplete <div class="note"> <p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code>, l'événement <code>complete</code> était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p> -<p class="warning">Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence<code> dom.indexedDB.experimental </code> pref est réglée sur <code> true</code> dans <code> about: config</code>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence<code> dom.indexedDB.experimental </code> pref est réglée sur <code> true</code> dans <code> about: config</code>.</p> </div> <p>{{AvailableInWorkers}}</p> @@ -77,7 +78,9 @@ function addData() { }; </pre> -<p class="note">Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p> +<div class="note"> + <p><strong>Note :</strong>Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/idbtransaction/onerror/index.html b/files/fr/web/api/idbtransaction/onerror/index.html index 9cd2f814d5..d37965f979 100644 --- a/files/fr/web/api/idbtransaction/onerror/index.html +++ b/files/fr/web/api/idbtransaction/onerror/index.html @@ -68,7 +68,9 @@ function addData() { }; </pre> -<p class="note"><strong>Note :</strong> Pour un exemple de travail complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible ici</a>).</p> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple de travail complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible ici</a>).</p> +</div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/imagedata/data/index.html b/files/fr/web/api/imagedata/data/index.html index 6bb88c71bb..93967d5b3a 100644 --- a/files/fr/web/api/imagedata/data/index.html +++ b/files/fr/web/api/imagedata/data/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/ImageData/data <h2 id="Exemple">Exemple</h2> -<pre class="brush: js language-js">var imagedata = new ImageData(100, 100); +<pre class="brush: js">var imagedata = new ImageData(100, 100); imagedata.data; // Uint8ClampedArray[40000] </pre> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/index.html b/files/fr/web/api/index.html index adbd2a33b8..a66d8b6b9f 100644 --- a/files/fr/web/api/index.html +++ b/files/fr/web/api/index.html @@ -10,7 +10,7 @@ tags: - Web translation_of: Web/API --- -<p class="summary"><span class="seoSummary">Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.</span></p> +<p>Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.</p> <p>Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.</p> diff --git a/files/fr/web/api/indexeddb/index.html b/files/fr/web/api/indexeddb/index.html index 7d8aaa0ed5..78d82dae7a 100644 --- a/files/fr/web/api/indexeddb/index.html +++ b/files/fr/web/api/indexeddb/index.html @@ -24,7 +24,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB <h2 id="Exemples">Exemples</h2> -<pre class="brush: js;highlight:[3]">var db; +<pre class="brush: js">var db; function openDB() { var DBOpenRequest = window.indexedDB.open('toDoList'); DBOpenRequest.onsuccess = function(e) { @@ -73,5 +73,5 @@ function openDB() { <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li> <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li> <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li> - <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> + <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li> </ul> diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index c01f34e3ef..ced83206f0 100644 --- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -14,11 +14,11 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri <div>{{DefaultAPISidebar("IndexedDB")}}</div> <div class="note"> -<p>Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.</p> +<p><strong>Note :</strong> Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.</p> </div> <div class="note"> -<p><strong>Note </strong>: Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.</p> +<p><strong>Note :</strong> Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.</p> </div> <h2 id="Les_différents_types_de_stockage_des_données">Les différents types de stockage des données</h2> @@ -67,19 +67,19 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri </ul> <div class="note"> -<p><strong>Note :</strong> Depuis l'introduction de l' <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_API">API Storage</a> , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort"<em> (meilleur effort)</em> ou "persistant", les données sont stockées sous <code><profile>/storage/default</code>.</p> +<p><strong>Note :</strong> Depuis l'introduction de l' <a href="/en-US/docs/Web/API/Storage_API">API Storage</a> , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort"<em> (meilleur effort)</em> ou "persistant", les données sont stockées sous <code><profile>/storage/default</code>.</p> </div> <div class="note"> -<p><strong>Note</strong>: Dans Firefox, vous pouvez trouver votre dossier profil en entrant : <code>support</code> dans la barre d'URL et en appuyant sur le bouton <em>Show in..</em>. <em>(</em><em>Afficher dans ...)</em> (par exemple, <em>"Show in Finder"</em> sur Mac OS X) à côté du titre <em>"Profile Folder" (</em><em>dossier de profil)</em> .</p> +<p><strong>Note :</strong> Dans Firefox, vous pouvez trouver votre dossier profil en entrant : <code>support</code> dans la barre d'URL et en appuyant sur le bouton <em>Show in..</em>. <em>(</em><em>Afficher dans ...)</em> (par exemple, <em>"Show in Finder"</em> sur Mac OS X) à côté du titre <em>"Profile Folder" (</em><em>dossier de profil)</em> .</p> </div> <div class="note"> -<p><strong>Note</strong>: Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : <code>persistent</code> . À la base, le dossier <code>persistent</code> a été renommé <code>permanent,</code> il y a quelques temps, pour faciliter les mises à niveau / migrations.</p> +<p><strong>Note :</strong> Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : <code>persistent</code> . À la base, le dossier <code>persistent</code> a été renommé <code>permanent,</code> il y a quelques temps, pour faciliter les mises à niveau / migrations.</p> </div> <div class="note"> -<p><strong>Note</strong>: Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <code><profile>/storage</code> . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.</p> +<p><strong>Note :</strong> Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <code><profile>/storage</code> . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.</p> </div> <h2 id="Limites_de_stockage">Limites de stockage</h2> @@ -109,7 +109,7 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri </ul> <div class="note"> -<p><strong>Note</strong>: Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance <code>QuotaExceededError</code>.</p> +<p><strong>Note :</strong> Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance <code>QuotaExceededError</code>.</p> </div> <h2 id="Politique_LRU">Politique LRU</h2> @@ -123,7 +123,7 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri <p>Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :</p> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB">IndexedDB</a></li> + <li><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a></li> <li><a href="http://asmjs.org/">asm.js</a> caching</li> <li><a href="/fr/docs/Web/API/Cache">Cache API</a></li> </ul> @@ -135,6 +135,6 @@ original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteri <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Une analyse détaillée du stockage côté client sur les navigateurs mobiles.</li> - <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API : Fast Facts</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)</li> + <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, de<a href="http://blog.agektmr.com"> Eiji Kitamura.</a> Une analyse détaillée du stockage côté client sur les navigateurs mobiles.</li> + <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API : Fast Facts</a>, de<a href="http://blog.agektmr.com"> Eiji Kitamura.</a> Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)</li> </ul> diff --git a/files/fr/web/api/indexeddb_api/index.html b/files/fr/web/api/indexeddb_api/index.html index 50d5b363b5..01e9cdf503 100644 --- a/files/fr/web/api/indexeddb_api/index.html +++ b/files/fr/web/api/indexeddb_api/index.html @@ -17,21 +17,21 @@ original_slug: Web/API/API_IndexedDB <p>{{AvailableInWorkers}}</p> <div class="note"> -<p><strong>Note</strong>: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> et <a href="https://github.com/google/lovefield">lovefield</a> qui offrent de nombreux avantages aux développeurs de IndexedDB.</p> +<p><strong>Note :</strong> L'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> et <a href="https://github.com/google/lovefield">lovefield</a> qui offrent de nombreux avantages aux développeurs de IndexedDB.</p> </div> <h2 id="Concepts_clés_et_utilisation">Concepts clés et utilisation</h2> -<p>IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. <span style="line-height: 1.5;">IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une </span><strong style="line-height: 1.5;">clef</strong><span style="line-height: 1.5;">; tout objet supporté par </span><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">l'algorithme de clônage structuré</a><span style="line-height: 1.5;"> peut être stocké. </span><span style="line-height: 1.5;">Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de </span><strong style="line-height: 1.5;">transactions</strong><span style="line-height: 1.5;">.</span></p> +<p>IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une <strong>clef</strong>; tout objet supporté par <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">l'algorithme de clônage structuré</a> peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de <strong>transactions</strong>.</p> <ul> - <li><span style="line-height: 1.5;">Plus d'informations sur les <a href="/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts derrière IndexedDB</a>.</span></li> - <li><span style="line-height: 1.5;">Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide <a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a>.</span></li> - <li><span style="line-height: 1.5;">Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans <a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers</a></span><span style="line-height: 1.5;">.</span></li> + <li>Plus d'informations sur les <a href="/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts derrière IndexedDB</a>.</li> + <li>Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide <a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a>.</li> + <li>Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans <a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers</a>.</li> </ul> <div class="note"> -<p><strong>Note</strong>: Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.</p> +<p><strong>Note :</strong> Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique <a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.</p> </div> <h3 id="Synchrone_et_asynchrone">Synchrone et asynchrone</h3> @@ -57,11 +57,10 @@ original_slug: Web/API/API_IndexedDB <dd>Représente une requête d'ouverture de la base de données.</dd> <dt>{{domxref("IDBDatabase")}}</dt> <dd>Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.</dd> - <dt> - <h3 id="Récupérer_et_modifier_les_données">Récupérer et modifier les données</h3> - </dt> </dl> +<h3 id="Récupérer_et_modifier_les_données">Récupérer et modifier les données</h3> + <dl> <dt>{{domxref("IDBTransaction")}}</dt> <dd>Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).</dd> @@ -115,15 +114,15 @@ original_slug: Web/API/API_IndexedDB <dd>Version synchrone de {{domxref("IDBCursor")}}.</dd> </dl> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <ul> - <li><a class="external external-icon" href="http://marco-c.github.io/eLibri/">eLibri:</a> Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du <em>DevDerby IndexedDB</em> de Mozilla.</li> - <li><a class="external external-icon" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external external-icon" href="http://mdn.github.io/to-do-notifications/">voir la démonstration en ligne</a>): L'application de référence pour les exemples de la documentation.</li> - <li><a class="external external-icon" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Stocker des images et des fichiers dans IndexedDB</a></li> + <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du <em>DevDerby IndexedDB</em> de Mozilla.</li> + <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir la démonstration en ligne</a>): L'application de référence pour les exemples de la documentation.</li> + <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Stocker des images et des fichiers dans IndexedDB</a></li> </ul> -<h2 id="Browser_compatibility" name="Browser_compatibility">Spécifications</h2> +<h2 id="Browser_compatibility">Spécifications</h2> <table class="standard-table"> <tbody> @@ -148,10 +147,10 @@ original_slug: Web/API/API_IndexedDB <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: Un <em>Polyfill</em> fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.</li> - <li><a class="external" href="http://www.dexie.org/">dexie.js</a> : Un <em>wrapper </em>pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.</li> - <li><a class="external" href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Une interface MongoDB-like pour indexedDB qui <span id="result_box" lang="fr"><span>prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</span></span></li> - <li><a class="external" href="http://jsstore.net/">JsStore </a>: Un contenu indexedDB avec SQL comme syntaxe.</li> - <li><a class="external" href="https://github.com/mWater/minimongo">MiniMongo</a></li> - <li><a class="external" href="https://pouchdb.com">PouchDB</a></li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: Un <em>Polyfill</em> fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.</li> + <li><a href="http://www.dexie.org/">dexie.js</a> : Un <em>wrapper </em>pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.</li> + <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Une interface MongoDB-like pour indexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</li> + <li><a href="http://jsstore.net/">JsStore </a>: Un contenu indexedDB avec SQL comme syntaxe.</li> + <li><a href="https://github.com/mWater/minimongo">MiniMongo</a></li> + <li><a href="https://pouchdb.com">PouchDB</a></li> </ul> diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.html b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html index 081027f6ed..39097580d4 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html @@ -11,15 +11,15 @@ tags: translation_of: Web/API/IndexedDB_API/Using_IndexedDB original_slug: Web/API/API_IndexedDB/Using_IndexedDB --- -<p class="summary">IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne. </p> +<p>IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne.</p> <h2 id="À_propos_de_ce_document">À propos de ce document</h2> -<p>Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire <a href="/fr/docs/Web/API/Indexeddb_API/Basic_Concepts_Behind_IndexedDB" title="IndexedDB - Les concepts basiques">les concepts basiques d'IndexedDB</a>.</p> +<p>Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire <a href="/fr/docs/Web/API/Indexeddb_API/Basic_Concepts_Behind_IndexedDB">les concepts basiques d'IndexedDB</a>.</p> -<p>Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article <a href="/fr/docs/Web/API/Indexeddb_API" title="IndexedDB">IndexedDB</a> et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).</p> +<p>Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article <a href="/fr/docs/Web/API/Indexeddb_API">IndexedDB</a> et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).</p> -<h2 id="pattern" name="pattern">Modèle de base</h2> +<h2 id="pattern">Modèle de base</h2> <p>Le modèle de base qu'IndexedDB utilise est le suivant :</p> @@ -37,9 +37,9 @@ original_slug: Web/API/API_IndexedDB/Using_IndexedDB <p>Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.</p> -<h2 id="open" name="open">Créer et structurer l'objet de stockage</h2> +<h2 id="open">Créer et structurer l'objet de stockage</h2> -<p><span id="result_box" lang="fr"><span>Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur.</span> <span>Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée.</span> <span>Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe.</span> <span>Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe </span></span> <code>moz</code><span lang="fr"><span>, tandis que les navigateurs WebKit utilisent le préfixe </span></span> <code>webkit</code><span lang="fr"><span>.</span></span></p> +<p>Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur. Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée. Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe. Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe <code>moz</code>, tandis que les navigateurs WebKit utilisent le préfixe <code>webkit</code>.</p> <h3 id="Utiliser_une_version_expérimentale_dIndexedDB">Utiliser une version expérimentale d'IndexedDB</h3> @@ -70,12 +70,12 @@ var request = window.indexedDB.open("MyTestDatabase", 3); <p>Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".</p> -<p>La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction <code>open()</code> retourne un objet <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>.</p> +<p>La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction <code>open()</code> retourne un objet <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet <a href="/en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de <code><a href="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>.</p> <p>Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération <code>open()</code>, puis, un événement <code>onupgradeneeded</code> est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement <code>onupgradeneeded</code> est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans <a href="#Updating_the_version_of_the_database">Updating the version of the database</a> plus bas et la page référence {{ domxref("IDBFactory.open") }}.</p> <div class="warning"> -<p><strong>Important</strong>: Le numéro de version est un nombre "<code>unsigned long long</code>" <span id="result_box" lang="fr"><span>ce qui signifie qu'il peut s'agir d'un entier très grand</span></span>. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement <code>upgradeneeded</code>. Par exemple, n'utilisez pas 2.4 comme un numéro de version :<br> +<p><strong>Attention :</strong> Le numéro de version est un nombre "<code>unsigned long long</code>" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement <code>upgradeneeded</code>. Par exemple, n'utilisez pas 2.4 comme un numéro de version :<br> <code>var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2</code></p> </div> @@ -92,7 +92,7 @@ request.onsuccess = function(event) { <p>Laquelle de ces deux fonctions, <code>onsuccess()</code> or <code>onerror()</code>, sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété <code>type</code> est à <code>"success"</code>) est déclenché avec <code>request</code> comme cible. Une fois déclenché, la fonction <code>onsuccess()</code> de <code>request</code> est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété <code>type</code> est définie à <code>"error"</code>) est lancée dans <code>request</code>. Cela déclenche la fonction <code><code>onerror()</code></code> avec l'évènement d'erreur comme argument.</p> -<p>L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a>).</p> +<p>L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez <a href="/en/IndexedDB#Storage_limits">Storage limits</a>).</p> <p>Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">n'est pas encore implémenté</a> depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).</p> @@ -122,15 +122,15 @@ request.onsuccess = function(event) { <h3 id="Créer_ou_mettre_à_jour_une_version_de_base_de_données">Créer ou mettre à jour une version de base de données</h3> -<p>Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> sera déclenché et un objet </span><code><span style="line-height: 1.5;">IDBVersionChangeEvent</span></code> sera passé à un évènement <code>onversionchange</code> dans <code>request.result</code> (la variable <code>db</code> dans l'exemple). Dans le gestionnaire d’évènement <code>upgradeneeded</code>, vous devez créer les objets de stockage requis pour cette version de base :</p> +<p>Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement <code>onupgradeneeded</code> sera déclenché et un objet <code>IDBVersionChangeEvent</code> sera passé à un évènement <code>onversionchange</code> dans <code>request.result</code> (la variable <code>db</code> dans l'exemple). Dans le gestionnaire d’évènement <code>upgradeneeded</code>, vous devez créer les objets de stockage requis pour cette version de base :</p> -<pre class="brush:js; language-js"><code class="language-js"><span class="comment token">// Cet évènement est seulement implémenté dans des navigateurs récents -</span>request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> +<pre class="brush:js;">// Cet évènement est seulement implémenté dans des navigateurs récents +request.onupgradeneeded = function(event) { + var db = event.target.result; - <span class="comment token"> // Crée un </span></code>objet de stockage<code class="language-js"><span class="comment token"> pour cette base de données -</span> <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"myKey"</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + // Crée un objet de stockage pour cette base de données + var objectStore = db.createObjectStore("name", { keyPath: "myKey" }); +};</pre> <p>Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant (par exemple, pour changer la <code>keyPath</code>), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.</p> @@ -138,11 +138,11 @@ request.onsuccess = function(event) { <p>Si l'évènement <code>onupgradeneeded</code> quitte avec succès, le gestionnaire <code>onsuccess</code> de la requête d'ouverture de la base de données sera déclenché. </p> -<p>Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge <code>indexedDB.open(name, version).onupgradeneeded</code>. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à <a href="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p> +<p>Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge <code>indexedDB.open(name, version).onupgradeneeded</code>. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à <a href="/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated">IDBDatabase reference article</a>.</p> <h3 id="Structurer_la_base_de_données">Structurer la base de données</h3> -<p>Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> <em>(chemin de clé)</em> ou un <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a> <em>(générateur de clé)</em>.</p> +<p>Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un <a href="/en/IndexedDB#gloss_key_path">key path</a> <em>(chemin de clé)</em> ou un <a href="/en/IndexedDB#gloss_key_generator">key generator</a> <em>(générateur de clé)</em>.</p> <p>Le tableau suivant montre les différentes manières d'attribuer des clés.</p> @@ -184,49 +184,49 @@ request.onsuccess = function(event) { <p>Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Voici à quoi ressemblent nos données client. -</span><span class="keyword token">const</span> customerData <span class="operator token">=</span> <span class="punctuation token">[</span> - <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"444-44-4444"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Bill"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">35</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"bill@company.com"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"555-55-5555"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">32</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"donna@home.org"</span> <span class="punctuation token">}</span> -<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">// Voici à quoi ressemblent nos données client. +const customerData = [ + { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" }, + { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" } +];</pre> <p>Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.</p> <p>Maintenant, voyons la création d'une base de données pour stocker ces données :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">const</span> dbName <span class="operator token">=</span> <span class="string token">"the_name"</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Gestion des erreurs. -</span><span class="punctuation token">}</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> +<pre class="brush: js">const dbName = "the_name"; - <span class="comment token"> // Créer un objet de stockage qui contient les informations de nos clients. -</span> <span class="comment token"> // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être -</span> <span class="comment token"> // unique - du moins, c'est ce qu'on en disait au lancement. -</span> <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"ssn"</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +var request = indexedDB.open(dbName, 2); - <span class="comment token"> // Créer un index pour rechercher les clients par leur nom. Nous pourrions -</span> <span class="comment token"> // avoir des doublons (homonymes), alors on n'utilise pas d'index unique. -</span> objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous -</span> <span class="comment token"> // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique. -</span> objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"email"</span><span class="punctuation token">,</span> <span class="string token">"email"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage -</span> <span class="comment token"> // est terminée avant d'ajouter des données dedans. -</span> objectStore<span class="punctuation token">.</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Stocker les valeurs dans le nouvel objet de stockage. -</span> <span class="keyword token">var</span> customerObjectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span> - customerObjectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +request.onerror = function(event) { + // Gestion des erreurs. +}; +request.onupgradeneeded = function(event) { + var db = event.target.result; + + // Créer un objet de stockage qui contient les informations de nos clients. + // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être + // unique - du moins, c'est ce qu'on en disait au lancement. + var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); + + // Créer un index pour rechercher les clients par leur nom. Nous pourrions + // avoir des doublons (homonymes), alors on n'utilise pas d'index unique. + objectStore.createIndex("name", "name", { unique: false }); + + // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous + // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique. + objectStore.createIndex("email", "email", { unique: true }); + + // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage + // est terminée avant d'ajouter des données dedans. + objectStore.transaction.oncomplete = function(event) { + // Stocker les valeurs dans le nouvel objet de stockage. + var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); + for (var i in customerData) { + customerObjectStore.add(customerData[i]); + } + } +};</pre> <div>Comme indiqué précédemment, <code>onupgradeneeded</code> est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.</div> @@ -236,7 +236,7 @@ request<span class="punctuation token">.</span>onupgradeneeded <span class="oper <p>Nous avons aussi demandé un index nommé "name" qui examine la propriété <code>name</code> dans les objets stockés. Comme avec<code> createObjectStore()</code>, <code>createIndex()</code> prend un paramètre de type objet facultatif (<code>options</code>) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété <code>name</code> fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".</p> -<p>Nous pouvons récupérer les objets client stockés, en utilisant directement leur <code>ssn</code> dans l'objet de stockage, ou en utilisant leur nom via l’index <code>name</code>. Pour en savoir plus sur ce fonctionnement, se référer à la section <a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">utiliser un index</a>.</p> +<p>Nous pouvons récupérer les objets client stockés, en utilisant directement leur <code>ssn</code> dans l'objet de stockage, ou en utilisant leur nom via l’index <code>name</code>. Pour en savoir plus sur ce fonctionnement, se référer à la section <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index">utiliser un index</a>.</p> <h3 id="Utiliser_le_générateur_de_clés">Utiliser le générateur de clés</h3> @@ -246,24 +246,24 @@ request<span class="punctuation token">.</span>onupgradeneeded <span class="oper <p>Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Ouverture d'indexedDB. -</span><span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">// Ouverture d'indexedDB. +var request = indexedDB.open(dbName, 3); -request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> +request.onupgradeneeded = function (event) { - <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> + var db = event.target.result; - <span class="comment token"> // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true. -</span> <span class="keyword token">var</span> objStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"names"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> autoIncrement <span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true. + var objStore = db.createObjectStore("names", { autoIncrement : true }); - <span class="comment token"> // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement. -</span> <span class="comment token"> // Les enregistrements ajoutés ressembleront à ceci : -</span> <span class="comment token"> // key : 1 => value : "Bill" -</span> <span class="comment token"> // key : 2 => value : "Donna" -</span> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span> - objStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> + // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement. + // Les enregistrements ajoutés ressembleront à ceci : + // key : 1 => value : "Bill" + // key : 2 => value : "Donna" + for (var i in customerData) { + objStore.add(customerData[i].name); + } +}</pre> <p>Pour plus de détails sur le générateur de clés, voyez <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p> @@ -276,24 +276,24 @@ request<span class="punctuation token">.</span>onupgradeneeded <span class="oper <p>Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode <code>readonly</code>ou <code>readwrite</code>. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode <code>readwrite</code>. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les <code>storeNames</code> (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le <code>mode</code> (<code>readonly</code> ou <code>readwrite</code>) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode <code>readonly</code>.</p> <div class="note"> -<p><strong>Note</strong>: À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction <code>readwrite</code> {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement <code>complete</code> est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement <code>complete</code> peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement <code>complete</code> ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) <code>readwriteflush</code> (se référer à {{domxref("IDBDatabase.transaction")}}.</p> +<p><strong>Note :</strong> À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction <code>readwrite</code> {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement <code>complete</code> est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement <code>complete</code> peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement <code>complete</code> ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) <code>readwriteflush</code> (se référer à {{domxref("IDBDatabase.transaction")}}.</p> </div> <p>Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :</p> <ul> <li>Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.</li> - <li>Spécifier le mode <code>readwrite</code> pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions <code>readonly</code> avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction <code>readwrite</code> dans un objet de stockage. Pour en savoir plus, regardez la définition des <dfn><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> dans l'article des <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts de base</a>.</li> + <li>Spécifier le mode <code>readwrite</code> pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions <code>readonly</code> avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction <code>readwrite</code> dans un objet de stockage. Pour en savoir plus, regardez la définition des <dfn><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> dans l'article des <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts de base</a>.</li> </ul> <h3 id="Ajouter_des_données_dans_la_base_de_données">Ajouter des données dans la base de données</h3> <p>Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :</p> -<pre class="brush:js; language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> +<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite"); // Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite". -</span><span class="comment token">// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire : -</span><span class="comment token">// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</span></code></pre> +// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire : +// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre> <p>La fonction <code>transaction()</code> prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" <em>(lecture seule)</em> . Si vous souhaitez aussi écrire, vous devrez passer l'option <code>"readwrite"</code> <em>(lecture/écriture)</em>.</p> @@ -303,22 +303,22 @@ request<span class="punctuation token">.</span>onupgradeneeded <span class="oper <p>Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.</p> -<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données. -</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"All done!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> +<pre class="brush: js">// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données. +transaction.oncomplete = function(event) { + alert("All done!"); +}; -transaction<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // N'oubliez pas de gérer les erreurs ! -</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +transaction.onerror = function(event) { + // N'oubliez pas de gérer les erreurs ! +}; -<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // event.target.result == customerData[i].ssn; -</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +var objectStore = transaction.objectStore("customers"); +for (var i in customerData) { + var request = objectStore.add(customerData[i]); + request.onsuccess = function(event) { + // event.target.result == customerData[i].ssn; + }; +}</pre> <div>La méthode <code>result</code> d’une requête venant d'un appel à <code>add()</code> est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété <code>ssn</code> de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété <code>ssn</code> pour le key path. Notez que la fonction <code>add()</code> requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction <code>put()</code>, comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.</div> @@ -328,33 +328,33 @@ transaction<span class="punctuation token">.</span>onerror <span class="operator <p>Supprimer des données est très similaire :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> request <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span> - <span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span> - <span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // c'est supprimé ! -</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var request = db.transaction(["customers"], "readwrite") + .objectStore("customers") + .delete("444-44-4444"); +request.onsuccess = function(event) { + // c'est supprimé ! +};</pre> <h3 id="Récupérer_des_données_de_la_base_de_données">Récupérer des données de la base de données</h3> <p>Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple <code>get()</code>. Vous devez fournir une clé pour récupérer la valeur, comme ceci :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // gestion des erreurs! -</span><span class="punctuation token">}</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec request.result ! -</span> <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> request<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var transaction = db.transaction(["customers"]); +var objectStore = transaction.objectStore("customers"); +var request = objectStore.get("444-44-4444"); +request.onerror = function(event) { + // gestion des erreurs! +}; +request.onsuccess = function(event) { + // Faire quelque chose avec request.result ! + alert("Name for SSN 444-44-4444 is " + request.result.name); +};</pre> <p>Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :</p> -<pre class="brush: js language-js"><code class="language-js">db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) { + alert("Name for SSN 444-44-4444 is " + event.target.result.name); +};</pre> <div>Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction <code>"readwrite"</code>. Appeler une <code>transaction()</code> sans spécifier de mode nous donne une transaction <code>"readonly"</code>. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété <code>result</code>.</div> @@ -363,257 +363,257 @@ request<span class="punctuation token">.</span>onsuccess <span class="operator t <p>Vous pouvez accélérer l’accès à vos données en limitant la portée et le mode de la transaction. Voici deux astuces :</p> <ul> - <li>Lors de la définition de la <a href="https://developer.mozilla.org/fr/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a> <em>(portée)</em>, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.</li> - <li>Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" <em>(lecture/écriture)</em> sur un objet de stockage. Pour en savoir plus, voir la définition relative aux <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>.</li> + <li>Lors de la définition de la <a href="/fr/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a> <em>(portée)</em>, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.</li> + <li>Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" <em>(lecture/écriture)</em> sur un objet de stockage. Pour en savoir plus, voir la définition relative aux <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>.</li> </ul> <h3 id="Mettre_à_jour_une_entrée_dans_la_base_de_données">Mettre à jour une entrée dans la base de données</h3> <p>Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Gestion des erreurs! -</span><span class="punctuation token">}</span><span class="punctuation token">;</span> -request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // On récupère l'ancienne valeur que nous souhaitons mettre à jour -</span> <span class="keyword token">var</span> data <span class="operator token">=</span> request<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - - <span class="comment token"> // On met à jour ce(s) valeur(s) dans l'objet -</span> data<span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">42</span><span class="punctuation token">;</span> - - <span class="comment token"> // Et on remet cet objet à jour dans la base -</span> <span class="keyword token">var</span> requestUpdate <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">put<span class="punctuation token">(</span></span>data<span class="punctuation token">)</span><span class="punctuation token">;</span> - requestUpdate<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec l’erreur -</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> - requestUpdate<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Succès - la donnée est mise à jour ! -</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers"); +var request = objectStore.get("444-44-4444"); +request.onerror = function(event) { + // Gestion des erreurs! +}; +request.onsuccess = function(event) { + // On récupère l'ancienne valeur que nous souhaitons mettre à jour + var data = request.result; + + // On met à jour ce(s) valeur(s) dans l'objet + data.age = 42; + + // Et on remet cet objet à jour dans la base + var requestUpdate = objectStore.put(data); + requestUpdate.onerror = function(event) { + // Faire quelque chose avec l’erreur + }; + requestUpdate.onsuccess = function(event) { + // Succès - la donnée est mise à jour ! + }; +};</pre> <div>Ici, nous avons créé une variable <code>objectStore</code> et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (<code>444-44-4444</code>). Nous avons ensuite mis le résultat dans une variable (<code>data</code>), mis à jour la propriété <code>age</code> de cet objet, puis créé une deuxième requête (<code>requestUpdate</code>) pour mettre l'enregistrement du client dans l'<code>objectStore</code>, en écrasant la valeur précédente.</div> <div class="note"> -<p><strong>Note</strong>: dans ce cas, nous avons eu à spécifier une transaction <code>readwrite</code> puisque nous voulions écrire dans la base, et pas seulement la lire.</p> +<p><strong>Note :</strong> dans ce cas, nous avons eu à spécifier une transaction <code>readwrite</code> puisque nous voulions écrire dans la base, et pas seulement la lire.</p> </div> <h3 id="Utiliser_un_curseur">Utiliser un curseur</h3> <p>Utiliser <code>get()</code> nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">" is "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span> - cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"No more entries!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers"); + +objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + alert("Name for SSN " + cursor.key + " is " + cursor.value.name); + cursor.continue(); + } + else { + alert("No more entries!"); + } +};</pre> <p>La fonction <code>openCursor()</code> prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" <em>(rappel)</em> de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le <code>result</code> <em>(résutat)</em> de la requête (au-dessus, nous utilisons le raccourci <code>event.target.result</code>). Puis la clé et valeur courante peuvent être trouvées dans les propriétés <code>key</code><em>(clé)</em> et <code>value</code> <em>(valeur)</em> de l’objet cursor. Si vous souhaitez continuer, vous devez appeler <code>continue()</code> sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête <code>openCursor()</code> ) , vous aurez toujours votre callback success, mais la propriété <code>result</code> sera <code>undefined</code>.</p> <p>Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> customers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - -objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - customers<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span>cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> - cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> customers<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var customers = []; + +objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + customers.push(cursor.value); + cursor.continue(); + } + else { + alert("Got all customers: " + customers); + } +};</pre> <div class="note"> -<p><strong>Note</strong>: Mozilla a aussi implémenté <code>getAll()</code> pour gérer ce cas (et <code>getAllKeys()</code>, <span class="short_text" id="result_box" lang="fr"><span>qui est actuellement caché derrière la préférence</span></span> <code>dom.indexedDB.experimental</code> dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :</p> +<p><strong>Note :</strong> Mozilla a aussi implémenté <code>getAll()</code> pour gérer ce cas (et <code>getAllKeys()</code>, qui est actuellement caché derrière la préférence <code>dom.indexedDB.experimental</code> dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :</p> -<pre class="brush: js language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">getAll<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">objectStore.getAll().onsuccess = function(event) { + alert("Got all customers: " + event.target.result); +};</pre> -<p>Il y a un coût de performance associé avec la recherche de la propriété <code>value</code> du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez <code>getAll()</code> par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que <code>getAll()</code>. <span id="result_box" lang="fr"><span>Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez</span></span> <code>getAll()</code>.</p> +<p>Il y a un coût de performance associé avec la recherche de la propriété <code>value</code> du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez <code>getAll()</code> par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que <code>getAll()</code>. Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez <code>getAll()</code>.</p> </div> <h3 id="Utiliser_un_index">Utiliser un index</h3> -<p><span id="result_box" lang="fr"><span>Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique.</span> <span>(Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous</span> <span>trouviez la bonne.</span> <span>La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.</span></span></p> +<p>Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique. (Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous trouviez la bonne. La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:</span> -<span class="comment token">// objectStore.createIndex("name", "name");</span> -<span class="comment token">// Autrement, vous obtiendrez une DOMException.</span> +<pre class="brush: js line-numbers">// D'abord, assurez-vous de créer un index dans request.onupgradeneeded: +// objectStore.createIndex("name", "name"); +// Autrement, vous obtiendrez une DOMException. -<span class="keyword token">var</span> index <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">index</span><span class="punctuation token">(</span><span class="string token">"name"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +var index = objectStore.index("name"); -index<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Donna's SSN is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>ssn<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +index.get("Donna").onsuccess = function(event) { + alert("Donna's SSN is " + event.target.result.ssn); +};</pre> -<p>Le "name" du curseur n'est pas unique, <span class="short_text" id="result_box" lang="fr"><span>donc il pourrait y avoir plus d'une entrée avec le</span></span> <code>name</code> attribué à <code>"Donna"</code>. <span id="result_box" lang="fr"><span>Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse</span></span> .</p> +<p>Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le <code>name</code> attribué à <code>"Donna"</code>. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse .</p> <p>Si vous avez besoin d'accèder à toutes les entrées avec un <code>name</code> donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client -</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier. -</span> <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>ssn <span class="operator token">+</span> <span class="string token">", email: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>email<span class="punctuation token">)</span><span class="punctuation token">;</span> - cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> -<span class="comment token"> +<pre class="brush: js">// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client +index.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier. + alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); + cursor.continue(); + } +}; + // Utilisation d'un curseur de clés pour saisir les clés des enregistrements des objets client -</span>index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est le SSN. -</span> <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Pas moyen d'obtenir directement le reste de l'objet stocké</span></span> <code class="language-js"><span class="comment token">. -</span> <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> - cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +index.openKeyCursor().onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // cursor.key est un nom, comme "Bill", et cursor.value est le SSN. + // Pas moyen d'obtenir directement le reste de l'objet stocké . + alert("Name: " + cursor.key + ", SSN: " + cursor.value); + cursor.continue(); + } +};</pre> <h3 id="Spécifier_lintervalle_et_la_direction_du_curseur">Spécifier l'intervalle et la direction du curseur</h3> <p>Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet <code>IDBKeyRange</code> et le donner comme premier argument à <code>openCursor()</code> ou <code>openKeyCursor()</code> . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" <em>(fermée)</em> (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" <em>(ouverte)</em> (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Correspond seulement à "Donna" -</span><span class="keyword token">var</span> singleKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">only<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="comment token"> +<pre class="brush: js">// Correspond seulement à "Donna" +var singleKeyRange = IDBKeyRange.only("Donna"); + // Correspond à n'importe quoi contenant "Bill", y compris "Bill" -</span><span class="keyword token">var</span> lowerBoundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="comment token"> +var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); + // Correspond à n'importe quoi contenant "Bill", mais pas "Bill" -</span><span class="keyword token">var</span> lowerBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="comment token"> +var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true); + // Correspond à n'importe quoi, mais "Donna" exclus. -</span><span class="keyword token">var</span> upperBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">upperBound<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="comment token"> +var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); + // Correspond à n'importe quoi compris entre "Bill" et "Donna", mais "Donna" exclus. -</span><span class="keyword token">var</span> boundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">bound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="comment token"> +var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true); + // Pour utiliser un des intervalles de clés, placez le en premier argument de openCursor()/openKeyCursor() -</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec la sélection. -</span> cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p>Parfois, <span id="result_box" lang="fr"><span>vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs).</span> <span>Le changement de direction est réalisé en passant</span></span> <code>prev</code> <span lang="fr"><span> à la fonction </span></span> <code>openCursor()</code> <span lang="fr"><span> antérieure comme second argument :</span></span></p> - -<pre class="brush: js language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec les entrées. -</span> cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p><span id="result_box" lang="fr"><span>Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :</span></span></p> - -<pre class="brush: js language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec les entrées. -</span> cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p><span id="result_box" lang="fr"><span>Étant donné que l'index "</span></span>name<span lang="fr"><span>" n'est pas unique, il peut y avoir plusieurs entrées où le </span></span> <code>name</code> <span lang="fr"><span> est le même.</span> <span>Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique.</span> <span>Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer </span></span> <code>nextunique</code> <span lang="fr"><span> (ou </span></span> <code>prevunique</code> <span lang="fr"><span> si vous revenez en arrière) comme paramètre de direction.</span> <span>Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.</span></span></p> - -<pre class="brush: js language-js"><code class="language-js">index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"nextunique"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Faire quelque chose avec les entrées. -</span> cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> - -<p>Voyez "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" <span class="short_text" id="result_box" lang="fr"><span>pour les arguments de direction valides</span></span>.</p> - -<h2 id="La_version_change_alors_quune_application_Web_est_ouverte_dans_un_autre_onglet"><span id="result_box" lang="fr"><span>La version change alors qu'une application Web est ouverte dans un autre onglet</span></span></h2> - -<p><span id="result_box" lang="fr"><span>Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre</span> <span>.</span> <span>Lorsque vous appelez </span></span> <code>open()</code> <span lang="fr"><span> avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement </span></span> <code>onblocked</code> <em>(bloqué)</em><span lang="fr"><span> est déclenché jusqu'à ce qu'elles soient fermées ou rechargées).</span> <span>Voici comment cela fonctionne :</span></span></p> - -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> openReq <span class="operator token">=</span> mozIndexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -openReq<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si un autre onglet est chargé avec la base de données, il doit être fermé</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // avant que nous puissions continuer. -</span> <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Veuillez fermer tous les ongles ouverts sur ce site!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -openReq<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Toutes les autres bases de données ont été fermées. Tout régler. -</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="comment token">/* ... */</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -openReq<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // un changement de version. Nous devons fermer la base de données. </span></code> -<code class="language-js"><span class="comment token"> // </span></code><span lang="fr"><span>Cela permet à l'autre page de mettre à niveau la base de données.</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet</span></span> <code class="language-js"><span class="comment token">. -</span> db<span class="punctuation token">.</span>onversionchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> - db<span class="punctuation token">.</span><span class="function token">close<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"A new version of this page is ready. Please reload!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - - <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Faire quelque chose avec la base de données</span></span> <code class="language-js"><span class="comment token">. -</span><span class="punctuation token">}</span></code></pre> - -<p><span id="result_box" lang="fr"><span>Vous devriez également écouter les erreurs </span></span> <code>VersionError</code> <span lang="fr"><span> pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.</span></span></p> +index.openCursor(boundKeyRange).onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Faire quelque chose avec la sélection. + cursor.continue(); + } +};</pre> + +<p>Parfois, vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs). Le changement de direction est réalisé en passant <code>prev</code> à la fonction <code>openCursor()</code> antérieure comme second argument :</p> + +<pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Faire quelque chose avec les entrées. + cursor.continue(); + } +};</pre> + +<p>Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :</p> + +<pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Faire quelque chose avec les entrées. + cursor.continue(); + } +};</pre> + +<p>Étant donné que l'index "name" n'est pas unique, il peut y avoir plusieurs entrées où le <code>name</code> est le même. Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique. Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer <code>nextunique</code> (ou <code>prevunique</code> si vous revenez en arrière) comme paramètre de direction. Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.</p> + +<pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) { + var cursor = event.target.result; + if (cursor) { + // Faire quelque chose avec les entrées. + cursor.continue(); + } +};</pre> + +<p>Voyez "<a href="/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" pour les arguments de direction valides.</p> + +<h2 id="La_version_change_alors_quune_application_Web_est_ouverte_dans_un_autre_onglet">La version change alors qu'une application Web est ouverte dans un autre onglet</h2> + +<p>Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez <code>open()</code> avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement <code>onblocked</code> <em>(bloqué)</em> est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne :</p> + +<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2); + +openReq.onblocked = function(event) { + // Si un autre onglet est chargé avec la base de données, il doit être fermé + // avant que nous puissions continuer. + alert("Veuillez fermer tous les ongles ouverts sur ce site!"); +}; + +openReq.onupgradeneeded = function(event) { + // Toutes les autres bases de données ont été fermées. Tout régler. + db.createObjectStore(/* ... */); + useDatabase(db); +} + +openReq.onsuccess = function(event) { + var db = event.target.result; + useDatabase(db); + return; +} + +function useDatabase(db) { + // Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande + // un changement de version. Nous devons fermer la base de données. + // Cela permet à l'autre page de mettre à niveau la base de données. + // Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet . + db.onversionchange = function(event) { + db.close(); + alert("A new version of this page is ready. Please reload!"); + }; + + // Faire quelque chose avec la base de données . +}</pre> + +<p>Vous devriez également écouter les erreurs <code>VersionError</code> pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.</p> <h2 id="Sécurité">Sécurité</h2> -<p><span id="result_box" lang="fr"><span>IndexedDB utilise le principe "</span></span> same-origin " <span lang="fr"><span><em>(même origine)</em>, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.</span></span></p> +<p>IndexedDB utilise le principe " same-origin " <em>(même origine)</em>, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.</p> <p>Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">ne jamais accepter de cookies tiers</a> (voir le {{bug("1147821")}}).</p> -<h2 id="Avertissement_concernant_larrêt_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Avertissement concernant l'arrêt du navigateur</span></span></h2> +<h2 id="Avertissement_concernant_larrêt_du_navigateur">Avertissement concernant l'arrêt du navigateur</h2> -<p><span id="result_box" lang="fr"><span>Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :</span></span></p> +<p>Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :</p> <ol> - <li><span id="result_box" lang="fr"><span>Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un </span></span> <code>AbortError</code>. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.</li> - <li><span id="result_box" lang="fr"><span>Une fois toutes les transactions terminées, la connexion à la base de données est fermée</span></span> .</li> - <li>Enfin, l'objet {{domxref("IDBDatabase")}} <span id="result_box" lang="fr"><span>représentant la connexion à la base de données reçoit un</span></span> évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, <span id="result_box" lang="fr"><span>afin de savoir quand une base de données est fermée de façon inattendue</span></span> .</li> + <li>Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un <code>AbortError</code>. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.</li> + <li>Une fois toutes les transactions terminées, la connexion à la base de données est fermée .</li> + <li>Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue .</li> </ol> -<p><span id="result_box" lang="fr"><span>Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).</span></span></p> +<p>Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).</p> -<p><span id="result_box" lang="fr"><span>Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.</span></span></p> +<p>Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.</p> -<p><span id="result_box" lang="fr"><span>Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées.</span> <span>Il y a plusieurs conséquences à ce comportement.</span></span></p> +<p>Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement.</p> -<p><span id="result_box" lang="fr"><span>Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction.</span> <span>Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer.</span> <span>Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste.</span> <span>Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide.</span> <span>Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.</span></span></p> +<p>Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.</p> -<p><span id="result_box" lang="fr"><span>Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements </span></span> unload <em>(déchargement</em>)<span lang="fr"><span>.</span> <span>Si l'événement </span></span> unload <span lang="fr"><span>est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span> ne seront jamais terminées.</span> <span>Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur (</span> <span>ou page) se ferme.</span> <span>Cependant, cela ne fonctionne pas.</span> <span>Les transactions de la base de données sont créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span>, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.</span></span></p> +<p>Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload <em>(déchargement</em>). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.</p> -<p><span id="result_box" lang="fr"><span>En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur.</span> <span>Voir {{bug (870645)}}.</span> <span>Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement </span></span> <code>beforeunload</code> <span lang="fr"><span> pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.</span></span></p> +<p>En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur. Voir {{bug (870645)}}. Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement <code>beforeunload</code> pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.</p> -<p><span id="result_box" lang="fr"><span>Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.</span></span></p> +<p>Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.</p> <h2 id="Le_tri_et_les_langues">Le tri et les langues</h2> -<p>Mozilla <span id="result_box" lang="fr"><span>a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+.</span> <span>Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais.</span> <span>Par exemple, "b", "á", "z", "a" devaient être triés comme suit :</span></span></p> +<p>Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit :</p> <ul> <li>a</li> @@ -622,454 +622,454 @@ openReq<span class="punctuation token">.</span>onsuccess <span class="operator t <li>á</li> </ul> -<p><span id="result_box" lang="fr"><span>ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts.</span> <span>L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.</span></span></p> +<p>ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts. L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.</p> -<p><span id="result_box" lang="fr"><span>Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" <em>(langue)</em> lors de la création d'un index en utilisant </span></span> {{domxref("IDBObjectStore.createIndex()")}} <span lang="fr"><span> (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données</span> <span>, et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.</span></span></p> +<p>Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" <em>(langue)</em> lors de la création d'un index en utilisant {{domxref("IDBObjectStore.createIndex()")}} (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données , et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.</p> -<p>{{domxref("IDBIndex")}} <span id="result_box" lang="fr"><span>a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue :</span></span> <code>locale</code> (retourne la langue si elle est spécifiée, ou null sinon) et <code>isAutoLocale</code> (retourne <code>true</code><em> (vrai)</em> si l'index a été créé avec une "locale auto", <span id="result_box" lang="fr"><span>ce qui signifie que la langue par défaut de la plate-forme est utilisée,</span></span> sinon <code>false</code>).</p> +<p>{{domxref("IDBIndex")}} a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue : <code>locale</code> (retourne la langue si elle est spécifiée, ou null sinon) et <code>isAutoLocale</code> (retourne <code>true</code><em> (vrai)</em> si l'index a été créé avec une "locale auto", ce qui signifie que la langue par défaut de la plate-forme est utilisée, sinon <code>false</code>).</p> <div class="note"> -<p><strong>Note </strong>: Cette fonctionnalité est couramment cachée derrière une marque (flag) — <span class="short_text" id="result_box" lang="fr"><span>pour l'activer et l'expérimenter, aller à</span></span> <a>about:config</a> et activez <code>dom.indexedDB.experimental</code>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est couramment cachée derrière une marque (flag) — pour l'activer et l'expérimenter, aller à about:config et activez <code>dom.indexedDB.experimental</code>.</p> </div> -<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Exemple complet d'IndexedDB</h2> +<h2 id="Full_IndexedDB_example">Exemple complet d'IndexedDB</h2> <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></span> +<pre class="brush: html"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>IndexedDB Demo: storing blobs, e-publication example<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <h1>IndexedDB Demo: storing blobs, e-publication example</h1> + <div class="note"> + <p> Works and tested with: - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>compat<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + </p> + <div id="compat"> + </div> + </div> + + <div id="msg"> + </div> + + <form id="register-form"> + <table> + <tbody> + <tr> + <td> + <label for="pub-title" class="required"> Title: - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + </label> + </td> + <td> + <input type="text" id="pub-title" name="pub-title" /> + </td> + </tr> + <tr> + <td> + <label for="pub-biblioid" class="required"> + Bibliographic ID:<br/> + <span class="note">(ISBN, ISSN, etc.)</span> + </label> + </td> + <td> + <input type="text" id="pub-biblioid" name="pub-biblioid"/> + </td> + </tr> + <tr> + <td> + <label for="pub-year"> Year: - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + </label> + </td> + <td> + <input type="number" id="pub-year" name="pub-year" /> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td> + <label for="pub-file"> File image: - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Online-file image URL:<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(same origin URL)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>add-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Add Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form-reset<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-form<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span> - <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Key:<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>(for example 1, 2, 3, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span> - <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>td</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tr</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tbody</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>table</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Delete Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clear-store-button<span class="punctuation token">"</span></span> - <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Clear the whole store<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>destructive<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-form<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-list-button<span class="punctuation token">"</span></span> - <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>List database content<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> - - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-msg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-viewer<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-list<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + </label> + </td> + <td> + <input type="file" id="pub-file"/> + </td> + </tr> + <tr> + <td> + <label for="pub-file-url"> + Online-file image URL:<br/> + <span class="note">(same origin URL)</span> + </label> + </td> + <td> + <input type="text" id="pub-file-url" name="pub-file-url"/> + </td> + </tr> + </tbody> + </table> + + <div class="button-pane"> + <input type="button" id="add-button" value="Add Publication" /> + <input type="reset" id="register-form-reset"/> + </div> + </form> + + <form id="delete-form"> + <table> + <tbody> + <tr> + <td> + <label for="pub-biblioid-to-delete"> + Bibliographic ID:<br/> + <span class="note">(ISBN, ISSN, etc.)</span> + </label> + </td> + <td> + <input type="text" id="pub-biblioid-to-delete" + name="pub-biblioid-to-delete" /> + </td> + </tr> + <tr> + <td> + <label for="key-to-delete"> + Key:<br/> + <span class="note">(for example 1, 2, 3, etc.)</span> + </label> + </td> + <td> + <input type="text" id="key-to-delete" + name="key-to-delete" /> + </td> + </tr> + </tbody> + </table> + <div class="button-pane"> + <input type="button" id="delete-button" value="Delete Publication" /> + <input type="button" id="clear-store-button" + value="Clear the whole store" class="destructive" /> + </div> + </form> + + <form id="search-form"> + <div class="button-pane"> + <input type="button" id="search-list-button" + value="List database content" /> + </div> + </form> + + <div> + <div id="pub-msg"> + </div> + <div id="pub-viewer"> + </div> + <ul id="pub-list"> + </ul> + </div></pre> <h3 id="CSS_Content">CSS Content</h3> -<pre class="brush: css language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> 0.8em<span class="punctuation token">;</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> Sans-Serif<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">form </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> inline-block<span class="punctuation token">;</span> - <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">table </span><span class="punctuation token">{</span> - <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">input </span><span class="punctuation token">{</span> - <span class="property token">padding</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span> - <span class="property token">border-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.required:after </span><span class="punctuation token">{</span> - <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"*"</span><span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.button-pane </span><span class="punctuation token">{</span> - <span class="property token">margin-top</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">#pub-viewer </span><span class="punctuation token">{</span> - <span class="property token">float</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> 48%<span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> 20em<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> solid #d092ff 0.1em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">#pub-viewer iframe </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span> - <span class="property token">height</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">#pub-list </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> 46%<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">#pub-list li </span><span class="punctuation token">{</span> - <span class="property token">padding-top</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> - <span class="property token">padding-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> - <span class="property token">padding-right</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">#msg </span><span class="punctuation token">{</span> - <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.action-success </span><span class="punctuation token">{</span> - <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> #00d21e<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.action-failure </span><span class="punctuation token">{</span> - <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span> - <span class="property token">color</span><span class="punctuation token">:</span> #ff1408<span class="punctuation token">;</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.note </span><span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> smaller<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">.destructive </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> orange<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">.destructive:hover </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> #ff8000<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">.destructive:active </span><span class="punctuation token">{</span> - <span class="property token">background-color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: css">body { + font-size: 0.8em; + font-family: Sans-Serif; +} + +form { + background-color: #cccccc; + border-radius: 0.3em; + display: inline-block; + margin-bottom: 0.5em; + padding: 1em; +} + +table { + border-collapse: collapse; +} + +input { + padding: 0.3em; + border-color: #cccccc; + border-radius: 0.3em; +} + +.required:after { + content: "*"; + color: red; +} + +.button-pane { + margin-top: 1em; +} + +#pub-viewer { + float: right; + width: 48%; + height: 20em; + border: solid #d092ff 0.1em; +} +#pub-viewer iframe { + width: 100%; + height: 100%; +} + +#pub-list { + width: 46%; + background-color: #eeeeee; + border-radius: 0.3em; +} +#pub-list li { + padding-top: 0.5em; + padding-bottom: 0.5em; + padding-right: 0.5em; +} + +#msg { + margin-bottom: 1em; +} + +.action-success { + padding: 0.5em; + color: #00d21e; + background-color: #eeeeee; + border-radius: 0.2em; +} + +.action-failure { + padding: 0.5em; + color: #ff1408; + background-color: #eeeeee; + border-radius: 0.2em; +} + +.note { + font-size: smaller; +} + +.destructive { + background-color: orange; +} +.destructive:hover { + background-color: #ff8000; +} +.destructive:active { + background-color: red; +}</pre> <h3 id="JavaScript_Content">JavaScript Content</h3> -<pre class="brush: js language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> COMPAT_ENVS <span class="operator token">=</span> <span class="punctuation token">[</span> - <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">">= 16.0"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> - <span class="punctuation token">[</span><span class="string token">'Google Chrome'</span><span class="punctuation token">,</span> - <span class="string token">">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"</span><span class="punctuation token">]</span> - <span class="punctuation token">]</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> compat <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#compat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - compat<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - compat<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'<ul id="compat-list"></ul>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - COMPAT_ENVS<span class="punctuation token">.</span><span class="function token">forEach<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>val<span class="punctuation token">,</span> idx<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span> - $<span class="punctuation token">(</span><span class="string token">'#compat-list'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'<li>'</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">': '</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">'</li>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">const</span> DB_NAME <span class="operator token">=</span> <span class="string token">'mdn-demo-indexeddb-epublications'</span><span class="punctuation token">;</span> - <span class="keyword token">const</span> DB_VERSION <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span><span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float))</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="keyword token">const</span> DB_STORE_NAME <span class="operator token">=</span> <span class="string token">'publications'</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> db<span class="punctuation token">;</span> - - <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement</span></span><code class="language-js"><span class="comment token"> -</span> <span class="keyword token">var</span> current_view_pub_key<span class="punctuation token">;</span> - - <span class="keyword token">function</span> <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> req <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>DB_NAME<span class="punctuation token">,</span> DB_VERSION<span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter </span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>les problèmes avec "</span></span><code class="language-js"><span class="comment token">garbage collection". -</span> <span class="comment token"> // db = req.result; -</span> db <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>result<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb DONE"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"openDb:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - - req<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb.onupgradeneeded"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> store <span class="operator token">=</span> evt<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>result<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span> - DB_STORE_NAME<span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">'id'</span><span class="punctuation token">,</span> autoIncrement<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'title'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'year'</span><span class="punctuation token">,</span> <span class="string token">'year'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/** +<pre class="brush: js">(function () { + var COMPAT_ENVS = [ + ['Firefox', ">= 16.0"], + ['Google Chrome', + ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"] + ]; + var compat = $('#compat'); + compat.empty(); + compat.append('<ul id="compat-list"></ul>'); + COMPAT_ENVS.forEach(function(val, idx, array) { + $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>'); + }); + + const DB_NAME = 'mdn-demo-indexeddb-epublications'; + const DB_VERSION = 1; // Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float)) + const DB_STORE_NAME = 'publications'; + + var db; + + // Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement + var current_view_pub_key; + + function openDb() { + console.log("openDb ..."); + var req = indexedDB.open(DB_NAME, DB_VERSION); + req.onsuccess = function (evt) { + // Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter + // les problèmes avec "garbage collection". + // db = req.result; + db = this.result; + console.log("openDb DONE"); + }; + req.onerror = function (evt) { + console.error("openDb:", evt.target.errorCode); + }; + + req.onupgradeneeded = function (evt) { + console.log("openDb.onupgradeneeded"); + var store = evt.currentTarget.result.createObjectStore( + DB_STORE_NAME, { keyPath: 'id', autoIncrement: true }); + + store.createIndex('biblioid', 'biblioid', { unique: true }); + store.createIndex('title', 'title', { unique: false }); + store.createIndex('year', 'year', { unique: false }); + }; + } + + /** * @paramètre {string}<em>(chaîne de caractères)</em> store_name * @paramètre {string}<em>(chaîne de caractères)</em> mode either "readonly" ou "readwrite" - */</span> - <span class="keyword token">function</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> tx <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span> tx<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">clearObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">clear<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Store cleared"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"clearObjectStore:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> success_callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">)</span> - <span class="function token">success_callback<span class="punctuation token">(</span></span>value<span class="punctuation token">.</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/** + */ + function getObjectStore(store_name, mode) { + var tx = db.transaction(store_name, mode); + return tx.objectStore(store_name); + } + + function clearObjectStore(store_name) { + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req = store.clear(); + req.onsuccess = function(evt) { + displayActionSuccess("Store cleared"); + displayPubList(store); + }; + req.onerror = function (evt) { + console.error("clearObjectStore:", evt.target.errorCode); + displayActionFailure(this.error); + }; + } + + function getBlob(key, store, success_callback) { + var req = store.get(key); + req.onsuccess = function(evt) { + var value = evt.target.result; + if (value) + success_callback(value.blob); + }; + } + + /** * @paramètre objet de stockage {IDBObjectStore=} - */</span> - <span class="keyword token">function</span> <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> - store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> pub_msg <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-msg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - pub_msg<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> pub_list <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - pub_list<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> req<span class="punctuation token">;</span> - req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // transaction, </span></code> <span id="result_box" lang="fr"><span>et leurs résultats sont retournés dans le même ordre.</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>(ce n'est pas algorithmiquement important dans ce cas)</span></span> <code class="language-js"><span class="comment token">. -</span> req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - pub_msg<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'<p>There are <strong>'</span> <span class="operator token">+</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">+</span> - <span class="string token">'</strong> record(s) in the object store.</p>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"add error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> - req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> cursor <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - - <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si le curseur pointe vers quelque chose, demandez les données</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList cursor:"</span><span class="punctuation token">,</span> cursor<span class="punctuation token">)</span><span class="punctuation token">;</span> - req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>cursor<span class="punctuation token">.</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - <span class="keyword token">var</span> list_item <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'<li>'</span> <span class="operator token">+</span> - <span class="string token">'['</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'] '</span> <span class="operator token">+</span> - <span class="string token">'(biblioid: '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>biblioid <span class="operator token">+</span> <span class="string token">') '</span> <span class="operator token">+</span> - value<span class="punctuation token">.</span>title <span class="operator token">+</span> - <span class="string token">'</li>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">)</span> - list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' - '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>year<span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span><span class="function token">hasOwnProperty<span class="punctuation token">(</span></span><span class="string token">'blob'</span><span class="punctuation token">)</span> <span class="operator token">&&</span> - <span class="keyword token">typeof</span> value<span class="punctuation token">.</span>blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> link <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'<a href="'</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'">File</a>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'mouseenter'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">setInViewer<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">getAttribute<span class="punctuation token">(</span></span><span class="string token">'href'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' / '</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>link<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">" / No attached file"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - pub_list<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>list_item<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - - <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Passer à l'objet de stockage suivant</span></span><code class="language-js"><span class="comment token"> -</span> cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // Ce compteur sert seulement à créer des identifiants distincts -</span> i<span class="operator token">++</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"No more entries"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> viewer <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - viewer<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> iframe <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'<iframe />'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - viewer<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>iframe<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span> iframe<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">setInViewer<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> current_view_pub_key<span class="punctuation token">)</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - - current_view_pub_key <span class="operator token">=</span> key<span class="punctuation token">;</span> - - <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> iframe <span class="operator token">=</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Il n'est pas possible de définir un lien direct vers</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code>le <span id="result_box" lang="fr"><span>blob pour fournir un moyen de le télécharger directement.</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'text/html'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> reader <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FileReader</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - reader<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> html <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'html'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>html<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - reader<span class="punctuation token">.</span><span class="function token">readAsText<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'image/'</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> img_id <span class="operator token">=</span> <span class="string token">'image-'</span> <span class="operator token">+</span> key<span class="punctuation token">;</span> - <span class="keyword token">var</span> img <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'<img id="'</span> <span class="operator token">+</span> img_id <span class="operator token">+</span> <span class="string token">'"/>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>img<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'#'</span> <span class="operator token">+</span> img_id<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span> - window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'application/pdf'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'wait'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'auto'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - iframe<span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span> - window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">"No view available"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/** + */ + function displayPubList(store) { + console.log("displayPubList"); + + if (typeof store == 'undefined') + store = getObjectStore(DB_STORE_NAME, 'readonly'); + + var pub_msg = $('#pub-msg'); + pub_msg.empty(); + var pub_list = $('#pub-list'); + pub_list.empty(); + // Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent + newViewerFrame(); + + var req; + req = store.count(); + // Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la + // transaction, et leurs résultats sont retournés dans le même ordre. + // Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle + // (ce n'est pas algorithmiquement important dans ce cas) . + req.onsuccess = function(evt) { + pub_msg.append('<p>There are <strong>' + evt.target.result + + '</strong> record(s) in the object store.</p>'); + }; + req.onerror = function(evt) { + console.error("add error", this.error); + displayActionFailure(this.error); + }; + + var i = 0; + req = store.openCursor(); + req.onsuccess = function(evt) { + var cursor = evt.target.result; + + // Si le curseur pointe vers quelque chose, demandez les données + if (cursor) { + console.log("displayPubList cursor:", cursor); + req = store.get(cursor.key); + req.onsuccess = function (evt) { + var value = evt.target.result; + var list_item = $('<li>' + + '[' + cursor.key + '] ' + + '(biblioid: ' + value.biblioid + ') ' + + value.title + + '</li>'); + if (value.year != null) + list_item.append(' - ' + value.year); + + if (value.hasOwnProperty('blob') && + typeof value.blob != 'undefined') { + var link = $('<a href="' + cursor.key + '">File</a>'); + link.on('click', function() { return false; }); + link.on('mouseenter', function(evt) { + setInViewer(evt.target.getAttribute('href')); }); + list_item.append(' / '); + list_item.append(link); + } else { + list_item.append(" / No attached file"); + } + pub_list.append(list_item); + }; + + // Passer à l'objet de stockage suivant + cursor.continue(); + + // Ce compteur sert seulement à créer des identifiants distincts + i++; + } else { + console.log("No more entries"); + } + }; + } + + function newViewerFrame() { + var viewer = $('#pub-viewer'); + viewer.empty(); + var iframe = $('<iframe />'); + viewer.append(iframe); + return iframe; + } + + function setInViewer(key) { + console.log("setInViewer:", arguments); + key = Number(key); + if (key == current_view_pub_key) + return; + + current_view_pub_key = key; + + var store = getObjectStore(DB_STORE_NAME, 'readonly'); + getBlob(key, store, function(blob) { + console.log("setInViewer blob:", blob); + var iframe = newViewerFrame(); + + // Il n'est pas possible de définir un lien direct vers + // le blob pour fournir un moyen de le télécharger directement. + if (blob.type == 'text/html') { + var reader = new FileReader(); + reader.onload = (function(evt) { + var html = evt.target.result; + iframe.load(function() { + $(this).contents().find('html').html(html); + }); + }); + reader.readAsText(blob); + } else if (blob.type.indexOf('image/') == 0) { + iframe.load(function() { + var img_id = 'image-' + key; + var img = $('<img id="' + img_id + '"/>'); + $(this).contents().find('body').html(img); + var obj_url = window.URL.createObjectURL(blob); + $(this).contents().find('#' + img_id).attr('src', obj_url); + window.URL.revokeObjectURL(obj_url); + }); + } else if (blob.type == 'application/pdf') { + $('*').css('cursor', 'wait'); + var obj_url = window.URL.createObjectURL(blob); + iframe.load(function() { + $('*').css('cursor', 'auto'); + }); + iframe.attr('src', obj_url); + window.URL.revokeObjectURL(obj_url); + } else { + iframe.load(function() { + $(this).contents().find('body').html("No view available"); + }); + } + + }); + } + + /** * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em> * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em> * @paramètre {number} <em>(nombre)</em> year <em>(année)</em> @@ -1077,235 +1077,235 @@ openReq<span class="punctuation token">.</span>onsuccess <span class="operator t * IndexedDB database. La ressource derrière cette URL assujettie à * "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de * la même origine que le site web/l'application sur lequel le code est déployé. - */</span> - <span class="keyword token">function</span> <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> url<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> xhr <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - xhr<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">'GET'</span><span class="punctuation token">,</span> url<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Définir le type de réponse recherché à "blob<code>"</code></span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute -</span> xhr<span class="punctuation token">.</span>responseType <span class="operator token">=</span> <span class="string token">'blob'</span><span class="punctuation token">;</span> - xhr<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>xhr<span class="punctuation token">.</span>status <span class="operator token">==</span> <span class="number token">200</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob retrieved"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> blob <span class="operator token">=</span> xhr<span class="punctuation token">.</span>response<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl error:"</span><span class="punctuation token">,</span> - xhr<span class="punctuation token">.</span>responseText<span class="punctuation token">,</span> xhr<span class="punctuation token">.</span>status<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - xhr<span class="punctuation token">.</span><span class="function token">send<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3<code>,</code> </span></span><code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>le nouveau "blob"</span></span> <code class="language-js"><span class="comment token">responseType n'est pas géré. -</span> <span class="comment token"> // http://bugs.jquery.com/ticket/11461 -</span> <span class="comment token"> // http://bugs.jquery.com/ticket/7248 -</span> <span class="comment token"> // $.ajax({ -</span> <span class="comment token"> // url: url, -</span> <span class="comment token"> // type: 'GET', -</span> <span class="comment token"> // xhrFields: { responseType: 'blob' }, -</span> <span class="comment token"> // success: function(data, textStatus, jqXHR) { -</span> <span class="comment token"> // console.log("Blob retrieved"); -</span> <span class="comment token"> // console.log("Blob:", data); -</span> <span class="comment token"> // // addPublication(biblioid, title, year, data); -</span> <span class="comment token"> // }, -</span> <span class="comment token"> // error: function(jqXHR, textStatus, errorThrown) { -</span> <span class="comment token"> // console.error(errorThrown); -</span> <span class="comment token"> // displayActionFailure("Error during blob retrieval"); -</span> <span class="comment token"> // } -</span> <span class="comment token"> // }); -</span> <span class="punctuation token">}</span> - - <span class="comment token">/** + */ + function addPublicationFromUrl(biblioid, title, year, url) { + console.log("addPublicationFromUrl:", arguments); + + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + // Définir le type de réponse recherché à "blob<code>"</code> + // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute + xhr.responseType = 'blob'; + xhr.onload = function (evt) { + if (xhr.status == 200) { + console.log("Blob retrieved"); + var blob = xhr.response; + console.log("Blob:", blob); + addPublication(biblioid, title, year, blob); + } else { + console.error("addPublicationFromUrl error:", + xhr.responseText, xhr.status); + } + }; + xhr.send(); + + // Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3<code>,</code> + // le nouveau "blob" responseType n'est pas géré. + // http://bugs.jquery.com/ticket/11461 + // http://bugs.jquery.com/ticket/7248 + // $.ajax({ + // url: url, + // type: 'GET', + // xhrFields: { responseType: 'blob' }, + // success: function(data, textStatus, jqXHR) { + // console.log("Blob retrieved"); + // console.log("Blob:", data); + // // addPublication(biblioid, title, year, data); + // }, + // error: function(jqXHR, textStatus, errorThrown) { + // console.error(errorThrown); + // displayActionFailure("Error during blob retrieval"); + // } + // }); + } + + /** * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em> * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em> * @paramètre {number} <em>(nombre)</em> year <em>(année)</em> * @paramètre {Blob=} blob - */</span> - <span class="keyword token">function</span> <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublication arguments:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> biblioid<span class="punctuation token">:</span> biblioid<span class="punctuation token">,</span> title<span class="punctuation token">:</span> title<span class="punctuation token">,</span> year<span class="punctuation token">:</span> year <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> - obj<span class="punctuation token">.</span>blob <span class="operator token">=</span> blob<span class="punctuation token">;</span> - - <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> req<span class="punctuation token">;</span> - <span class="keyword token">try</span> <span class="punctuation token">{</span> - req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>name <span class="operator token">==</span> <span class="string token">'DataCloneError'</span><span class="punctuation token">)</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"This engine doesn't know how to clone a Blob, "</span> <span class="operator token">+</span> - <span class="string token">"use Firefox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">throw</span> e<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Insertion in DB successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublication error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/** + */ + function addPublication(biblioid, title, year, blob) { + console.log("addPublication arguments:", arguments); + var obj = { biblioid: biblioid, title: title, year: year }; + if (typeof blob != 'undefined') + obj.blob = blob; + + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req; + try { + req = store.add(obj); + } catch (e) { + if (e.name == 'DataCloneError') + displayActionFailure("This engine doesn't know how to clone a Blob, " + + "use Firefox"); + throw e; + } + req.onsuccess = function (evt) { + console.log("Insertion in DB successful"); + displayActionSuccess(); + displayPubList(store); + }; + req.onerror = function() { + console.error("addPublication error", this.error); + displayActionFailure(this.error); + }; + } + + /** * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em> - */</span> - <span class="keyword token">function</span> <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">index<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>biblioid<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">deletePublication<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>id<span class="punctuation token">,</span> store<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublicationFromBib:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="comment token">/** + */ + function deletePublicationFromBib(biblioid) { + console.log("deletePublication:", arguments); + var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var req = store.index('biblioid'); + req.get(biblioid).onsuccess = function(evt) { + if (typeof evt.target.result == 'undefined') { + displayActionFailure("No matching record found"); + return; + } + deletePublication(evt.target.result.id, store); + }; + req.onerror = function (evt) { + console.error("deletePublicationFromBib:", evt.target.errorCode); + }; + } + + /** * @paramètre {number} <em>(nombre)</em> key <em>(clé)</em> * @paramètre {IDBObjectStore=} store <em>(objet de stockage)</em> - */</span> - <span class="keyword token">function</span> <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> - store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token"> // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation -</span> <span class="comment token"> // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est -</span> <span class="comment token"> // "undefined" (<em>indéfini</em>), donc il n'est pas possible de savoir si certains enregistrements -</span> <span class="comment token"> // ont été effectivement supprimés en lisant le résultat de la requête. -</span> <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> record <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"record:"</span><span class="punctuation token">,</span> record<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> record <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="comment token"> // Attention: </span></code> <span id="result_box" lang="fr"><span>La même clé utilisée pour la création doit être transmise pour</span></span> <code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // la suppression. </span></code> <span id="result_box" lang="fr"><span>Si la clé était un nombre pour la création, elle <code>doit</code></span></span><code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // être un nombre pour la suppression. -</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target.result:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Deletion successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span> - msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Success: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Success"</span><span class="punctuation token">;</span> - $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'<span class="action-success">'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'</span>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">function</span> <span class="function token">displayActionFailure<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span> - msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Failure: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Failure"</span><span class="punctuation token">;</span> - $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'<span class="action-failure">'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'</span>'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">function</span> <span class="function token">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus DONE"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">function</span> <span class="function token">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addEventListeners"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - $<span class="punctuation token">(</span><span class="string token">'#register-form-reset'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - $<span class="punctuation token">(</span><span class="string token">'#add-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"add ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> title <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-title'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>title <span class="operator token">||</span> <span class="operator token">!</span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Required field(s) missing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">var</span> year <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-year'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6 -</span> <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">isNaN<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid year"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - year <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - year <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">var</span> file_input <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> selected_file <span class="operator token">=</span> file_input<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"selected_file:"</span><span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface</span></span><code class="language-js"><span class="comment token"> -</span> <span class="comment token"> // </span></code><span lang="fr"><span>utilisateur une fois que nous</span></span><code> avons sa valeur</code><code class="language-js"><span class="comment token">, mais au lieu de faire cela nous utiliserons -</span> <span class="comment token"> // plutôt un type "reset" entré dans le formulaire HTML . -</span> <span class="comment token"> // file_input.val(null); -</span> <span class="keyword token">var</span> file_url <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file-url'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>selected_file<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>file_url<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> file_url<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - $<span class="punctuation token">(</span><span class="string token">'#delete-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> key <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#key-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>biblioid <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6 -</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="function token">isNaN<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid key"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - $<span class="punctuation token">(</span><span class="string token">'#clear-store-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">clearObjectStore<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="keyword token">var</span> search_button <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#search-list-button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - search_button<span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">displayPubList<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="punctuation token">}</span> - - <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // Immediately-Invoked Function Expression (IIFE)</span></code></pre> + */ + function deletePublication(key, store) { + console.log("deletePublication:", arguments); + + if (typeof store == 'undefined') + store = getObjectStore(DB_STORE_NAME, 'readwrite'); + + // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation + // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est + // "undefined" (<em>indéfini</em>), donc il n'est pas possible de savoir si certains enregistrements + // ont été effectivement supprimés en lisant le résultat de la requête. + var req = store.get(key); + req.onsuccess = function(evt) { + var record = evt.target.result; + console.log("record:", record); + if (typeof record == 'undefined') { + displayActionFailure("No matching record found"); + return; + } + // Attention: La même clé utilisée pour la création doit être transmise pour + // la suppression. Si la clé était un nombre pour la création, elle <code>doit</code> + // être un nombre pour la suppression. + req = store.delete(key); + req.onsuccess = function(evt) { + console.log("evt:", evt); + console.log("evt.target:", evt.target); + console.log("evt.target.result:", evt.target.result); + console.log("delete successful"); + displayActionSuccess("Deletion successful"); + displayPubList(store); + }; + req.onerror = function (evt) { + console.error("deletePublication:", evt.target.errorCode); + }; + }; + req.onerror = function (evt) { + console.error("deletePublication:", evt.target.errorCode); + }; + } + + function displayActionSuccess(msg) { + msg = typeof msg != 'undefined' ? "Success: " + msg : "Success"; + $('#msg').html('<span class="action-success">' + msg + '</span>'); + } + function displayActionFailure(msg) { + msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure"; + $('#msg').html('<span class="action-failure">' + msg + '</span>'); + } + function resetActionStatus() { + console.log("resetActionStatus ..."); + $('#msg').empty(); + console.log("resetActionStatus DONE"); + } + + function addEventListeners() { + console.log("addEventListeners"); + + $('#register-form-reset').click(function(evt) { + resetActionStatus(); + }); + + $('#add-button').click(function(evt) { + console.log("add ..."); + var title = $('#pub-title').val(); + var biblioid = $('#pub-biblioid').val(); + if (!title || !biblioid) { + displayActionFailure("Required field(s) missing"); + return; + } + var year = $('#pub-year').val(); + if (year != '') { + // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6 + if (isNaN(year)) { + displayActionFailure("Invalid year"); + return; + } + year = Number(year); + } else { + year = null; + } + + var file_input = $('#pub-file'); + var selected_file = file_input.get(0).files[0]; + console.log("selected_file:", selected_file); + // Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface + // utilisateur une fois que nous<code> avons sa valeur</code>, mais au lieu de faire cela nous utiliserons + // plutôt un type "reset" entré dans le formulaire HTML . + // file_input.val(null); + var file_url = $('#pub-file-url').val(); + if (selected_file) { + addPublication(biblioid, title, year, selected_file); + } else if (file_url) { + addPublicationFromUrl(biblioid, title, year, file_url); + } else { + addPublication(biblioid, title, year); + } + + }); + + $('#delete-button').click(function(evt) { + console.log("delete ..."); + var biblioid = $('#pub-biblioid-to-delete').val(); + var key = $('#key-to-delete').val(); + + if (biblioid != '') { + deletePublicationFromBib(biblioid); + } else if (key != '') { + // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6 + if (key == '' || isNaN(key)) { + displayActionFailure("Invalid key"); + return; + } + key = Number(key); + deletePublication(key); + } + }); + + $('#clear-store-button').click(function(evt) { + clearObjectStore(); + }); + + var search_button = $('#search-list-button'); + search_button.click(function(evt) { + displayPubList(); + }); + + } + + openDb(); + addEventListeners(); + +})(); // Immediately-Invoked Function Expression (IIFE)</pre> <p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p> @@ -1314,25 +1314,25 @@ openReq<span class="punctuation token">.</span>onsuccess <span class="operator t <p>Référence :</p> <ul> - <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> - <li><a class="external" href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li> - <li>IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom/indexedDB/.*\.idl&regexp=1">interface files</a> dans le code source de Firefox</li> + <li><a href="/en/IndexedDB">IndexedDB API Reference</a></li> + <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> + <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li> + <li>IndexedDB <a href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1">interface files</a> dans le code source de Firefox</li> </ul> <p>Tutoriels :</p> <ul> <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> - <li><a class="external external-icon" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> + <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> </ul> <p>Bibliothèques :</p> <ul> - <li><a href="http://mozilla.github.io/localForage/">localForage </a>: Un Polyfill <span id="result_box" lang="fr"><span>qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.</span></span></li> - <li><a href="http://www.dexie.org/">dexie.js </a>: <span id="result_box" lang="fr"><span>Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.</span></span></li> - <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Un MongoDB-like interface pour IndexedDB <span id="result_box" lang="fr"><span>qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de </span></span> MongoDB.</li> - <li><a href="http://jsstore.net/">JsStore</a> : <span id="result_box" lang="fr"><span>Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.</span></span></li> + <li><a href="http://mozilla.github.io/localForage/">localForage </a>: Un Polyfill qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.</li> + <li><a href="http://www.dexie.org/">dexie.js </a>: Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.</li> + <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Un MongoDB-like interface pour IndexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</li> + <li><a href="http://jsstore.net/">JsStore</a> : Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.</li> </ul> diff --git a/files/fr/web/api/inputevent/index.html b/files/fr/web/api/inputevent/index.html index 2b73d4d0a9..1f33085e17 100644 --- a/files/fr/web/api/inputevent/index.html +++ b/files/fr/web/api/inputevent/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/InputEvent <h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="height: 49px; width: 1000px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/intersection_observer_api/index.html b/files/fr/web/api/intersection_observer_api/index.html index b314d00515..3343785331 100644 --- a/files/fr/web/api/intersection_observer_api/index.html +++ b/files/fr/web/api/intersection_observer_api/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Intersection_Observer_API --- <div>{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}</div> -<p class="summary"><span class="seoSummary">L'API <em>Intersection Observer</em> permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.</span></p> +<p>L'API <em>Intersection Observer</em> permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.</p> <p>Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:</p> @@ -118,8 +118,9 @@ observer.observe(target); <li>La dernière boîte a des paliers tous les 25%.</li> </ul> -<div class="hidden" id="threshold-example"> -<pre class="brush: html"><template id="boxTemplate"> +<h5 id="exemple_de_seuil">Exemple de seuil</h5> + +<pre class="brush: html hidden"><template id="boxTemplate"> <div class="sampleBox"> <div class="label topLeft"></div> <div class="label topRight"></div> @@ -135,7 +136,7 @@ observer.observe(target); </div> </main></pre> -<pre class="brush: css">.contents { +<pre class="brush: css hidden">.contents { position: absolute; width: 700px; height: 1725px; @@ -205,7 +206,7 @@ observer.observe(target); } </pre> -<pre class="brush: js">let observers = []; +<pre class="brush: js hidden">let observers = []; startup(); @@ -272,9 +273,8 @@ function intersectionCallback(entries) { }); } </pre> -</div> -<p>{{EmbedLiveSample("threshold-example", 500, 500)}}</p> +<p>{{EmbedLiveSample("exemple_de_seuil", 500, 500)}}</p> <h2 id="Interfaces">Interfaces</h2> diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html index 1842bb7f60..cd9eb647cd 100644 --- a/files/fr/web/api/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/IntersectionObserver --- <div>{{APIRef("Intersection Observer API")}}</div> -<p class="summary">L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API <i>Intersection Observer</i></a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (<a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a>). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.</p> +<p>L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API <i>Intersection Observer</i></a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (<a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a>). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.</p> <p>Lorsqu'un objet implémentant <code>IntersectionObserver</code> est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'<code>IntersectionObserver</code>. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.</p> diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html index d22916ffd3..4d90eff28d 100644 --- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html +++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IntersectionObserver/IntersectionObserver --- <div>{{APIRef("Intersection Observer API")}}</div> -<p class="summary">Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Les marges appliquées à la zone racine (indiquée dans l'objet <code>options</code> via la propriété <code>rootMargin</code>, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété <code>thresholds</code> d'<code>options</code>) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p> +<p>Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Les marges appliquées à la zone racine (indiquée dans l'objet <code>options</code> via la propriété <code>rootMargin</code>, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété <code>thresholds</code> d'<code>options</code>) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html index 1e05c9d038..7fc8411cbb 100644 --- a/files/fr/web/api/intersectionobserver/observe/index.html +++ b/files/fr/web/api/intersectionobserver/observe/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IntersectionObserver/observe --- <div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> -<p class="summary">La méthode <code><strong>observe()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a>.</p> +<p>La méthode <code><strong>observe()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a>.</p> <p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans <a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a>, la fonction de rappel de l'observateur est executée avec comme argument un objet <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets <code>IntersectionObserverEntry</code>.</p> diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html index 1f15257960..3778b82c7f 100644 --- a/files/fr/web/api/intersectionobserver/root/index.html +++ b/files/fr/web/api/intersectionobserver/root/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IntersectionObserver/root --- <div>{{APIRef("Intersection Observer API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>root</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> identifie l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou le <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont les bornes sont considérées comme la zone englobante (<i>bounding box</i>) de la zone d'affichage (<i>viewport</i>) au sein de laquelle les intersections avec la cible sont observées. Si <code>root</code> vaut <code>null</code>, ce sont les limites de la zone d'affichage (<i>viewport</i>) courantes qui sont utilisées.</p> +<p>La propriété en lecture seule <strong><code>root</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> identifie l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou le <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont les bornes sont considérées comme la zone englobante (<i>bounding box</i>) de la zone d'affichage (<i>viewport</i>) au sein de laquelle les intersections avec la cible sont observées. Si <code>root</code> vaut <code>null</code>, ce sont les limites de la zone d'affichage (<i>viewport</i>) courantes qui sont utilisées.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.html b/files/fr/web/api/intersectionobserver/takerecords/index.html index de983e5aed..ceb2a5db1e 100644 --- a/files/fr/web/api/intersectionobserver/takerecords/index.html +++ b/files/fr/web/api/intersectionobserver/takerecords/index.html @@ -14,11 +14,10 @@ translation_of: Web/API/IntersectionObserver/takeRecords --- <div>{{APIRef("Intersection Observer API")}}</div> -<p class="summary">La méthode <code><strong>takeRecords()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> renvoie un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.</p> +<p>La méthode <code><strong>takeRecords()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> renvoie un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.</p> +<div class="note"> + <p><strong>Note :</strong> Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.</p> </div> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html index ec430bdedb..1ecebadf18 100644 --- a/files/fr/web/api/intersectionobserver/thresholds/index.html +++ b/files/fr/web/api/intersectionobserver/thresholds/index.html @@ -28,9 +28,8 @@ translation_of: Web/API/IntersectionObserver/thresholds <p>Si aucune option <code>threshold</code> n'est fournie lors de l'instanciation avec <code>IntersectionObserver()</code>, la valeur par défaut de <code>thresholds</code> est définie à <code>[0]</code>.</p> -<div class="notecard warning"> - <p><b>Attention !</b></p> - <p>Bien que l'objet d'<code>options</code> qu'on peut spécifier à la création d'un <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> possède une propriété champ nommée <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>threshold</code></a>, cette propriété-ci s'appelle <code>thresholds</code> (avec un « s » supplémentaire donc). <em>Cela peut porter à confusion</em>. Si vous utilisez <code>thresholds</code> par erreur comme nom pour la propriété de l'objet <code>options</code>, le tableau porté par <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p> +<div class="warning"> + <p><strong>Attention :</strong> Bien que l'objet d'<code>options</code> qu'on peut spécifier à la création d'un <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> possède une propriété champ nommée <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>threshold</code></a>, cette propriété-ci s'appelle <code>thresholds</code> (avec un « s » supplémentaire donc). <em>Cela peut porter à confusion</em>. Si vous utilisez <code>thresholds</code> par erreur comme nom pour la propriété de l'objet <code>options</code>, le tableau porté par <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p> </div> <h2 id="specifications">Spécifications</h2> diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html index 188cd55d4e..c307d129e3 100644 --- a/files/fr/web/api/intersectionobserver/unobserve/index.html +++ b/files/fr/web/api/intersectionobserver/unobserve/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/IntersectionObserver/unobserve --- <div>{{APIRef("Intersection Observer API")}}</div> -<p class="summary">La méthode <code><strong>unobserve()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> indique à l'objet <code>IntersectionObserver</code> courant de cesser d'observer l'élément cible spécifié.</p> +<p>La méthode <code><strong>unobserve()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> indique à l'objet <code>IntersectionObserver</code> courant de cesser d'observer l'élément cible spécifié.</p> <h2 id="syntax">Syntaxe</h2> diff --git a/files/fr/web/api/intersectionobserverentry/index.html b/files/fr/web/api/intersectionobserverentry/index.html index 4a03c1ae53..9b5b7a250e 100644 --- a/files/fr/web/api/intersectionobserverentry/index.html +++ b/files/fr/web/api/intersectionobserverentry/index.html @@ -11,7 +11,9 @@ translation_of: Web/API/IntersectionObserverEntry --- <div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div> -<p><span class="seoSummary">L'interface <code><strong>IntersectionObserverEntry</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.</span> Les instances de <code>IntersectionObserverEntry</code> sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres <code>entries</code> ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</p> +<p>L'interface <code><strong>IntersectionObserverEntry</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.</p> + +<p> Les instances de <code>IntersectionObserverEntry</code> sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres <code>entries</code> ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</p> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/intersectionobserverentry/target/index.html b/files/fr/web/api/intersectionobserverentry/target/index.html index 6b4f871c52..7ac31d8a3c 100644 --- a/files/fr/web/api/intersectionobserverentry/target/index.html +++ b/files/fr/web/api/intersectionobserverentry/target/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/IntersectionObserverEntry/target --- <div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>target</code></strong> de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.</span></p> +<p>La propriété en lecture seule <strong><code>target</code></strong> de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/keyboardevent/charcode/index.html b/files/fr/web/api/keyboardevent/charcode/index.html index 34335deca5..523257e055 100644 --- a/files/fr/web/api/keyboardevent/charcode/index.html +++ b/files/fr/web/api/keyboardevent/charcode/index.html @@ -18,12 +18,10 @@ translation_of: Web/API/KeyboardEvent/charCode <p>Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.</p> <div class="note"> -<p><strong><code>N'utilisez plus cette propriété, elle est dépréciée.</code></strong></p> - -<p>Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p> +<p><strong>Note :</strong> N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var value</em> = <em>event</em>.charCode; </pre> @@ -32,7 +30,7 @@ translation_of: Web/API/KeyboardEvent/charCode <li><em><code>value</code></em> est la valeur Unicode du caractère associé à la touche pressée.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js"><html> <head> @@ -58,21 +56,21 @@ translation_of: Web/API/KeyboardEvent/charCode </html> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés <code>{{ domxref("event.keyCode", "keyCode") }}</code> et <code>charCode</code>, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), <code>charCode</code> prend la valeur du code de ce caractère, en respectant la casse. (i.e. <code>charCode</code> tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans <code>keyCode</code>.</p> -<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event" title="en/Gecko Keypress Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p> +<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p> <p><code>charCode</code> n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, <code>keyCode</code> is set instead.</p> <p>Pour obtenir le code de la touche qu'il soit stocké dans <code>keyCode</code> ou <code>charCode</code>, requêtez la propriété {{ domxref("event.which", "which") }}.</p> -<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. <span class="comment">Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</span></p> +<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</p> -<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants" title="en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p> +<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -93,10 +91,4 @@ translation_of: Web/API/KeyboardEvent/charCode <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.KeyboardEvent.charCode")}}</p> - -<div id="compat-desktop"></div> - -<div id="compat-mobile"></div> +<p>{{Compat("api.KeyboardEvent.charCode")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/code/index.html b/files/fr/web/api/keyboardevent/code/index.html index 04ebfa99e7..d9d70d3e19 100644 --- a/files/fr/web/api/keyboardevent/code/index.html +++ b/files/fr/web/api/keyboardevent/code/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/KeyboardEvent/code --- <div>{{APIRef("DOM Events")}}</div> -<p><span class="seoSummary">La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</span></p> +<p>La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</p> <p>Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.</p> @@ -64,11 +64,9 @@ translation_of: Web/API/KeyboardEvent/code <p>{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}</p> -<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu"><span class="tlid-translation translation" lang="fr"><span title="">Gérer les événements de clavier dans un jeu</span></span></h3> +<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu">Gérer les événements de clavier dans un jeu</h3> -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">Cet exemple établit un écouteur d'événements pour</span></span> l'événement {{event("keydown")}} <span class="tlid-translation translation" lang="fr"><span title="">qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite.</span> <span title="">Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</span></span></div> -</div> +<p>Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</p> <h4 id="HTML_2">HTML</h4> @@ -138,7 +136,7 @@ let spaceship = document.getElementById("spaceship"); } </pre> -<p>La fonction <code>refresh()</code> <span class="tlid-translation translation" lang="fr"><span title="">gère l'application de la rotation et de la position à l'aide d'un</span></span> <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> +<p>La fonction <code>refresh()</code> gère l'application de la rotation et de la position à l'aide d'un <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> <pre class="brush: js">function refresh() { let x = position.x - (shipSize.width/2); @@ -149,7 +147,7 @@ let spaceship = document.getElementById("spaceship"); } </pre> -<p><span class="tlid-translation translation" lang="fr"><span title="">Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position </span><span title="">et son nouvel angle.</span></span></p> +<p>Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position et son nouvel angle.</p> <pre class="brush: js">window.addEventListener("keydown", function(event) { if (event.preventDefaulted) { @@ -191,7 +189,7 @@ let spaceship = document.getElementById("spaceship"); <p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p> -<p><span class="tlid-translation translation" lang="fr"><span title="">Ce code peut être amélioré de plusieurs manières.</span> <span title="">La plupart des jeux réels surveillent les événements</span></span> {{event("keydown")}}, <span class="tlid-translation translation" lang="fr"><span title="">démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement</span></span> {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. <span class="tlid-translation translation" lang="fr"><span title="">Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps.</span> <span title="">Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide.</span></span> Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</p> +<p>Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/keyboardevent/index.html b/files/fr/web/api/keyboardevent/index.html index fe8ef03ea0..4ce7e9b411 100644 --- a/files/fr/web/api/keyboardevent/index.html +++ b/files/fr/web/api/keyboardevent/index.html @@ -14,7 +14,9 @@ translation_of: Web/API/KeyboardEvent <p>Les objets <strong><code>KeyboardEvent</code></strong> décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (<code>keydown</code>, <code>keypress</code>, ou <code>keyup</code>) identifie quel type d'activité a été effectué.</p> -<div class="note"><strong>Note :</strong> <code>KeyboardEvent</code> indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement <code>input</code> HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.</div> +<div class="note"> + <p><strong>Note :</strong> <code>KeyboardEvent</code> indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement <code>input</code> HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.</p> +</div> <h2 id="Constructeur">Constructeur</h2> @@ -44,22 +46,18 @@ translation_of: Web/API/KeyboardEvent <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt> <dd>Returne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Alt</kbd> (<kbd>Option</kbd> ou <kbd>⌥</kbd> sous OS X) était active quand l'évènement touche a été généré.</dd> <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt> - <dd>Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.</dd> - <dd> + <dd><p>Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.</p> <div class="note"> <p><strong>Note :</strong> si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.</p> </div> - </dd> - <dd> <div class="warning"> - <p><strong>Avertissement :</strong> cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.</p> + <p><strong>Attention :</strong> cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.</p> </div> </dd> <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt> - <dd>Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement <code>keypress</code>. Pour les touches dont l'attribut <code>char</code> contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.</dd> - <dd> + <dd><p>Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement <code>keypress</code>. Pour les touches dont l'attribut <code>char</code> contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.</p> <div class="warning"> - <p><strong>Avertissement :</strong> cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p> + <p><strong>Attention :</strong> cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p> </div> </dd> <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt> @@ -71,18 +69,18 @@ translation_of: Web/API/KeyboardEvent <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt> <dd>Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.</dd> <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée. - <div class="warning"><strong>Avertissement : </strong>cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div> + <dd><p>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.</p> + <div class="warning"><p><strong>Attention :</strong> cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p></div> </dd> <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> <dd>Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.</dd> <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> <dd>C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.</dd> <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier. - <div class="note"><strong>Note :</strong> cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.</div> + <dd><p>Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.</p> + <div class="note"><p><strong>Note :</strong> cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.</p></div> </dd> - <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt> + <dt>{{domxref("KeyboardEvent.location")}}{{Readonlyinline}}</dt> <dd>Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.</dd> <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt> <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Meta</kbd> (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> ; sur les claviers Windows, la touche Windows (<kbd>⊞</kbd>)) était active quand l'évènement touche a été généré.</dd> @@ -91,8 +89,8 @@ translation_of: Web/API/KeyboardEvent <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt> <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Shift</kbd> était active quand l'évènement touche a été généré.</dd> <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt> - <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que <code>keyCode</code>. - <div class="warning"><strong>Avertissement :</strong> cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div> + <dd><p>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que <code>keyCode</code>.</p> + <div class="warning"><p><strong>Attention :</strong> cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p></div> </dd> </dl> @@ -111,15 +109,13 @@ translation_of: Web/API/KeyboardEvent <p>Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements <code>keydown</code> et <code>keyup</code>.</p> <div class="note"> -<p>Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement <code>keypress</code> pour ces touches.</p> +<p><strong>Note :</strong> Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement <code>keypress</code> pour ces touches.</p> </div> <p>Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement <code>keydown</code>. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement <code>keypress</code> ; ce comportement incohérent était le {{bug(602812)}}.</p> <h3 id="Gestion_de_l'auto-répétition">Gestion de l'auto-répétition</h3> -<p> </p> - <p>Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :</p> <ol> @@ -165,7 +161,9 @@ translation_of: Web/API/KeyboardEvent <dd>Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.</dd> </dl> -<p class="note"><strong>Note :</strong> le déclenchement manuel d'un événement ne génère <em>pas</em> l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.</p> +<div class="note"> + <p><strong>Note :</strong> le déclenchement manuel d'un événement ne génère <em>pas</em> l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.</p> +</div> <h2 id="Exemple">Exemple</h2> diff --git a/files/fr/web/api/keyboardevent/key/index.html b/files/fr/web/api/keyboardevent/key/index.html index cf51e90dc4..bfd9846960 100644 --- a/files/fr/web/api/keyboardevent/key/index.html +++ b/files/fr/web/api/keyboardevent/key/index.html @@ -15,11 +15,9 @@ translation_of: Web/API/KeyboardEvent/key <p>La propriété en lecture seule de <code>key</code> de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche <kbd>Shift</kbd> (<em>majuscules</em>) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :</p> -<div class="pull-aside moreinfo"> <h4 id="Valeurs_des_touches">Valeurs des touches</h4> -<p>Voir une liste complète des <a href="https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values">valeurs de touches</a></p> -</div> +<p>Voir une liste complète des <a href="/fr/docs/Web/API/KeyboardEvent/key/Key_Values">valeurs de touches</a></p> <ul> <li> @@ -56,83 +54,83 @@ translation_of: Web/API/KeyboardEvent/key <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fx<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>clear console<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console-log<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="fx"> + <div> + <textarea rows="5" name="test-target" id="test-target"></textarea> + <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> + </div> + <div class="flex"> + <div id="console-log"></div> + </div> +</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.fx</span> </span><span class="punctuation token">{</span> - <span class="property token">-webkit-display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span> - <span class="property token">margin-left</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span> - <span class="property token">margin-right</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.fx</span> > div </span><span class="punctuation token">{</span> - <span class="property token">padding-left</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> - <span class="property token">padding-right</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.fx</span> > div<span class="pseudo-class token">:first-child</span> </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30%</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.flex</span> </span><span class="punctuation token">{</span> - <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> - <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="id token">#test-target</span> </span><span class="punctuation token">{</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span> - <span class="property token">margin-bottom</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: css">.fx { + -webkit-display: flex; + display: flex; + margin-left: -20px; + margin-right: -20px; +} + +.fx > div { + padding-left: 20px; + padding-right: 20px; +} + +.fx > div:first-child { + width: 30%; +} + +.flex { + -webkit-flex: 1; + flex: 1; +} + +#test-target { + display: block; + width: 100%; + margin-bottom: 10px; +}</pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test-target'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> -consoleLog <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'console-log'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> -btnClearConsole <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn-clear-console'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">let textarea = document.getElementById('test-target'), +consoleLog = document.getElementById('console-log'), +btnClearConsole = document.getElementById('btn-clear-console'); -<span class="keyword token">function</span> <span class="function token">logMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">let</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - p<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - consoleLog<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +function logMessage(message) { + let p = document.createElement('p'); + p.appendChild(document.createTextNode(message)); + consoleLog.appendChild(p); +} -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keydown'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>repeat<span class="punctuation token">)</span> - <span class="function token">logMessage</span><span class="punctuation token">(</span>`first keydown event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span><span class="template-string token"><span class="string token">`); +textarea.addEventListener('keydown', (e) => { + if (!e.repeat) + logMessage(`first keydown event. key property value is "${e.key}"`); else - logMessage(`</span></span>keydown event repeats<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'beforeinput'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> - <span class="function token">logMessage</span><span class="punctuation token">(</span>`beforeinput event<span class="punctuation token">.</span> you are about inputing <span class="string token">"${e.data}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> - <span class="function token">logMessage</span><span class="punctuation token">(</span>`input event<span class="punctuation token">.</span> you have just inputed <span class="string token">"${e.data}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keyup'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> - <span class="function token">logMessage</span><span class="punctuation token">(</span>`keyup event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -btnClearConsole<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">></span> <span class="punctuation token">{</span> - <span class="keyword token">let</span> child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span>child<span class="punctuation token">)</span> <span class="punctuation token">{</span> - consoleLog<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>child<span class="punctuation token">)</span><span class="punctuation token">;</span> - child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + logMessage(`keydown event repeats. key property value is "${e.key}"`); +}); + +textarea.addEventListener('beforeinput', (e) => { + logMessage(`beforeinput event. you are about inputing "${e.data}"`); +}); + +textarea.addEventListener('input', (e) => { + logMessage(`input event. you have just inputed "${e.data}"`); +}); + +textarea.addEventListener('keyup', (e) => { + logMessage(`keyup event. key property value is "${e.key}"`); +}); + +btnClearConsole.addEventListener('click', (e) => { + let child = consoleLog.firstChild; + while (child) { + consoleLog.removeChild(child); + child = consoleLog.firstChild; + } +});</pre> <h3 id="Résultat">Résultat</h3> @@ -164,7 +162,7 @@ btnClearConsole<span class="punctuation token">.</span><span class="function tok <h2 id="Exemple">Exemple</h2> -<p><span id="result_box" lang="fr"><span>Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements </span></span> {{domxref("Element/keydown_event", "keydown")}} <span lang="fr"><span>.</span> <span>Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul</span><span>).</span></span></p> +<p>Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements {{domxref("Element/keydown_event", "keydown")}} . Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul).</p> <pre class="brush: js">window.addEventListener("keydown", function (event) { if (event.defaultPrevented) { @@ -218,10 +216,4 @@ btnClearConsole<span class="punctuation token">.</span><span class="function tok <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.KeyboardEvent.key")}}</p> - -<div id="compat-desktop"></div> - -<div id="compat-mobile"></div> +<p>{{Compat("api.KeyboardEvent.key")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.html b/files/fr/web/api/keyboardevent/key/key_values/index.html index a61f42654e..07c8ba499c 100644 --- a/files/fr/web/api/keyboardevent/key/key_values/index.html +++ b/files/fr/web/api/keyboardevent/key/key_values/index.html @@ -5,9 +5,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values --- <p>Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.</p> -<div class="pull-aside"> -<div class="moreinfo">Apprenez à utiliser ces valeurs clés en JavaScript en utilisant <a href="/fr/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div> -</div> +<p>Apprenez à utiliser ces valeurs clés en JavaScript en utilisant <a href="/fr/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></p> <p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p> @@ -18,15 +16,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Valeur</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Code clé virtuel</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Valeur</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Code clé virtuel</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -48,15 +46,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"Alt"</code> [5]</td> @@ -228,15 +226,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -290,15 +288,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -392,15 +390,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -526,15 +524,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -625,7 +623,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <tr> <td><code>"Pause"</code></td> <td>The <kbd>Pause</kbd> key. Pauses the current application or state, if applicable. - <div class="note">This shouldn't be confused with the <code>"MediaPause"</code> key value, which is used for media controllers, rather than to control applications and processes.</div> + <div class="note"><p><strong>Note :</strong> This shouldn't be confused with the <code>"MediaPause"</code> key value, which is used for media controllers, rather than to control applications and processes.</p></div> </td> <td><code>VK_PAUSE</code> (0x13)</td> <td></td> @@ -637,7 +635,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <tr> <td><code>"Play"</code></td> <td>The <kbd>Play</kbd> key. Resumes a previously paused application, if applicable. - <div class="note">This shouldn't be confused with the <code>"MediaPlay"</code> key value, which is used for media controllers, rather than to control applications and processes.</div> + <div class="note"><p><strong>Note :</strong> This shouldn't be confused with the <code>"MediaPlay"</code> key value, which is used for media controllers, rather than to control applications and processes.</p></div> </td> <td><code>VK_PLAY</code> (0xFA)</td> <td></td> @@ -699,15 +697,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -750,7 +748,7 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <tr> <td><code>"Power"</code></td> <td>The <kbd>Power</kbd> button or key, to toggle power on and off. - <div class="note">Not all systems pass this key through to to the user agent.</div> + <div class="note"><p><strong>Note :</strong> Not all systems pass this key through to to the user agent.</p></div> </td> <td></td> <td></td> @@ -829,15 +827,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> </thead> <tbody> @@ -1010,15 +1008,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"HangulMode"</code></td> @@ -1059,15 +1057,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"Eisu"</code> [1]</td> @@ -1463,15 +1461,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"F1"</code></td> @@ -1699,15 +1697,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"AppSwitch"</code></td> @@ -1817,15 +1815,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"ChannelDown"</code></td> @@ -1940,15 +1938,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"AudioBalanceLeft"</code></td> @@ -2121,15 +2119,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"TV"</code> [1]</td> @@ -2392,21 +2390,21 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values </ul> <div class="note"> -<p>Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p> +<p><strong>Note :</strong> Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p> </div> <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"AVRInput"</code> [3]</td> @@ -3002,15 +3000,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"SpeechCorrectionList"</code> [1]</td> @@ -3042,15 +3040,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"Close"</code> [1]</td> @@ -3145,15 +3143,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"LaunchCalculator"</code> [5]</td> @@ -3441,15 +3439,15 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"BrowserBack"</code></td> @@ -3532,21 +3530,21 @@ translation_of: Web/API/KeyboardEvent/key/Key_Values <p>These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as <code>"0"</code> through <code>"9"</code>), some multimedia keyboards include additional number keys for higher numbers.</p> <div class="note"> -<p>The <kbd>10</kbd> key, if present, generates events with the <code>key</code> value of <code>"0"</code>.</p> +<p><strong>Note :</strong>The <kbd>10</kbd> key, if present, generates events with the <code>key</code> value of <code>"0"</code>.</p> </div> <table class="standard-table"> <thead> <tr> - <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th> - <th rowspan="2" scope="col" style="text-align: left;">Description</th> - <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th> + <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th> + <th rowspan="2" scope="col">Description</th> + <th colspan="4" scope="col">Virtual Keycode</th> </tr> <tr> - <th scope="col" style="text-align: left;">Windows</th> - <th scope="col" style="text-align: left;">Mac</th> - <th scope="col" style="text-align: left;">Linux</th> - <th scope="col" style="text-align: left;">Android</th> + <th scope="col">Windows</th> + <th scope="col">Mac</th> + <th scope="col">Linux</th> + <th scope="col">Android</th> </tr> <tr> <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td> diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.html b/files/fr/web/api/keyboardevent/keyboardevent/index.html index 2f63832ae4..f488108a15 100644 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.html +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.html @@ -15,41 +15,37 @@ translation_of: Web/API/KeyboardEvent/KeyboardEvent <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox"> <em>event</em> = new KeyboardEvent(<em>typeArg</em>, <em>KeyboardEventInit</em>);</pre> +<pre class="syntaxbox"> event = new KeyboardEvent(typeArg, KeyboardEventInit);</pre> <h3 id="Valeurs">Valeurs</h3> <dl> - <dt><em>typeArg</em></dt> + <dt>typeArg</dt> <dd>Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.</dd> - <dt><em>KeyboardEventInit</em>{{optional_inline}}</dt> -</dl> - -<dl> - <dd>Un dictionnaire <code>KeyboardEventInit</code> ayant les champs suivants : - + <dt>KeyboardEventInit{{optional_inline}}</dt> + <dd><p>Un dictionnaire <code>KeyboardEventInit</code> ayant les champs suivants :</p> <ul> - <li><code>"key"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.</li> - <li><code>"code"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.</li> - <li><code>"location"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.</li> - <li><code>"ctrlKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.</li> - <li><code>"shiftKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.</li> - <li><code>"altKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.</li> - <li><code>"metaKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.</li> - <li><code>"repeat"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.</li> - <li><code>"isComposing"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.</li> - <li><code>"charCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.</li> - <li><code>"keyCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.</li> - <li><code>"which"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.</li> + <li><code>"key"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.</li> + <li><code>"code"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.</li> + <li><code>"location"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.</li> + <li><code>"ctrlKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.</li> + <li><code>"shiftKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.</li> + <li><code>"altKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.</li> + <li><code>"metaKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.</li> + <li><code>"repeat"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.</li> + <li><code>"isComposing"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.</li> + <li><code>"charCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.</li> + <li><code>"keyCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.</li> + <li><code>"which"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.</li> </ul> - - <div class="note"> - <p><em>Le dictionnaire <code>KeyboardEventInit</code></em><em> accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.</em></p> - </div> </dd> </dl> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<div class="note"> + <p><strong>Note :</strong> Le dictionnaire <code>KeyboardEventInit</code> accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.</p> +</div> + +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/localfilesystem/index.html b/files/fr/web/api/localfilesystem/index.html index d8d3b0dd9c..9f4ca0c7c3 100644 --- a/files/fr/web/api/localfilesystem/index.html +++ b/files/fr/web/api/localfilesystem/index.html @@ -5,15 +5,15 @@ translation_of: Web/API/LocalFileSystem --- <div>{{APIRef("File System API")}}{{non-standard_header()}}</div> -<p>L'interface <code>LocalFileSystem</code>, appartenant à l'API <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_APIB">File System</a> fournit un accès à un système de fichier placé dans un bac à sable (<em>sandboxed file system</em>). Les méthodes de cette interface sont implémentées par les objets implémentants <code><a href="/fr/docs/Web/API/Window" title="cn/DOM/window">Window</a></code> ou <code><a href="/fr/docs/Web/API/Worker" title="En/DOM/Worker">Worker</a></code>.</p> +<p>L'interface <code>LocalFileSystem</code>, appartenant à l'API <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">File System</a> fournit un accès à un système de fichier placé dans un bac à sable (<em>sandboxed file system</em>). Les méthodes de cette interface sont implémentées par les objets implémentants <code><a href="/fr/docs/Web/API/Window">Window</a></code> ou <code><a href="/fr/docs/Web/API/Worker">Worker</a></code>.</p> <h2 id="Concepts_de_base">Concepts de base</h2> <h3 id="Créer_un_nouvel_espace_de_stockage">Créer un nouvel espace de stockage</h3> -<p>Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode <code>window.requestFileSystem()</code>. Lorsque la création de cet espace est effectuée, une fonction de rappel (<em>callback</em>) est appelée avec un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.</p> +<p>Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode <code>window.requestFileSystem()</code>. Lorsque la création de cet espace est effectuée, une fonction de rappel (<em>callback</em>) est appelée avec un objet <code><a href="/fr/docs/Web/API/FileSystem">FileSystem</a></code> contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.</p> -<p>Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#The_File_System_API_can_use_different_storage_types">l'article sur les concepts de base</a> pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.</p> +<p>Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">l'article sur les concepts de base</a> pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.</p> <h3 id="Utiliser_un_stockage_persistent">Utiliser un stockage persistent</h3> @@ -37,13 +37,13 @@ navigator.webkitPersistentStorage.requestQuota ( <h3 id="Origine_unique">Origine unique</h3> -<p>Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#Restrictions">l'article d'introduction aux concepts de base</a>.</p> +<p>Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">l'article d'introduction aux concepts de base</a>.</p> <h3 id="Exemple">Exemple</h3> <p>Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.</p> -<pre class="brush: js notranslate">// Gestion des préfixes spécifiques au navigateur +<pre class="brush: js">// Gestion des préfixes spécifiques au navigateur window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; // Le premier paramètre indique le type de stockage @@ -80,7 +80,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <h2 id="Méthodes">Méthodes</h2> -<h3 id="requestFileSystem" name="requestFileSystem"><code>requestFileSystem()</code></h3> +<h3 id="requestFileSystem"><code>requestFileSystem()</code></h3> <p>Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet <code>LocalFileSystem</code> avec la méthode globale <code>window.requestFileSystem()</code>.</p> @@ -91,7 +91,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); in ErrorCallback errorCallback );</pre> -<h5 id="Paramètres">Paramètres</h5> +<h4 id="Paramètres">Paramètres</h4> <dl> <dt><code>type</code></dt> @@ -99,7 +99,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <dt><code>size</code></dt> <dd>L'espace de stockage, exprimé en octets, nécessaire à l'application.</dd> <dt><code>successCallback</code></dt> - <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> avec deux propriétés : + <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet <code><a href="/fr/docs/Web/API/FileSystem">FileSystem</a></code> avec deux propriétés : <ul> <li><code>name</code> - le nom unique, assigné par le navigateur au système de fichiers.</li> <li><code>root</code> - un objet <code>DirectoryEntry</code> en lecture seule qui représente la racine du système de fichier.</li> @@ -109,15 +109,13 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet <code>FileError</code> comme argument.</dd> </dl> -<h5 id="Valeur_de_retour">Valeur de retour</h5> +<h4 id="Valeur_de_retour">Valeur de retour</h4> -<dl> - <dt><code>void</code></dt> -</dl> +<p><code>void</code></p> -<h5 id="Exceptions">Exceptions</h5> +<h4 id="Exceptions">Exceptions</h4> -<p>Cette méthode peut lever une exception <code><a href="/en-US/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec le code suivant :</p> +<p>Cette méthode peut lever une exception <code><a href="/en-US/docs/Web/API/FileError">FileError</a></code> avec le code suivant :</p> <table class="standard-table"> <thead> @@ -127,12 +125,12 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); </tr> <tr> <td><code>SECURITY_ERROR</code></td> - <td>L'application n'est pas autorisée à accéder à l'interface <em>File System</em>. Par exemple, il est interdit d'utiliser <code>file://</code>. Pour plus de détails, consulter <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#You_cannot_run_your_app_from_file:.2F.2F">l'article d'introduction aux concepts de base</a>.</td> + <td>L'application n'est pas autorisée à accéder à l'interface <em>File System</em>. Par exemple, il est interdit d'utiliser <code>file://</code>. Pour plus de détails, consulter <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions">l'article d'introduction aux concepts de base</a>.</td> </tr> </thead> </table> -<h3 id="resolveLocalFileSystemURL" name="resolveLocalFileSystemURL()"><code>resolveLocalFileSystemURL()</code></h3> +<h3 id="resolveLocalFileSystemURL"><code>resolveLocalFileSystemURL()</code></h3> <p>Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.</p> @@ -143,7 +141,7 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); ); </pre> -<h5 id="Paramètres_2">Paramètres</h5> +<h4 id="Paramètres_2">Paramètres</h4> <dl> <dt><code>url</code></dt> @@ -154,15 +152,13 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.</dd> </dl> -<h5 id="Valeur_de_retour_2">Valeur de retour</h5> +<h4 id="Valeur_de_retour_2">Valeur de retour</h4> -<dl> - <dt><code>void</code></dt> -</dl> +<p>void</p> -<h5 id="Exceptions_2">Exceptions</h5> +<h4 id="Exceptions_2">Exceptions</h4> -<p>Cette méthode peut lever une exception <code><a href="/fr/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec l'un des code suivants :</p> +<p>Cette méthode peut lever une exception <code><a href="/fr/docs/Web/API/FileError">FileError</a></code> avec l'un des code suivants :</p> <table class="standard-table"> <thead> @@ -195,6 +191,6 @@ window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler); <ul> <li>La spécification : {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}</li> - <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_API">La référence pour l'API <em>File System</em></a></li> - <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Une introduction aux concepts de base de l'API <em>File System</em></a></li> + <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">La référence pour l'API <em>File System</em></a></li> + <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">Une introduction aux concepts de base de l'API <em>File System</em></a></li> </ul> diff --git a/files/fr/web/api/location/index.html b/files/fr/web/api/location/index.html index 52372c8da1..dc4e6e6a36 100644 --- a/files/fr/web/api/location/index.html +++ b/files/fr/web/api/location/index.html @@ -77,7 +77,7 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family: <dt>{{domxref("Location.pathname")}}</dt> <dd>Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd> <dt>{{domxref("Location.search")}}</dt> - <dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> <span class="tlid-translation translation" lang="fr"><span title="">pour faciliter l'analyse des paramètres</span></span> de la <span class="tlid-translation translation" lang="fr"><span title="">chaîne de requête (querystring).</span></span></dd> + <dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).</dd> <dt>{{domxref("Location.hash")}}</dt> <dd>Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd> <dt>{{domxref("Location.username")}} {{Obsolete_Inline}}</dt> @@ -105,19 +105,19 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family: <h2 id="Exemples">Exemples</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js">// Crée un élèment ancre et utilise la propriété href </code>dans le but de cet exemple -<code class="language-js">// </code>Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location -<code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -url<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https:</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>host<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// developer.mozilla.org:8080</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// developer.mozilla.org</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>port<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 8080</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// /en-US/search</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>search<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// ?q=URL</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hash<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// #search-results-close-container</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>origin<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// https://developer.mozilla.org:8080</span></code></pre> +<pre class="brush: js">// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple +// Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location +var url = document.createElement('a'); +url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; +console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container +console.log(url.protocol); // https: +console.log(url.host); // developer.mozilla.org:8080 +console.log(url.hostname); // developer.mozilla.org +console.log(url.port); // 8080 +console.log(url.pathname); // /en-US/search +console.log(url.search); // ?q=URL +console.log(url.hash); // #search-results-close-container +console.log(url.origin); // https://developer.mozilla.org:8080</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html index 891a307902..76d94b1efd 100644 --- a/files/fr/web/api/location/reload/index.html +++ b/files/fr/web/api/location/reload/index.html @@ -6,7 +6,7 @@ browser-compat: api.Location.reload --- <div>{{ APIRef("HTML DOM") }}</div> -<p>La méthode <code><strong>location.reload()</strong></code> recharge l'URL courante, à la façon du bouton « Actualiser ».</p> +<p>La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</p> <p>Le rechargement peut être bloqué avec une exception <a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a> <code>SECURITY_ERROR</code>. Cela se produit si <a href="/fr/docs/Glossary/Origin">l'origine</a> du script qui invoque <code>location.reload()</code> est différente de l'origine de la page qui possède l'objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a>. Voir <a href="/fr/docs/Web/Security/Same-origin_policy">les règles sur l'origine</a> pour plus d'informations.</p> diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html index f9792aa3df..b6e04f8156 100644 --- a/files/fr/web/api/media_streams_api/index.html +++ b/files/fr/web/api/media_streams_api/index.html @@ -19,13 +19,12 @@ original_slug: WebRTC/MediaStream_API <p>Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes <strong>pistes</strong> audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs <strong>canal</strong>. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en <em>gauche</em> et <em>droite</em> sur une piste audio en stéréo.</p> -<p><code><font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif">Les objets </font></code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p> +<p><code>Les objets </code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p> <h2 id="Interfaces">Interfaces</h2> <p>Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API <em>Media Capture and Streams API</em>.</p> -<div class="index"> <ul> <li>{{domxref("BlobEvent")}}</li> <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li> @@ -47,13 +46,11 @@ original_slug: WebRTC/MediaStream_API <li>{{domxref("OverconstrainedError")}}</li> <li>{{domxref("URL")}}</li> </ul> -</div> <p>Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées <code>AudioStreamTrack</code> et <code>VideoStreamTrack</code>, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser <code>MediaStreamTrack</code> directement à la place.</p> <h2 id="Évènements">Évènements</h2> -<div class="index"> <ul> <li>{{event("addtrack")}}</li> <li>{{event("ended")}}</li> @@ -63,7 +60,6 @@ original_slug: WebRTC/MediaStream_API <li>{{event("started")}}</li> <li>{{event("unmuted")}}</li> </ul> -</div> <h2 id="Guides_et_tutorials">Guides et tutorials</h2> @@ -80,7 +76,7 @@ original_slug: WebRTC/MediaStream_API <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> - la page d'introduction à l'API</li> + <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> - la page d'introduction à l'API</li> <li>{{domxref("mediaDevices.getUserMedia()")}}</li> <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des clichés avec WebRTC</a> : un tutoriel/une démonstration sur l'utilisation de <code>getUserMedia()</code>.</li> </ul> diff --git a/files/fr/web/api/mediadevices/getusermedia/index.html b/files/fr/web/api/mediadevices/getusermedia/index.html index 716bbfe120..c36f3740bf 100644 --- a/files/fr/web/api/mediadevices/getusermedia/index.html +++ b/files/fr/web/api/mediadevices/getusermedia/index.html @@ -5,15 +5,15 @@ translation_of: Web/API/MediaDevices/getUserMedia --- <div>{{APIRef("WebRTC")}}</div> -<p><span class="notranslate"><span class="seoSummary">La méthode <code><strong>MediaDevices.getUserMedia()</strong></code> invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un </span></span> <span class="seoSummary">{{domxref("MediaStream")}}</span> <span class="notranslate"><span class="seoSummary"> avec des pistes contenant les types de médias demandés.</span></span> <span class="notranslate"> Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.</span></p> +<p>La méthode <code><strong>MediaDevices.getUserMedia()</strong></code> invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un {{domxref("MediaStream")}} avec des pistes contenant les types de médias demandés. Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.</p> -<p><span class="notranslate">Il renvoie un </span> {{jsxref("Promise")}} <span class="notranslate"> qui est résolu avec succès si l'utilisateur donne son autorisation;</span> <span class="notranslate"> </span> {{domxref("MediaStream")}} <span class="notranslate"> est fourni à ce moment-là.</span> <span class="notranslate"> Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le </span> {{jsxref("Promise")}} <span class="notranslate"> est rejetée avec respectivement <code>PermissionDeniedError</code> ou <code>NotFoundError</code>.</span></p> +<p>Il renvoie un {{jsxref("Promise")}} qui est résolu avec succès si l'utilisateur donne son autorisation; {{domxref("MediaStream")}} est fourni à ce moment-là. Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le {{jsxref("Promise")}} est rejetée avec respectivement <code>PermissionDeniedError</code> ou <code>NotFoundError</code>.</p> <div class="note"> -<p><span class="notranslate">Il est possible que le </span> {{jsxref("Promise")}} <span class="notranslate"> renvoyé ne soit <em>ni</em> résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix.</span> .</p> +<p><strong>Note :</strong> Il est possible que le {{jsxref("Promise")}} renvoyé ne soit <em>ni</em> résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix. .</p> </div> -<p><span class="notranslate">Généralement, vous accédez à l'objet </span> {{domxref("MediaDevices")}} <span class="notranslate"> avec </span> {{domxref("navigator.mediaDevices")}} <span class="notranslate"> , comme ceci:</span></p> +<p>Généralement, vous accédez à l'objet {{domxref("MediaDevices")}} avec {{domxref("navigator.mediaDevices")}} , comme ceci:</p> <pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints).then(function(stream) { /* use the stream */ @@ -26,31 +26,31 @@ translation_of: Web/API/MediaDevices/getUserMedia <pre class="syntaxbox">var <em>promise</em> = navigator.mediaDevices.getUserMedia(<em>constraints</em>); </pre> -<h3 id="Paramètres"><span class="notranslate">Paramètres</span></h3> +<h3 id="Paramètres">Paramètres</h3> <dl> <dt><code>constraints</code></dt> <dd> - <p><span class="notranslate">Un objet </span> {{domxref("MediaStreamConstraints")}} <span class="notranslate"> spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.</span></p> + <p>Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.</p> - <p><span class="notranslate">Le paramètre constraints est un objet <code>MediaStreamConstraints</code> avec deux membres: <code>video</code> et <code>audio</code> , décrivant les types de média demandés.</span> <span class="notranslate"> L'un ou l'autre ou les deux doivent être spécifiés.</span> <span class="notranslate"> Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec <code>NotFoundError</code> .</span></p> + <p>Le paramètre constraints est un objet <code>MediaStreamConstraints</code> avec deux membres: <code>video</code> et <code>audio</code> , décrivant les types de média demandés. L'un ou l'autre ou les deux doivent être spécifiés. Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec <code>NotFoundError</code> .</p> - <p><span class="notranslate">Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:</span></p> + <p>Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:</p> <pre class="brush: js">{ audio: true, video: true }</pre> - <p><span class="notranslate">Si <code>true</code> est spécifié pour un type de média, le flux résultant est <em>requis</em> pour obtenir ce type de piste.</span> <span class="notranslate"> Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à <code>getUserMedia()</code> entraînera une erreur.</span></p> + <p>Si <code>true</code> est spécifié pour un type de média, le flux résultant est <em>requis</em> pour obtenir ce type de piste. Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à <code>getUserMedia()</code> entraînera une erreur.</p> - <p><span class="notranslate">Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires.</span> <span class="notranslate"> Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:</span></p> + <p>Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires. Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:</p> <pre class="brush: js">{ audio: true, video: { width: 1280, height: 720 } }</pre> - <p id="successCallback"><span class="notranslate">Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.</span></p> + <p>Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.</p> - <p><span class="notranslate">Pour <em>exiger</em> une capacité, utilisez les mots-clés <code>min</code> , <code>max</code> ou <code>exact</code> (aka <code>min == max</code> ).</span> <span class="notranslate"> Ce qui suit exige une résolution minimale de 1280x720:</span></p> + <p>Pour <em>exiger</em> une capacité, utilisez les mots-clés <code>min</code> , <code>max</code> ou <code>exact</code> (aka <code>min == max</code> ). Ce qui suit exige une résolution minimale de 1280x720:</p> <pre class="brush: js">{ audio: true, @@ -60,9 +60,9 @@ translation_of: Web/API/MediaDevices/getUserMedia } }</pre> - <p><span class="notranslate">Si aucune caméra n'existe avec cette résolution ou plus haut, le </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sera rejeté avec <code>OverconstrainedError</code>.</span></p> + <p>Si aucune caméra n'existe avec cette résolution ou plus haut, le {{jsxref("Promise")}} retourné sera rejeté avec <code>OverconstrainedError</code>.</p> - <p><span class="notranslate">La raison de la différence de comportement est que les mots clés <code>min</code> , <code>max</code> et <code>exact</code> sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé <code>ideal</code> ne le sont pas.</span> <span class="notranslate"> Voici un exemple plus complet:</span></p> + <p>La raison de la différence de comportement est que les mots clés <code>min</code> , <code>max</code> et <code>exact</code> sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé <code>ideal</code> ne le sont pas. Voici un exemple plus complet:</p> <pre class="brush: js">{ audio: true, @@ -72,9 +72,9 @@ translation_of: Web/API/MediaDevices/getUserMedia } }</pre> - <p><span class="notranslate">Une valeur <code>ideal</code> , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.</span></p> + <p>Une valeur <code>ideal</code> , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.</p> - <p><span class="notranslate">Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:</span></p> + <p>Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:</p> <pre class="brush: js">{ audio: true, @@ -84,50 +84,50 @@ translation_of: Web/API/MediaDevices/getUserMedia } }</pre> - <p><span class="notranslate">Toutes les contraintes ne sont pas des nombres.</span> <span class="notranslate"> Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:</span></p> + <p>Toutes les contraintes ne sont pas des nombres. Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:</p> <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre> - <p><span class="notranslate">Pour <em>exiger</em> la caméra arrière, utilisez:</span></p> + <p>Pour <em>exiger</em> la caméra arrière, utilisez:</p> <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre> </dd> </dl> -<h3 id="Valeur_de_retour"><span class="notranslate">Valeur de retour</span></h3> +<h3 id="Valeur_de_retour">Valeur de retour</h3> -<p><span class="notranslate">Un </span> {{jsxref("Promise")}} <span class="notranslate"> qui reçoit en objet </span> {{domxref("MediaStream")}} <span class="notranslate"> lorsque les médias demandés ont été obtenus avec succès.</span></p> +<p>Un {{jsxref("Promise")}} qui reçoit en objet {{domxref("MediaStream")}} lorsque les médias demandés ont été obtenus avec succès.</p> <h3 id="Erreurs">Erreurs</h3> -<p><span class="notranslate">Les rejets du </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sont effectués en passant un objet erreur <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA" title="L'interface DOMException représente un événement anormal (appelé exception) qui se produit en raison de l'appel d'une méthode ou de l'accès à une propriété d'une API Web."><code>DOMException</code></a> au gestionnaire d'erreurs.</span> <span class="notranslate"> Les erreurs possibles sont:</span></p> +<p>Les rejets du {{jsxref("Promise")}} retourné sont effectués en passant un objet erreur <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA"><code>DOMException</code></a> au gestionnaire d'erreurs. Les erreurs possibles sont:</p> <dl> <dt><code>AbortError</code></dt> - <dd><span class="notranslate">Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un <code>NotReadableError</code> , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.</span></dd> + <dd>Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un <code>NotReadableError</code> , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.</dd> <dt><code>NotAllowedError</code></dt> - <dd><span class="notranslate">L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique;</span> <span class="notranslate"> Ou l'utilisateur a refusé l'accès pour la session en cours;</span> <span class="notranslate"> Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier.</span> - <div class="note"><span class="notranslate">Les versions plus anciennes de la spécification ont utilisé <code>SecurityError</code> pour cela à la place;</span> <span class="notranslate"> <code>SecurityError</code> a pris une nouvelle signification.</span></div> + <dd>L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique; Ou l'utilisateur a refusé l'accès pour la session en cours; Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier. + <div class="note"><p><strong>Note :</strong> Les versions plus anciennes de la spécification ont utilisé <code>SecurityError</code> pour cela à la place; <code>SecurityError</code> a pris une nouvelle signification.</p></div> </dd> <dt><code>NotFoundError</code></dt> - <dd><span class="notranslate">Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.</span></dd> + <dd>Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.</dd> <dt><code>NotReadableError</code></dt> - <dd><span class="notranslate">Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.</span></dd> + <dd>Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.</dd> <dt><code>OverConstrainedError</code></dt> - <dd><span class="notranslate">Aucun dispositif candidat répondant aux critères demandés.</span> <span class="notranslate"> L'erreur est un objet de type <code>OverconstrainedError</code> et possède une propriété de <code>constraint</code> dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété <code>message</code> contenant une chaîne lisible par l'homme expliquant le problème.</span> - <div class="note"><span class="notranslate">Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.</span></div> + <dd>Aucun dispositif candidat répondant aux critères demandés. L'erreur est un objet de type <code>OverconstrainedError</code> et possède une propriété de <code>constraint</code> dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété <code>message</code> contenant une chaîne lisible par l'homme expliquant le problème. + <div class="note"><p><strong>Note :</strong> Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.</p></div> </dd> <dt><code>SecurityError</code></dt> - <dd><span class="notranslate">Le support multimédia utilisateur est désactivé sur le </span> {{domxref("Document")}} <span class="notranslate"> sur lequel <code>getUserMedia()</code> été appelé.</span> <span class="notranslate"> Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.</span></dd> + <dd>Le support multimédia utilisateur est désactivé sur le {{domxref("Document")}} sur lequel <code>getUserMedia()</code> été appelé. Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.</dd> <dt><code>TypeError</code></dt> - <dd><span class="notranslate">La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme <code>false</code> .</span></dd> + <dd>La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme <code>false</code> .</dd> </dl> -<h2 id="Exemples"><span class="notranslate"><strong>Exemple</strong>s</span></h2> +<h2 id="Exemples"><strong>Exemple</strong>s</h2> -<h3 id="Largeur_et_hauteur"><span class="notranslate">Largeur et hauteur</span></h3> +<h3 id="Largeur_et_hauteur">Largeur et hauteur</h3> -<p><span class="notranslate">Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g" title="L'interface MediaStream représente un flux de contenu multimédia. Un flux se compose de plusieurs pistes telles que des pistes vidéo ou audio. Chaque piste est spécifiée comme une instance de MediaStreamTrack."><code>MediaStream</code></a> résultant à un élément vidéo.</span></p> +<p>Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g"><code>MediaStream</code></a> résultant à un élément vidéo.</p> <pre>// Prefer camera resolution nearest to 1280x720. var constraints = { audio: true, video: { width: 1280, height: 720 } }; @@ -143,9 +143,9 @@ navigator.mediaDevices.getUserMedia(constraints) .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end. </pre> -<h3 id="Utilisation_de_la_nouvelle_API_dans_les_navigateurs_plus_anciens"><span class="notranslate">Utilisation de la nouvelle API dans les navigateurs plus anciens</span></h3> +<h3 id="Utilisation_de_la_nouvelle_API_dans_les_navigateurs_plus_anciens">Utilisation de la nouvelle API dans les navigateurs plus anciens</h3> -<p><span class="notranslate">Voici un exemple d'utilisation de <code>navigator.mediaDevices.getUserMedia()</code> , avec un adaptateur pour faire face aux navigateurs plus anciens.</span> <span class="notranslate"> Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs.</span> <span class="notranslate"> Il est recommandé d'utiliser l'adaptateur</span> <a href="https://github.com/webrtc/adapter">adapter.js</a> <span class="notranslate"> a la place, qui gère les contraintes.</span></p> +<p>Voici un exemple d'utilisation de <code>navigator.mediaDevices.getUserMedia()</code> , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur <a href="https://github.com/webrtc/adapter">adapter.js</a> a la place, qui gère les contraintes.</p> <pre class="brush: js">// Older browsers might not implement mediaDevices at all, so we set an empty object first if (navigator.mediaDevices === undefined) { @@ -195,14 +195,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true }) <h3 id="Taux_d'images">Taux d'images</h3> -<p><span class="notranslate">Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.</span></p> +<p>Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.</p> <pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } }; </pre> -<h3 id="Caméra_avant_et_arrière"><span class="notranslate">Caméra avant et arrière</span></h3> +<h3 id="Caméra_avant_et_arrière">Caméra avant et arrière</h3> -<p><span class="notranslate">Sur les téléphones portables.</span></p> +<p>Sur les téléphones portables.</p> <pre class="brush: js">var front = false; document.getElementById('flip-button').onclick = function() { front = !front; }; @@ -212,7 +212,7 @@ var constraints = { video: { facingMode: (front? "user" : "environment") } }; <h2 id="Permissions">Permissions</h2> -<p><span class="notranslate">Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple, une <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q">application Firefox OS</a> ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:</span></p> +<p>Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple, une <a href="https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q">application Firefox OS</a> ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:</p> <pre class="brush: js">"permissions": { "audio-capture": { @@ -223,7 +223,7 @@ var constraints = { video: { facingMode: (front? "user" : "environment") } }; } }</pre> -<p><span class="notranslate">Voir </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> <span class="notranslate"> et </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> <span class="notranslate"> pour plus d'informations.</span></p> +<p>Voir <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> et <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> pour plus d'informations.</p> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/api/mediadevices/index.html b/files/fr/web/api/mediadevices/index.html index d0ce9de339..e1743db309 100644 --- a/files/fr/web/api/mediadevices/index.html +++ b/files/fr/web/api/mediadevices/index.html @@ -16,13 +16,13 @@ translation_of: Web/API/MediaDevices --- <div>{{APIRef("Media Capture and Streams")}}</div> -<p><span class="seoSummary">L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</span></p> +<p>L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</p> <h2 id="Propriétés">Propriétés</h2> <p><em>Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p> -<h2 id="Handlers" name="Handlers">Événéments</h2> +<h2 id="Handlers">Événéments</h2> <dl> <dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt> @@ -47,7 +47,7 @@ translation_of: Web/API/MediaDevices <h2 id="Exemple">Exemple</h2> -<pre class="brush:js notranslate">'use strict'; +<pre class="brush:js">'use strict'; // Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur. var video = document.querySelector('video'); diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html index eb6804fac0..b472be76ed 100644 --- a/files/fr/web/api/mediasource/index.html +++ b/files/fr/web/api/mediasource/index.html @@ -81,7 +81,7 @@ translation_of: Web/API/MediaSource <p>L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">consulté en direct ici</a> (vous pouvez aussi <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger la source</a> pour une enquête plus approfondie).</p> -<pre class="brush: js notranslate">var video = document.querySelector('video'); +<pre class="brush: js">var video = document.querySelector('video'); var assetURL = 'frag_bunny.mp4'; // Need to be specific for Blink regarding codecs diff --git a/files/fr/web/api/mediastream/index.html b/files/fr/web/api/mediastream/index.html index d9e233a9b3..292cb700e0 100644 --- a/files/fr/web/api/mediastream/index.html +++ b/files/fr/web/api/mediastream/index.html @@ -13,18 +13,18 @@ translation_of: Web/API/MediaStream <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt> <dd>{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.</dd> <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}}</dt> - <dd>Booléen dont la valeur est <code>true</code> si l'évènement <span style="line-height: inherit;">{{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou <code>false</code></span> si la fin du flux n'à pas été atteinte.</dd> + <dd>Booléen dont la valeur est <code>true</code> si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou <code>false</code> si la fin du flux n'à pas été atteinte.</dd> </dl> <h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3> <dl> <dt>{{domxref("MediaStream.onaddtrack")}}</dt> - <dd>Est un <span style="line-height: inherit;">{{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.</span></dd> + <dd>Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.</dd> <dt>{{domxref("MediaStream.onended")}}</dt> - <dd><span style="line-height: inherit;">Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.</span></dd> + <dd>Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.</dd> <dt>{{domxref("MediaStream.onremovetrack")}}</dt> - <dd><span style="line-height: inherit;">Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré.</span></dd> + <dd>Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré.</dd> </dl> <h2 id="Méthodes">Méthodes</h2> @@ -36,13 +36,13 @@ translation_of: Web/API/MediaStream <dl> <dt>{{domxref("MediaStream.addTrack()")}}</dt> - <dd>Stocke une copie de<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet <code>MediaStream</code></span>, rien ne se passe; si la piste est au statut <code>finished</code>, c'est à dire qu'elle est terminée, l'<span style="line-height: inherit;">exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd> + <dd>Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet <code>MediaStream</code>, rien ne se passe; si la piste est au statut <code>finished</code>, c'est à dire qu'elle est terminée, l'exception <code>INVALID_STATE_RAISE</code> est levée.</dd> <dt>{{domxref("MediaStream.removeTrack()")}}</dt> - <dd>Retire le <span style="line-height: inherit;">the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du <code>MediaStream</code></span>, rien ne se passe<span style="line-height: inherit;">; Si la piste est au statut <code>finished</code></span>, ce qui arrive lorsqu'elle est terminée, <span style="line-height: inherit;">l'exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd> + <dd>Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du <code>MediaStream</code>, rien ne se passe; Si la piste est au statut <code>finished</code>, ce qui arrive lorsqu'elle est terminée, l'exception <code>INVALID_STATE_RAISE</code> est levée.</dd> <dt>{{domxref("MediaStream.getAudioTracks()")}}</dt> - <dd>Retourne la liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"audio"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd> + <dd>Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet <code>MediaStream</code> qui ont leur attribut <code>kind</code> défini à <code>"audio"</code>. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</dd> <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt> - <dd>Retourne une liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"video"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd> + <dd>Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet <code>MediaStream</code> qui ont leur attribut <code>kind</code> défini à <code>"video"</code>. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.html b/files/fr/web/api/mediastreamaudiosourcenode/index.html index 4928de8634..d75b8b8f43 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.html +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/MediaStreamAudioSourceNode <p>{{APIRef("Web Audio API")}}</p> <div> -<p>L'interface <code>MediaStreamAudioSourceNode</code> représente une source audio <a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.</p> +<p>L'interface <code>MediaStreamAudioSourceNode</code> représente une source audio <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.</p> </div> <p>Un <code>MediaElementSourceNode</code> n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.</p> diff --git a/files/fr/web/api/mediastreamevent/index.html b/files/fr/web/api/mediastreamevent/index.html index 50fcc72397..1f9eeb32ec 100644 --- a/files/fr/web/api/mediastreamevent/index.html +++ b/files/fr/web/api/mediastreamevent/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/MediaStreamEvent <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">pc.onaddstream = function( ev ) { +<pre class="brush: js">pc.onaddstream = function( ev ) { alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion."); }; </pre> @@ -49,6 +49,6 @@ translation_of: Web/API/MediaStreamEvent <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> + <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a></li> <li>Sa cible habituelle: {{domxref("RTCPeerConnection")}}.</li> </ul> diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html index 69c60a8a7d..521eedf8fd 100644 --- a/files/fr/web/api/mouseevent/index.html +++ b/files/fr/web/api/mouseevent/index.html @@ -11,7 +11,7 @@ tags: - évènements translation_of: Web/API/MouseEvent --- -<p id="Sommaire">{{APIRef("DOM Events")}}</p> +<p>{{APIRef("DOM Events")}}</p> <p>L'interface <strong><code>MouseEvent</code></strong> représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.</p> @@ -85,7 +85,7 @@ translation_of: Web/API/MouseEvent <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd> </dl> -<h2 id="Constantes"><span class="hidden"> </span><span class="hidden"> </span>Constantes</h2> +<h2 id="Constantes">Constantes</h2> <dl> <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt> @@ -109,26 +109,26 @@ translation_of: Web/API/MouseEvent <p>Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">simulateClick</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> evt <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MouseEvent</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> - bubbles<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span> - cancelable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span> - view<span class="punctuation token">:</span> window - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> cb <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//élément pour cliquer</span> - <span class="keyword token">var</span> canceled <span class="operator token">=</span> <span class="operator token">!</span>cb<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>canceled<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// Un gestionnaire appelé preventDefault</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="comment token">// Aucun des gestionnaires n'est appelé preventDefault</span> - <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"not canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> -document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"button"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> simulateClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> Checked<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Click me<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: js">function simulateClick() { + var evt = new MouseEvent("click", { + bubbles: true, + cancelable: true, + view: window + }); + var cb = document.getElementById("checkbox"); //élément pour cliquer + var canceled = !cb.dispatchEvent(evt); + if(canceled) { + // Un gestionnaire appelé preventDefault + alert("canceled"); + } else { + // Aucun des gestionnaires n'est appelé preventDefault + alert("not canceled"); + } +} +document.getElementById("button").addEventListener('click', simulateClick);</pre> + +<pre class="brush: html"><p><label><input type="checkbox" id="checkbox"> Checked</label> +<p><button id="button">Click me</button></pre> <p>Cliquez sur le bouton pour voir comment l'exemple fonctionne :</p> diff --git a/files/fr/web/api/mutationobserver/index.html b/files/fr/web/api/mutationobserver/index.html index a5b0592dcd..2be16d34b7 100644 --- a/files/fr/web/api/mutationobserver/index.html +++ b/files/fr/web/api/mutationobserver/index.html @@ -7,22 +7,22 @@ translation_of: Web/API/MutationObserver <p><code>MutationObserver</code> fournit un moyen d’intercepter les changements dans le <a href="/en-US/docs/DOM">DOM</a>. Il a été conçu pour remplacer les <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> définis dans la spécification DOM3 Events.</p> -<h2 id="Constructor" name="Constructor">Constructeur</h2> +<h2 id="Constructor">Constructeur</h2> -<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3> +<h3 id="MutationObserver()"><code>MutationObserver()</code></h3> <p>Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.</p> <pre class="syntaxbox">new MutationObserver( function callback );</pre> -<h6 id="Parameters" name="Parameters">Paramètres</h6> +<h4 id="Parameters">Paramètres</h4> <dl> <dt><code>callback</code></dt> <dd>Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de <code>MutationObserver</code>.</dd> </dl> -<h2 id="Instance_methods" name="Instance_methods">Méthodes d’instance</h2> +<h2 id="Instance_methods">Méthodes d’instance</h2> <table class="standard-table"> <tbody> @@ -39,17 +39,17 @@ translation_of: Web/API/MutationObserver </table> <div class="note"> -<p><strong>Note</strong>: La cible {{domxref("Node")}} ne doit pas être confondue avec celle de <a href="https://nodejs.org/en/">NodeJS</a>.</p> +<p><strong>Note :</strong> La cible {{domxref("Node")}} ne doit pas être confondue avec celle de <a href="https://nodejs.org/en/">NodeJS</a>.</p> </div> -<h3 id="observe()" name="observe()"><code>observe()</code></h3> +<h3 id="observe()"><code>observe()</code></h3> <p>Inscrit l’instance du <code>MutationObserver</code> afin d’être notifié des mutations DOM du nœud sélectionné.</p> <pre class="syntaxbox">void observe( {{domxref("Node")}} target, <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options ); </pre> -<h6 id="Parameters" name="Parameters">Paramètres</h6> +<h4 id="Parameters">Paramètres</h4> <dl> <dt><code>target</code></dt> @@ -58,9 +58,11 @@ translation_of: Web/API/MutationObserver <dd>Un objet du type <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>. Il spécifie quelles mutations DOM sont à rapporter.</dd> </dl> -<div class="note"><strong>Note :</strong> ajouter un observateur sur un élément revient à utiliser <code>addEventListener</code>. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler <code>disconnect()</code> deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.</div> +<div class="note"> + <p><strong>Note :</strong> ajouter un observateur sur un élément revient à utiliser <code>addEventListener</code>. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler <code>disconnect()</code> deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.</p> +</div> -<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3> +<h3 id="disconnect()"><code>disconnect()</code></h3> <p>L’instance <code>MutationObserver</code> cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode <a href="#observe()"><code>observe()</code></a> soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.</p> @@ -68,10 +70,10 @@ translation_of: Web/API/MutationObserver </pre> <div class="note"> -<p><strong>Note : </strong>Selon la <a href="https://dom.spec.whatwg.org/#garbage-collection">spécification</a>, un <code>MutationObserver</code> est supprimé par le garbage collector si l'élément cible est supprimé.</p> +<p><strong>Note :</strong> Selon la <a href="https://dom.spec.whatwg.org/#garbage-collection">spécification</a>, un <code>MutationObserver</code> est supprimé par le garbage collector si l'élément cible est supprimé.</p> </div> -<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3> +<h3 id="takeRecords()"><code>takeRecords()</code></h3> <p>Vide la file des mutations enregistrées du <code>MutationObserver</code> et retourne son contenu.</p> @@ -83,11 +85,13 @@ translation_of: Web/API/MutationObserver <dd>Retourne un tableau de {{domxref("MutationRecord")}}.</dd> </dl> -<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2> +<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2> <p><code>MutationObserverInit</code> est un objet pouvant avoir les propriétés suivantes :</p> -<div class="note"><strong>Note :</strong> Au moins une propriété parmi <code>childList</code>, <code>attributes</code> ou <code>characterData</code> doit être initialisée à <code>true</code>, sinon l’erreur <em lang="en">"An invalid or illegal string was specified</em>" sera émise.</div> +<div class="note"> + <p><strong>Note :</strong> Au moins une propriété parmi <code>childList</code>, <code>attributes</code> ou <code>characterData</code> doit être initialisée à <code>true</code>, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise.</p> +</div> <table class="standard-table"> <tbody> @@ -128,7 +132,7 @@ translation_of: Web/API/MutationObserver <h2 id="Exemple_d’utilisation">Exemple d’utilisation</h2> -<p>L’exemple suivant est extrait de ce <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">blog</a>.</p> +<p>L’exemple suivant est extrait de ce <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">blog</a>.</p> <pre class="brush: js">// Selectionne le noeud dont les mutations seront observées var targetNode = document.getElementById('some-id'); @@ -157,17 +161,17 @@ observer.observe(targetNode, config); // L'observation peut être arrêtée par la suite observer.disconnect();</pre> -<h2 id="Additional_reading" name="Additional_reading">Autres articles pour en savoir plus (en anglais)</h2> +<h2 id="Additional_reading">Autres articles pour en savoir plus (en anglais)</h2> <ul> - <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li> - <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li> - <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li> + <li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li> + <li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li> + <li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li> + <li><a href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li> <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li> </ul> -<h2 id="Spécifications" name="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/navigator/battery/index.html b/files/fr/web/api/navigator/battery/index.html index c4edee5e73..3eb09b9ab3 100644 --- a/files/fr/web/api/navigator/battery/index.html +++ b/files/fr/web/api/navigator/battery/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/Navigator/battery <h2 id="Exemple">Exemple</h2> -<p>Voir aussi <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">l'exemple dans la specification</a>.</p> +<p>Voir aussi <a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">l'exemple dans la specification</a>.</p> <pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery; @@ -62,8 +62,8 @@ updateBatteryStatus(); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li> - <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh on the Javascript Battery Api</a></li> + <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li> + <li><a href="http://davidwalsh.name/battery-api">David Walsh on the Javascript Battery Api</a></li> </ul> <p>{{ languages( {"zh-cn": "zh-cn/DOM/window.navigator.battery" } ) }}</p> diff --git a/files/fr/web/api/navigator/cookieenabled/index.html b/files/fr/web/api/navigator/cookieenabled/index.html index eff4726ea4..91d3ae78e0 100644 --- a/files/fr/web/api/navigator/cookieenabled/index.html +++ b/files/fr/web/api/navigator/cookieenabled/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/cookieEnabled --- <p>{{ ApiRef("HTML DOM") }}</p> -<p><span class="seoSummary"><code>navigator.cookieEnabled</code></span> retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.</p> +<p><code>navigator.cookieEnabled</code> retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.</p> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/api/navigator/donottrack/index.html b/files/fr/web/api/navigator/donottrack/index.html index 1f08b96ae3..9acf7c3241 100644 --- a/files/fr/web/api/navigator/donottrack/index.html +++ b/files/fr/web/api/navigator/donottrack/index.html @@ -10,22 +10,22 @@ translation_of: Web/API/Navigator/doNotTrack --- <p>{{ApiRef("HTML DOM")}}{{SeeCompatTable}}</p> -<p>Renvoi le <span class="short_text" id="result_box" lang="fr"><span class="hps">paramètre</span></span> utilisateur de <strong>do-not-track</strong>. Cette valeur est "1" si l´utilisateur a demandé de ne pas <span id="result_box" lang="fr"><span class="hps">être suivi</span> <span class="hps">par les sites web</span><span>, le contenu ou</span> <span class="hps">la publicité</span><span>.</span></span></p> +<p>Renvoi le paramètre utilisateur de <strong>do-not-track</strong>. Cette valeur est "1" si l´utilisateur a demandé de ne pas être suivi par les sites web, le contenu ou la publicité.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack; </pre> -<p><span class="short_text" id="result_box" lang="fr"><span>La valeur reflète celle de l'en-tête "do-not-track" <em>(ne pas suivre)</em>,</span></span> c'est-à-dire {"1", "0", "unspecified" }. Note : <span class="short_text" id="result_box" lang="fr"><span>Avant Gecko 32, Gecko a utilisé les valeurs</span></span> { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p> +<p>La valeur reflète celle de l'en-tête "do-not-track" <em>(ne pas suivre)</em>, c'est-à-dire {"1", "0", "unspecified" }. Note : Avant Gecko 32, Gecko a utilisé les valeurs { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">dump(window.navigator.doNotTrack); -// <span id="result_box" lang="fr"><span>écrit "1" si DNT est activé;</span> <span>"0" si l'utilisateur a opté pour le suivi;</span> <span>sinon c'est "</span></span><span lang="fr"><span>unspecified" <em>(non spécifié)</em></span></span> +// écrit "1" si DNT est activé; "0" si l'utilisateur a opté pour le suivi; sinon c'est "unspecified" <em>(non spécifié)</em> </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/navigator/getgamepads/index.html b/files/fr/web/api/navigator/getgamepads/index.html index d936f8262f..0f7480f238 100644 --- a/files/fr/web/api/navigator/getgamepads/index.html +++ b/files/fr/web/api/navigator/getgamepads/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Navigator/getGamepads </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html index 7a1bbbac53..2c2d6edcac 100644 --- a/files/fr/web/api/navigator/getusermedia/index.html +++ b/files/fr/web/api/navigator/getusermedia/index.html @@ -14,10 +14,10 @@ original_slug: NavigatorUserMedia.getUserMedia <p>La fonction obsolète <strong>Navigator.getUserMedia()</strong> demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.</p> -<p>Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur <span>quelconque</span> se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.</p> +<p>Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.</p> <div class="note"> -<p>Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.</p> +<p><strong>Note :</strong> Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -93,7 +93,7 @@ if (navigator.getUserMedia) { } </pre> -<p id="errorCallback">See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</p> +<p>See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</p> <h2 id="Spécifications">Spécifications</h2> @@ -116,8 +116,8 @@ if (navigator.getUserMedia) { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div class="notecard warning"> - <p>Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.</p> +<div class="warning"> + <p><strong>Attention :</strong> Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.</p> </div> <p>{{Compat("api.Navigator.getUserMedia")}}</p> @@ -126,7 +126,7 @@ if (navigator.getUserMedia) { <ul> <li>{{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC</a> - page d'introduction aux APIS</li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - L'API des Media Streams Objects</li> - <li><a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutoriel à propos de l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que des vidéos.</li> + <li><a href="/en-US/docs/WebRTC">WebRTC</a> - page d'introduction aux APIS</li> + <li><a href="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - L'API des Media Streams Objects</li> + <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutoriel à propos de l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que des vidéos.</li> </ul> diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.html b/files/fr/web/api/navigator/mozislocallyavailable/index.html index cb28647309..839ac2aeb0 100644 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.html +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.html @@ -6,16 +6,16 @@ tags: translation_of: Web/API/Navigator/mozIsLocallyAvailable --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Permet de déterminer si une ressource donnée est disponible.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">window.navigator.isLocallyAvailable(<i>uri</i>,<i>ifOffline</i>); </pre> <ul> <li><code>uri</code> est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.</li> <li><code>ifOffline</code> permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez <code>true</code> pour prendre en compte le cache de ressources hors ligne.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval">var disponible = navigator.isLocallyAvailable("my-image-file.png", true); if (disponible) { /* la ressource hors ligne est présente */ @@ -23,12 +23,7 @@ if (disponible) { alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau."); } </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> -<p>Aucune ; cependant certaines informations sont disponibles : <a class="external" href="http://www.campd.org/stuff/Offline%20Cache.html">Marking Resources for Offline Use</a></p> -<p> </p> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.navigator.mozIsLocallyAvailable", "ja": "ja/DOM/window.navigator.mozIsLocallyAvailable" } ) }}</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> +<p>Aucune ; cependant certaines informations sont disponibles : <a href="http://www.campd.org/stuff/Offline%20Cache.html">Marking Resources for Offline Use</a></p> diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.html b/files/fr/web/api/navigator/registerprotocolhandler/index.html index 14aafcd546..9c9f9bdff7 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/index.html +++ b/files/fr/web/api/navigator/registerprotocolhandler/index.html @@ -7,13 +7,13 @@ translation_of: Web/API/Navigator/registerProtocolHandler --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.</p> <p>{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">window.navigator.registerProtocolHandler(<em>protocole</em>,<em>uri</em>,<em>titre</em>); </pre> @@ -24,27 +24,23 @@ translation_of: Web/API/Navigator/registerProtocolHandler <li><code>titre</code> est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> -<p>Si votre application web est située à <span class="nowiki">http://www.example.com</span>, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :</p> +<p>Si votre application web est située à http://www.example.com, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :</p> <pre class="eval">navigator.registerProtocolHandler("mailto", - "<a class="link-https" href="https://www.example.com/?to=%s" rel="freelink">https://www.example.com/?to=%s</a>", + "<a href="https://www.example.com/?to=%s">https://www.example.com/?to=%s</a>", "Example Mail"); </pre> <p>Ceci crée un gestionnaire permettant aux liens <code>mailto</code> de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>Spécifié dans le <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">brouillon de travail Web Applications 1.0</a> du WHATWG.</p> +<p>Spécifié dans le <a href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">brouillon de travail Web Applications 1.0</a> du WHATWG.</p> -<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3> +<h3 id="Voir_.C3.A9galement">Voir également</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Gestionnaires de protocoles web</a></li> + <li><a href="/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Gestionnaires de protocoles web</a></li> </ul> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}</p> diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html index 45c1406fb7..70b96ec01a 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html +++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han --- -<h3 id="Introduction" name="Introduction">Introduction</h3> +<h3 id="Introduction">Introduction</h3> <p>Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-<code>http</code>. Prenons par exemple le protocole <code>mailto:</code> :</p> @@ -16,9 +16,9 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han <p>Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien <code>mailto</code>.</p> -<h3 id="Enregistrement" name="Enregistrement">Enregistrement</h3> +<h3 id="Enregistrement">Enregistrement</h3> -<p>La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise <code><a href="/fr/DOM/window.navigator.registerProtocolHandler" title="fr/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :</p> +<p>La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise <code><a href="/fr/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :</p> <pre>navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", @@ -35,11 +35,11 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han <p>Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :</p> -<p><img alt="Image:wph-notification.png" class="internal" src="/@api/deki/files/1491/=Wph-notification.png"></p> +<p><img alt="" src="protocolregister.png"></p> <p>{{ Note() }}</p> -<h4 id="Exemple" name="Exemple">Exemple</h4> +<h4 id="Exemple">Exemple</h4> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="fr"> @@ -56,13 +56,11 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han </html> </pre> -<h3 id="Activation" name="Activation">Activation</h3> +<h3 id="Activation">Activation</h3> <p>À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.</p> -<p><img alt="Image:wph-launch.png"></p> - -<h4 id="Exemple_2" name="Exemple_2">Exemple</h4> +<h4 id="Exemple_2">Exemple</h4> <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="fr"> @@ -75,7 +73,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han </html> </pre> -<h3 id="Traitement" name="Traitement">Traitement</h3> +<h3 id="Traitement">Traitement</h3> <p>La phase suivante est le traitement de l'action. Le navigateur extrait le <code>href</code> du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :</p> @@ -86,7 +84,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han <p>{{ Note("Le code côté serveur reçoit le contenu <strong>entier</strong> de l\'attribut <code>href</code>. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}</p> -<h4 id="Exemple_3" name="Exemple_3">Exemple</h4> +<h4 id="Exemple_3">Exemple</h4> <pre><?php $value = ""; diff --git a/files/fr/web/api/navigator/share/index.html b/files/fr/web/api/navigator/share/index.html index 21e57da9cb..041163cac3 100644 --- a/files/fr/web/api/navigator/share/index.html +++ b/files/fr/web/api/navigator/share/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Navigator/share <p>La méthode <strong><code>Navigator.share()</code></strong> invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera <code>undefined</code>.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> +<h2 id="Syntax">Syntax</h2> <pre class="syntaxbox">var sharePromise = window.navigator.share(<var>data</var>); </pre> diff --git a/files/fr/web/api/navigator/vibrate/index.html b/files/fr/web/api/navigator/vibrate/index.html index 8902090780..335b8adcf9 100644 --- a/files/fr/web/api/navigator/vibrate/index.html +++ b/files/fr/web/api/navigator/vibrate/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Navigator/vibrate <p>Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera <code>false</code>, sinon elle retournera <code>true</code>. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(motif); </pre> @@ -57,5 +57,5 @@ window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,3 <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/Vibration_API" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li> + <li><a href="/fr/docs/Web/API/Vibration_API">Vibration API</a></li> </ul> diff --git a/files/fr/web/api/node/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html index 5f01da03c8..800be4c3bb 100644 --- a/files/fr/web/api/node/appendchild/index.html +++ b/files/fr/web/api/node/appendchild/index.html @@ -32,21 +32,21 @@ translation_of: Web/API/Node/appendChild <h3 id="Valeur_renvoyée">Valeur renvoyée</h3> -<p>La valeur renvoyée <span id="result_box" lang="fr"><span>est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</span></span></p> +<p>La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</p> <h2 id="Notes">Notes</h2> <p>Le chaînage peut ne pas fonctionner comme prévu en raison de <code>appendChild()</code> renvoyant l'élément enfant :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> aBlock <span class="operator token">=</span> doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'block'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'b'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre> <p>Définit <code>aBlock</code> pour <code><b></b></code> uniquement, ce que vous ne voulez probablement pas.</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document</span> -<span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document +var p = document.createElement("p"); +document.body.appendChild(p);</pre> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html index cc52dd42cf..68cf5be1bc 100644 --- a/files/fr/web/api/node/baseuri/index.html +++ b/files/fr/web/api/node/baseuri/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/Node/baseURI <p>La propriété en lecture seule <code><strong>Node.baseURI</strong></code> renvoie l'URL de base absolue d'un noeud.</p> -<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code> en HTML ou XML <code><a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p> +<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code> en HTML ou XML <code><a href="/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p> -<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p> +<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI; </pre> @@ -33,7 +33,7 @@ translation_of: Web/API/Node/baseURI <li><code><em>node</em>.baseURI</code> peut changer avec le temps (voir ci-dessous).</li> </ul> -<h2 id="Details" name="Details">Détails</h2> +<h2 id="Details">Détails</h2> <h3 id="L'URL_de_base_d'un_document">L'URL de base d'un document</h3> @@ -52,11 +52,11 @@ translation_of: Web/API/Node/baseURI <p>L'URL de base d'un <em>element</em> en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.</p> -<p>Si le document contient des attributs <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément lors du calcul de l'URL de base. Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p> +<p>Si le document contient des attributs <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément lors du calcul de l'URL de base. Voir <a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p> <p>Vous pouvez utiliser <code><em>{{domxref("element")}}</em>.baseURI</code> pour obtenir l'URL de base d'un élément.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li> @@ -66,6 +66,6 @@ translation_of: Web/API/Node/baseURI <ul> <li>l'élément {{HTMLElement("base")}} (HTML)</li> - <li>l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li> + <li>l'attribut <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li> <li>{{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.</li> </ul> diff --git a/files/fr/web/api/node/childnodes/index.html b/files/fr/web/api/node/childnodes/index.html index af687c7c99..b9f4630ffc 100644 --- a/files/fr/web/api/node/childnodes/index.html +++ b/files/fr/web/api/node/childnodes/index.html @@ -13,42 +13,42 @@ translation_of: Web/API/Node/childNodes <p>La propriété en lecture seule <code><strong>Node.childNodes</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.</p> -<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> +<h2 id="Syntaxe_et_valeurs">Syntaxe</h2> -<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/var"><span style="color: #800080;">var</span></a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes" title="https://developer.mozilla.org/fr/DOM/element.childNodes">childNodes</a>; +<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var">var</a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes">childNodes</a>; </pre> <h2 id="Exemples">Exemples</h2> <h3 id="Utilisation_simple">Utilisation simple</h3> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// parg est une référence d'objet pour un élément <p></span> +<pre class="brush:js">// parg est une référence d'objet pour un élément <p> -<span class="comment token">// D'abord vérifier que l'élément a des noeuds enfants </span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> +// D'abord vérifier que l'élément a des noeuds enfants +if (parg.hasChildNodes()) { + var children = parg.childNodes; - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// faire quelque chose avec chaque enfant[i]</span> - <span class="comment token">// NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> + for (var i = 0; i < children.length; i++) { + // faire quelque chose avec chaque enfant[i] + // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste + } +}</pre> <h3 id="Supprimer_tous_les_enfants_d'un_nom">Supprimer tous les enfants d'un nom</h3> -<pre><span style="color: #999999;">// Voici une manière de supprimer tous les enfants d'un nœud -// (boite est une référence à un élément ayant des enfants)</span> -<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>) { - <span style="color: #999999;">// La liste n'est pas une copie, elle sera donc réindexée à chaque appel</span> - boite.<a href="/fr/DOM/element.removeChild" title="https://developer.mozilla.org/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>); +<pre>// Voici une manière de supprimer tous les enfants d'un nœud +// (boite est une référence à un élément ayant des enfants) +<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild">firstChild</a>) { + // La liste n'est pas une copie, elle sera donc réindexée à chaque appel + boite.<a href="/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild">firstChild</a>); } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple <code>elementNodeReference.childNodes[1].nodeName</code> pour obtenir son nom, etc.)</p> -<p>L'objet <a href="/fr/DOM/document" title="https://developer.mozilla.org/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype" title="https://developer.mozilla.org/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments <a href="/fr/HTML/Element/html" title="https://developer.mozilla.org/fr/HTML/Element/html"><code>HTML</code></a>).</p> +<p>L'objet <a href="/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments <a href="/fr/HTML/Element/html"><code>HTML</code></a>).</p> <p><code>childNodes</code> inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.</p> diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html index 7e342018f1..fef79935dc 100644 --- a/files/fr/web/api/node/clonenode/index.html +++ b/files/fr/web/api/node/clonenode/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Node/cloneNode <p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>); </pre> @@ -33,15 +33,15 @@ translation_of: Web/API/Node/cloneNode <p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et 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> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre>p = document.getElementById("para1"); p_prime = p.cloneNode(true); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p> +<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p> <p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p> @@ -58,7 +58,7 @@ p_prime = p.cloneNode(true); <p>Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html index e5b81bcb4b..a40125b5c1 100644 --- a/files/fr/web/api/node/comparedocumentposition/index.html +++ b/files/fr/web/api/node/comparedocumentposition/index.html @@ -51,12 +51,12 @@ translation_of: Web/API/Node/compareDocumentPosition </tbody> </table> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em>.compareDocumentPosition( <em>otherNode</em> ) </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var head = document.getElementsByTagName('head').item(0); @@ -68,16 +68,16 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOL </pre> <div class="note"> -<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires" title="/en-US/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p> +<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p> </div> <div class="note"> <p><strong>Note :</strong> La première instruction utilise l' <code>item(0)</code> de la méthode <a href="/en-US/docs/Web/API/NodeList/item">NodeList</a> , qui est l'équivalent de <code>getElementsByTagName('head')[0].</code></p> </div> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> @@ -104,5 +104,5 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOL <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li> + <li><code><a href="/fr/docs/Web/API/Node/contains">Node.contains</a></code></li> </ul> diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html index 5b7f4c23e5..e5906fbf28 100644 --- a/files/fr/web/api/node/contains/index.html +++ b/files/fr/web/api/node/contains/index.html @@ -18,9 +18,9 @@ translation_of: Web/API/Node/contains <pre class="syntaxbox">node.contains( otherNode ) </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage<font face="Open Sans, sans-serif">,</font></code><font face="Open Sans, sans-serif"> donc ce cas renvoie </font><code>false</code>.</p> +<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage,</code> donc ce cas renvoie <code>false</code>.</p> <pre class="brush:js">function isInPage(node) { return (node === document.body) ? false : document.body.contains(node); diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html index a9392e7650..3c846498af 100644 --- a/files/fr/web/api/node/firstchild/index.html +++ b/files/fr/web/api/node/firstchild/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Node/firstChild <p>La propriété en lecture seule <strong><code>Node.firstChild</code> r</strong>envoie le premier nœud enfant de l'arbre ou <code>null</code> s'il n'en a pas. Si le noeud est un <code>Document</code> , il renvoie le premier noeud de la liste de ses enfants directs.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;</pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <p>Cet exemple montre l'utilisation de <code>firstChild</code> et la manière dont les nœuds d'espaces peuvent interférer.</p> @@ -31,7 +31,7 @@ translation_of: Web/API/Node/firstChild </script> </pre> -<p>Dans le code ci-dessus, la <a href="https://developer.mozilla.org/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes <p> et <span>. <strong>Tout</strong> <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p> +<p>Dans le code ci-dessus, la <a href="/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes <p> et <span>. <strong>Tout</strong> <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p> <p>Un autre nœud <code>#text</code> est inséré entre les balises de fermeture </span> et </p>.</p> @@ -85,8 +85,4 @@ translation_of: Web/API/Node/firstChild <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Node.firstChild")}}</p> - -<div id="compat-desktop"> </div> +<p>{{Compat("api.Node.firstChild")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/node/getrootnode/index.html b/files/fr/web/api/node/getrootnode/index.html index 277df08cd3..5a6297d55b 100644 --- a/files/fr/web/api/node/getrootnode/index.html +++ b/files/fr/web/api/node/getrootnode/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Node/getRootNode <p>Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :</p> -<pre class="brush: js language-html"><code class="language-html">rootNode = node.getRootNode();</code></pre> +<pre class="brush: js">rootNode = node.getRootNode();</pre> <p>Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">code source complet</a>):</p> @@ -86,10 +86,4 @@ translation_of: Web/API/Node/getRootNode <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div> - - -<p>{{Compat("api.Node.getRootNode")}}</p> -</div> - -<div id="compat-mobile"> </div> +<p>{{Compat("api.Node.getRootNode")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/node/haschildnodes/index.html b/files/fr/web/api/node/haschildnodes/index.html index d0af3b4b65..c14ad9836f 100644 --- a/files/fr/web/api/node/haschildnodes/index.html +++ b/files/fr/web/api/node/haschildnodes/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/hasChildNodes --- <p>{{APIRef("DOM")}}</p> -<p class="summary">La méthode <code><strong>Node.hasChildNodes()</strong></code> renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p> +<p>La méthode <code><strong>Node.hasChildNodes()</strong></code> renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html index cdd9ff13a3..4c7ddde36b 100644 --- a/files/fr/web/api/node/index.html +++ b/files/fr/web/api/node/index.html @@ -25,13 +25,13 @@ translation_of: Web/API/Node <h2 id="Propriétés">Propriétés</h2> -<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> +<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.</p> <dl> <dt>{{DOMxRef("Node.baseURI")}} {{readonlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) <span id="result_box" lang="fr"><span>représentant l'URL de base du document contenant le <code>Node</code>.</span><span> En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier</span></span> <code>/</code>.</dd> + <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) représentant l'URL de base du document contenant le <code>Node</code>. En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier <code>/</code>.</dd> <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}}</dt> - <dd><span id="result_box" lang="fr"><span>(Non disponible pour le contenu Web). L'objet </span></span><span id="result_box" lang="fr"><span>en lecture seule</span></span> <span lang="fr"><span> {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</span></span></dd> + <dd>(Non disponible pour le contenu Web). L'objet en lecture seule {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</dd> <dt>{{DOMxRef("Node.childNodes")}} {{readonlyInline}}</dt> <dd>Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du <code>Node</code> changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.</dd> <dt>{{DOMxRef("Node.firstChild")}} {{readonlyInline}}</dt> @@ -111,11 +111,11 @@ translation_of: Web/API/Node <dt>{{DOMxRef("Node.parentNode")}}{{readonlyInline}}</dt> <dd>Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne <code>null</code> .</dd> <dt>{{DOMxRef("Node.parentElement")}}{{readonlyInline}}</dt> - <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. <span id="result_box" lang="fr"><span>Si le nœud n'a aucun parent ou si ce parent n'est pas un </span></span> {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd> + <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd> <dt>{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}</dt> <dd>Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd> <dt>{{DOMxRef("Node.textContent")}}</dt> - <dd>Retourne / définit <span id="result_box" lang="fr"><span>le contenu textuel d'un élément et de tous ses descendants.</span></span></dd> + <dd>Retourne / définit le contenu textuel d'un élément et de tous ses descendants.</dd> </dl> <dl> @@ -125,11 +125,11 @@ translation_of: Web/API/Node <dl> <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Retourne un {{domxref("DOMString")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom d'un élément.</span></span></dd> + <dd>Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément.</dd> </dl> <div class="note"> -<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML).</span> <span>Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML.</span></span> {{gecko_minversion_inline("1.9.2")}}</p> +<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}}</p> </div> <dl> @@ -138,7 +138,7 @@ translation_of: Web/API/Node </dl> <div class="note"> -<p>Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a class="linkification-ext external external-icon" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> <span class="short_text" id="result_box" lang="fr"><span>pour HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</p> +<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a href="https://www.w3.org/1999/xhtml/">https://www.w3.org/1999/xhtml/</a></code> pour HTML et XML. {{gecko_minversion_inline("1.9.2")}}</p> </div> <dl> @@ -152,7 +152,7 @@ translation_of: Web/API/Node <h2 id="Méthodes">Méthodes</h2> -<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> +<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.</p> <dl> <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> @@ -163,15 +163,15 @@ translation_of: Web/API/Node <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt> <dd>Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.</dd> <dt>{{DOMxRef("Node.contains()")}}</dt> - <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) <span id="result_box" lang="fr"><span>indiquant si un noeud est un descendant d'un noeud donné ou non.</span></span></dd> + <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si un noeud est un descendant d'un noeud donné ou non.</dd> <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> <dd>Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.</dd> <dt>{{DOMxRef("Node.getRootNode()")}}</dt> - <dd><span id="result_box" lang="fr"><span>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</span></span></dd> + <dd>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</dd> <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> - <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des<span id="result_box" lang="fr"><span> noeuds enfants ou non.</span></span></dd> + <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des noeuds enfants ou non.</dd> <dt>{{DOMxRef("Node.insertBefore()")}}</dt> - <dd>Insère un {{domxref("Node")}} avant <span id="result_box" lang="fr"><span>le nœud de référence en tant qu'enfant du noeud actuel.</span></span></dd> + <dd>Insère un {{domxref("Node")}} avant le nœud de référence en tant qu'enfant du noeud actuel.</dd> <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> <dd>Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</dd> <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> @@ -196,70 +196,70 @@ translation_of: Web/API/Node <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> <dd>Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.</dd> <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> - <dd><span id="result_box" lang="fr"><span>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du </span></span>nœud<span lang="fr"><span>.</span></span></dd> + <dd>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du nœud.</dd> <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> - <dd>Retourne un {{jsxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si l'élément possède des attributs ou non.</span></span></dd> + <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.</dd> <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> - <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test <span id="result_box" lang="fr"><span>si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le </span></span>nœud<span lang="fr"><span> spécifique.</span></span></dd> + <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.</dd> <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> - <dd><span class="short_text" id="result_box" lang="fr"><span>Permet à un utilisateur d'attacher ou d'enlever </span></span> {{domxref("DOMUserData")}} du nœud.</dd> + <dd>Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud.</dd> </dl> <h2 id="Exemples">Exemples</h2> -<h3 id="Parcourir_tous_les_nœuds_enfants"><span class="short_text" id="result_box" lang="fr"><span>Parcourir tous les nœuds enfants</span></span></h3> +<h3 id="Parcourir_tous_les_nœuds_enfants">Parcourir tous les nœuds enfants</h3> <p>La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> DOMComb <span class="punctuation token">(</span>oParent<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>oParent<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> oNode <span class="operator token">=</span> oParent<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> oNode<span class="punctuation token">;</span> oNode <span class="operator token">=</span> oNode<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">DOMComb</span><span class="punctuation token">(</span>oNode<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - oCallback<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>oParent<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> <h4 id="Syntaxe">Syntaxe</h4> -<pre class="syntaxbox notranslate">DOMComb(parentNode, callbackFunction);</pre> +<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre> <h4 id="Description">Description</h4> -<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p> +<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p> <h4 id="Paramètres">Paramètres</h4> <dl> <dt><code>parentNode</code></dt> - <dd>Le nœud parent (<code><strong>Node</strong> <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>)</dd> + <dd>Le nœud parent (<code><strong>Node</strong> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Object</a></code>)</dd> <dt><code>callbackFunction</code></dt> - <dd>La fonction de rappel (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> + <dd>La fonction de rappel (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> </dl> <h4 id="Exemples_dutilisation">Exemples d'utilisation</h4> -<p><span id="result_box" lang="fr"><span>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</span></span></p> +<p>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> printContent <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> -<span class="punctuation token">}</span> +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} -onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">DOMComb</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">,</span> printContent<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +onload = function () { + DOMComb(document.body, printContent); +};</pre> <h3 id="Supprimer_tous_les_enfants_imbriqués_dans_un_nœud">Supprimer tous les enfants imbriqués dans un nœud</h3> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeAll <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> - <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> <h4 id="Exemple_dutilisation">Exemple d'utilisation</h4> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">/* ... an alternative to document.body.innerHTML = "" ... */</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeAll</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> <h2 id="Spécifications">Spécifications</h2> @@ -275,7 +275,7 @@ document<span class="punctuation token">.</span>body<span class="punctuation tok <tr> <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> <td>{{Spec2('DOM WHATWG')}}</td> - <td><span class="short_text" id="result_box" lang="fr"><span>Supprime les propriétés suivantes :</span></span> <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br> + <td>Supprime les propriétés suivantes : <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br> Supprime les méthodes suivantes : <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData()</code>.</td> </tr> <tr> @@ -303,8 +303,4 @@ document<span class="punctuation token">.</span>body<span class="punctuation tok <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Node")}}</p> - -<div id="compat-desktop"></div> +<p>{{Compat("api.Node")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html index 780cf3bb18..289539552f 100644 --- a/files/fr/web/api/node/insertbefore/index.html +++ b/files/fr/web/api/node/insertbefore/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/insertBefore --- <p>{{APIRef("DOM")}}</p> -<p class="summary">La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud avant un <em>nœud de référence</em> en tant qu'enfant d'un <em>nœud parent</em> spécifié.</p> +<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud avant un <em>nœud de référence</em> en tant qu'enfant d'un <em>nœud parent</em> spécifié.</p> <p>Si le nœud donné existe déjà dans le document, <code>insertBefore()</code> le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).</p> @@ -94,7 +94,7 @@ parentDiv.insertBefore(sp1, sp2) </script> </pre> -<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a class="internal" href="/fr/docs/Web/API/Node/insertBefore"> </a>et <code><a href="/fr/docs/Web/API/Node/nextSibling">nextSibling</a></code>.</p> +<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a href="/fr/docs/Web/API/Node/insertBefore"> </a>et <code><a href="/fr/docs/Web/API/Node/nextSibling">nextSibling</a></code>.</p> <p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p> diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html index 0e2acb7b5b..730afa1beb 100644 --- a/files/fr/web/api/node/isconnected/index.html +++ b/files/fr/web/api/node/isconnected/index.html @@ -20,16 +20,16 @@ translation_of: Web/API/Node/isConnected <h3 id="Renvoie_la_valeur">Renvoie la valeur</h3> -<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté <span class="short_text" id="result_box" lang="fr"><span>à son objet contextuel pertinent</span></span> et <code>false</code> (<em>faux</em>) sinon.</p> +<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté à son objet contextuel pertinent et <code>false</code> (<em>faux</em>) sinon.</p> <h2 id="Exemples">Exemples</h2> <p>Un exemple DOM standard :</p> -<pre class="brush: js"><code class="language-html">let test = document.createElement('p'); +<pre class="brush: js">let test = document.createElement('p'); console.log(test.isConnected); // renvoie false (<em>faux</em>) -document.body.appendChild(test);</code> -<code class="language-html">console.log(test.isConnected); // renvoie true</code> (<em>vrai</em>) +document.body.appendChild(test); +console.log(test.isConnected); // renvoie true (<em>vrai</em>) </pre> <p>Un exemple DOM shadow :</p> diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html index 67da853471..1ea4b789bf 100644 --- a/files/fr/web/api/node/isdefaultnamespace/index.html +++ b/files/fr/web/api/node/isdefaultnamespace/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/isDefaultNamespace <p>La méthode <strong><code>Node.isDefaultNamespace()</code></strong> accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>) </pre> @@ -24,16 +24,16 @@ translation_of: Web/API/Node/isDefaultNamespace <li><code>namespaceURI</code> est une <code>string</code> (<em>chaîne de caractères</em>) représentant l'espace de nom par rapport auquel l'élément sera vérifié.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; alert(el.isDefaultNamespace(XULNS)); // true</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> - <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> + <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> </ul> diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html index b6e3f84009..79bcb16b17 100644 --- a/files/fr/web/api/node/isequalnode/index.html +++ b/files/fr/web/api/node/isequalnode/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Node/isEqualNode <p>La méthode <code><strong>Node.isEqualNode()</strong></code> permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>); </pre> @@ -30,37 +30,37 @@ translation_of: Web/API/Node/isEqualNode <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<pre class="brush: html"><div>This is the first element.</div> +<div>This is the second element.</div> +<div>This is the first element.</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> +<p id="output"></p></pre> -<h3 id="Specification" name="Specification">CSS</h3> +<h3 id="Specification">CSS</h3> -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span> </span><span class="punctuation token">{</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span>px<span class="punctuation token">;</span> - <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid black<span class="punctuation token">;</span> - <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> - <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> - <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: css">#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +}</pre> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">let</span> divList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); -output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> -output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> -output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span></code></pre> +output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";</pre> <h3 id="Résultats">Résultats</h3> <p>{{ EmbedLiveSample('Example', 480) }}</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html index 1f3006b4b6..cab5401b56 100644 --- a/files/fr/web/api/node/issamenode/index.html +++ b/files/fr/web/api/node/issamenode/index.html @@ -35,10 +35,7 @@ translation_of: Web/API/Node/isSameNode <p id="output"></p></pre> -<div class="hidden"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#output { +<pre class="brush: css hidden">#output { width: 440px; border: 2px solid black; border-radius: 5px; @@ -46,7 +43,6 @@ translation_of: Web/API/Node/isSameNode margin-top: 20px; display: block; }</pre> -</div> <h3 id="JavaScript">JavaScript</h3> diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html index 4e1c86bedb..3c241d4656 100644 --- a/files/fr/web/api/node/issupported/index.html +++ b/files/fr/web/api/node/issupported/index.html @@ -12,32 +12,31 @@ translation_of: Web/API/Node/isSupported <p>La méthode <code><strong>Node.isSupported()</strong></code> renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre> +<h3 id="Paramètres">Paramètres</h3> + <dl> - <dt> - <h3 id="Paramètres">Paramètres</h3> - </dt> <dt><code>feature</code></dt> - <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd> + <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd> <dt><code>version</code></dt> <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « <code>2.0</code> ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur <code>true</code>.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>doc<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<pre class="brush: html"><div id="doc"> +</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="comment token">// Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.</span> - <span class="keyword token">var</span> main <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'doc'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> output <span class="operator token">=</span> main<span class="punctuation token">.</span><span class="function token">isSupported</span><span class="punctuation token">(</span><span class="string token">'HTML'</span><span class="punctuation token">,</span> <span class="string token">'2.0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> +<script> + // Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2. + var main = document.getElementById('doc'); + var output = main.isSupported('HTML', '2.0'); +</script></pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <p> </p> diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html index 3f31c8f722..37963f8473 100644 --- a/files/fr/web/api/node/lastchild/index.html +++ b/files/fr/web/api/node/lastchild/index.html @@ -13,19 +13,19 @@ translation_of: Web/API/Node/lastChild <p>La propriété en lecture seule<strong> </strong><code><strong>Node.lastChild</strong></code> renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie <code>null</code> s'il n'y a aucun enfant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild; </pre> <p> </p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <p> </p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> tr <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"row1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> corner_td <span class="operator token">=</span> tr<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var tr = document.getElementById("row1"); +var corner_td = tr.lastChild;</pre> <h2 id="Spécification">Spécification</h2> @@ -63,8 +63,4 @@ translation_of: Web/API/Node/lastChild <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Node.lastChild")}}</p> - -<div id="compat-desktop"> </div> +<p>{{Compat("api.Node.lastChild")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.html b/files/fr/web/api/node/lookupnamespaceuri/index.html index 52e72bec1f..1c88e6b8a2 100644 --- a/files/fr/web/api/node/lookupnamespaceuri/index.html +++ b/files/fr/web/api/node/lookupnamespaceuri/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/Node/lookupNamespaceURI <p>La méthode <code><strong>Node.lookupNamespaceURI()</strong></code> accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et <code>null</code> sinon). La fourniture de <code>null</code> pour le préfixe renverra l'espace de nom par défaut.</p> -<p>Du fait du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p> +<p>Du fait du <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix">Node.prefix</a>).</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li> </ul> <p> </p> diff --git a/files/fr/web/api/node/lookupprefix/index.html b/files/fr/web/api/node/lookupprefix/index.html index 968deea85e..17cc48c622 100644 --- a/files/fr/web/api/node/lookupprefix/index.html +++ b/files/fr/web/api/node/lookupprefix/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/Node/lookupPrefix <p>La méthode <code><strong>Node.lookupPrefix()</strong></code> renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.</p> -<p>En raison du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p> +<p>En raison du <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li> </ul> diff --git a/files/fr/web/api/node/nextsibling/index.html b/files/fr/web/api/node/nextsibling/index.html index b3e6cf3e7f..2a971a3067 100644 --- a/files/fr/web/api/node/nextsibling/index.html +++ b/files/fr/web/api/node/nextsibling/index.html @@ -12,42 +12,42 @@ translation_of: Web/API/Node/nextSibling <p>La propriété en lecture seule <code><strong>Node.nextSibling</strong></code> renvoie le nœud (<code>node</code>) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou <code>null</code> si le nœud spécifié est le dernier dans cette liste.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces - vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a> ou <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément que l'auteur comptait obtenir.</p> <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> - et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + et <a href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> <p>{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<pre class="brush:html"><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> -<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span> - i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +<script type="text/javascript"> +var el = document.getElementById('div-01').nextSibling, + i = 1; -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +console.log('Siblings of div-01:'); -<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span> - el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> - i<span class="operator token">++</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +while (el) { + console.log(i + '. ' + el.nodeName); + el = el.nextSibling; + i++; +} -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +</script> /************************************************** Ce qui suit est écrit sur la console pendant le chargement: @@ -59,25 +59,25 @@ console<span class="punctuation token">.</span><span class="function token">log< 3. #text 4. SCRIPT -**************************************************/</code></pre> +**************************************************/</pre> <p>Dans cet exemple, on peut voir que des nœuds <code>#text</code> sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction <code>document.write</code> .</p> <p>L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de <code>nextSibling</code>. Consultez les ressources dans la section Notes .</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li> </ul> -<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("api.Node.nextSibling")}}</p> -<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <p>{{domxref("Element.nextElementSibling")}}</p> diff --git a/files/fr/web/api/node/nodename/index.html b/files/fr/web/api/node/nodename/index.html index da778cda15..11c471fff1 100644 --- a/files/fr/web/api/node/nodename/index.html +++ b/files/fr/web/api/node/nodename/index.html @@ -72,7 +72,7 @@ translation_of: Web/API/Node/nodeName </tbody> </table> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName; </pre> @@ -92,15 +92,15 @@ var text_field = document.getElementById("t"); text_field.value = div1.nodeName; </pre> -<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p> +<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p> <p>Notez que la propriété <code><a href="fr/DOM/element.tagName">tagName</a></code> aurait pu être uilisée à la place, puisque <code>nodeName</code> a la même valeur que <code>tagName</code> pour un élément. Souvenez vous cependant que <code>nodeName</code> renverra <code>#text</code> pour les nœuds texte tandis que <code>tagName</code> renverra <code>undefined</code>.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></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> diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html index d6f0a4eb2e..2f6cd30d79 100644 --- a/files/fr/web/api/node/nodetype/index.html +++ b/files/fr/web/api/node/nodetype/index.html @@ -17,16 +17,16 @@ translation_of: Web/API/Node/nodeType <p>La propriété <strong><code>nodeType</code></strong> peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .</p> -<h2 id="Syntaxe"><font><font>Syntaxe</font></font></h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox"><var><font><font>Type</font></font></var> = <var><font><font>node</font></font></var> .nodeType +<pre class="syntaxbox"><var>Type</var> = <var>node</var> .nodeType </pre> -<p id="Exemple"><font><font>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans </font></font> {{anch("Constantes")}}.</p> +<p>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.</p> -<h2 id="Exemple" name="Exemple"><a id="Constantes" name="Constantes"></a>Constantes</h2> +<h2>Constantes</h2> -<h3 id="Exemple" name="Exemple">Constantes de type nœud</h3> +<h3 id="Exemple">Constantes de type nœud</h3> <table class="standard-table"> <thead> @@ -114,9 +114,9 @@ translation_of: Web/API/Node/nodeType </tbody> </table> -<h2 id="Exemple" name="Exemple"><font><font>Exemples</font></font></h2> +<h2 id="Exemple">Exemples</h2> -<h3 id="Différents_types_de_noeuds"><font><font>Différents types de noeuds</font></font></h3> +<h3 id="Différents_types_de_noeuds">Différents types de noeuds</h3> <pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true (<em>vrai</em>) document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true (<em>vrai</em>) @@ -133,13 +133,13 @@ p.firstChild.nodeType === Node.TEXT_NODE; // true (<em>vrai</em>) <h3 id="Commentaires">Commentaires</h3> -<p><font><font>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</font></font></p> +<p>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">!=</span> Node<span class="punctuation token">.</span>COMMENT_NODE<span class="punctuation token">)</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"You should comment your code well!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var node = document.documentElement.firstChild; +if (node.nodeType != Node.COMMENT_NODE) + console.log("You should comment your code well!");</pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><font><font>Spécifications</font></font></h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html index 07e228342e..9f3fa1f3b3 100644 --- a/files/fr/web/api/node/nodevalue/index.html +++ b/files/fr/web/api/node/nodevalue/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Node/nodeValue <p>La propriété <code><strong>Node.nodeValue</strong></code> renvoie ou définit la valeur du nœud courant.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue; </pre> @@ -80,10 +80,10 @@ translation_of: Web/API/Node/nodeValue <p>Lorsque <code>nodeValue</code> est défini comme étant <code>null</code>, l'assignation n'a aucun effet.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li> </ul> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html index c58ba06945..e7ca55ed31 100644 --- a/files/fr/web/api/node/normalize/index.html +++ b/files/fr/web/api/node/normalize/index.html @@ -5,18 +5,18 @@ translation_of: Web/API/Node/normalize --- <p>{{ ApiRef("DOM") }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>élément</em>.normalize(); </pre> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js">var conteneur = document.createElement("div"); +<pre class="brush:js">var conteneur = document.createElement("div"); conteneur.appendChild( document.createTextNode("Partie 1 ") ); conteneu.appendChild( document.createTextNode("Partie 2 ") ); @@ -29,12 +29,12 @@ conteneur.normalize(); // À présent, conteneur.childNodes.length === 1 // conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li> </ul> <p>{{ languages( { "en": "en/DOM/element.normalize", "pl": "pl/DOM/element.normalize" } ) }}</p> diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html index cc197c1d80..35b5eb6859 100644 --- a/files/fr/web/api/node/ownerdocument/index.html +++ b/files/fr/web/api/node/ownerdocument/index.html @@ -13,16 +13,16 @@ translation_of: Web/API/Node/ownerDocument <p>La propriété en lecture seule <code><strong>Node.ownerDocument</strong></code> renvoie l'objet document de niveau supérieur pour ce nœud.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>document</em> = element.ownerDocument; </pre> <ul> - <li><code>document</code> est l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li> + <li><code>document</code> est l'objet <a href="/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="brush: html">// étant donné un nœud "p", obtient le premier enfant HTML // de l'objet document @@ -30,11 +30,11 @@ var d = p.ownerDocument; var html = d.documentElement; </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>L'objet <code>document</code> renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est <code>null</code>.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h3> +<h3 id="Sp.C3.A9cification">Spécifications</h3> <table class="standard-table"> <tbody> @@ -63,8 +63,4 @@ var html = d.documentElement; <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - -<p>{{Compat("api.Node.ownerDocument")}}</p> - -<div id="compat-desktop"> </div> +<p>{{Compat("api.Node.ownerDocument")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/node/parentelement/index.html b/files/fr/web/api/node/parentelement/index.html index 7da92f2334..673cb3b8b2 100644 --- a/files/fr/web/api/node/parentelement/index.html +++ b/files/fr/web/api/node/parentelement/index.html @@ -14,21 +14,21 @@ translation_of: Web/API/Node/parentElement <div>{{APIRef("DOM")}}</div> </div> -<div>La propriété en lecture seule <code style="font-style: normal;"><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code style="font-style: normal;"><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div> +<div>La propriété en lecture seule <code><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement </pre> -<p><code><strong>parentElement</strong></code> référence l'élément parent d'un n<span class="notranslate" style="line-height: 1.5;">œ</span>ud (<code><strong>node</strong></code>). C'est toujours un objet <span style="line-height: 1.5;">{{domxref("Element")}} </span> du DOM <span style="line-height: 1.5;">ou <code>null</code>.</span></p> +<p><code><strong>parentElement</strong></code> référence l'élément parent d'un nœud (<code><strong>node</strong></code>). C'est toujours un objet {{domxref("Element")}} du DOM ou <code>null</code>.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentElement<span class="punctuation token">)</span> <span class="punctuation token">{</span> - node<span class="punctuation token">.</span>parentElement<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"red"</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush:js">if (node.parentElement) { + node.parentElement.style.color = "red"; +}</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> @@ -46,7 +46,7 @@ translation_of: Web/API/Node/parentElement <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> </ul> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li>{{domxref("Node.parentNode")}}</li> diff --git a/files/fr/web/api/node/parentnode/index.html b/files/fr/web/api/node/parentnode/index.html index 50123e2cb6..5d2088cbf6 100644 --- a/files/fr/web/api/node/parentnode/index.html +++ b/files/fr/web/api/node/parentnode/index.html @@ -11,47 +11,42 @@ translation_of: Web/API/Node/parentNode --- <p>{{APIRef("DOM")}}</p> -<p>La propriété en lecture seule <strong>parentNode</strong> <span id="result_box" lang="fr"><span>renvoie le parent du nœud spécifié dans l'arborescence de DOM</span></span> .</p> +<p>La propriété en lecture seule <strong>parentNode</strong> renvoie le parent du nœud spécifié dans l'arborescence de DOM .</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode</pre> -<p><code>parentNode</code> est l'élément parent du nœud courant. <span class="short_text" id="result_box" lang="fr"><span>Le parent d'un élément est un </span></span>nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p> +<p><code>parentNode</code> est l'élément parent du nœud courant. Le parent d'un élément est un nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// supprime un noeud de l'arbre, </span> - <span class="comment token">// sauf s'il a déjà été supprimé</span> - node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush:js">if (node.parentNode) { + // supprime un noeud de l'arbre, + // sauf s'il a déjà été supprimé + node.parentNode.removeChild(node); +}</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Les <a href="https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors <code>parentNode</code> retournera toujours <code>null</code> .</p> +<p>Les <a href="/en-US/docs/DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors <code>parentNode</code> retournera toujours <code>null</code> .</p> <p> Il renvoie également <code>null</code> si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div id="compat-desktop"> - - <p>{{Compat("api.Node.parentNode")}}</p> <h2 id="Spécification">Spécification</h2> </div> <ul> - <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> - <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> -<article class="approved text-content"> -<div class="boxed translate-rendered"> <ul> <li>{{Domxref("Node.firstChild")}}</li> <li>{{Domxref("Node.lastChild")}}</li> @@ -60,8 +55,4 @@ translation_of: Web/API/Node/parentNode <li>{{Domxref("Node.parentElement")}}</li> <li>{{Domxref("Node.previousSibling")}}</li> <li>{{Domxref("Node.removeChild")}}</li> -</ul> -</div> -</article> - -<article class="localized"></article> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/node/previoussibling/index.html b/files/fr/web/api/node/previoussibling/index.html index 2f9f178b1f..31e02f5c7a 100644 --- a/files/fr/web/api/node/previoussibling/index.html +++ b/files/fr/web/api/node/previoussibling/index.html @@ -12,45 +12,45 @@ translation_of: Web/API/Node/previousSibling <p>La propriété en lecture seule <code><strong>Node.previousSibling</strong></code> renvoie le nœud (<code>node</code>) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou <code>null</code> s'il s'agit du premier nœud de la liste.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling; </pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// <a><b1 id="b1"/><b2 id="b2"/></a></span> +<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> -<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// null</span> -<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "b1"</span></code></pre> +alert(document.getElementById("b1").previousSibling); // null +alert(document.getElementById("b2").previousSibling.id); // "b1"</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces - vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a> ou <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément que l'auteur comptait obtenir.</p> <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> - et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + et <a href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> -<p>L'opération inverse <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p> +<p>L'opération inverse <code><a href="/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li> <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> </ul> -<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> <p>{{Compat("api.Node.previousSibling")}}</p> -<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <p>{{domxref("Node.nextSibling")}}</p> diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html index cff831cdef..051a65c4e6 100644 --- a/files/fr/web/api/node/removechild/index.html +++ b/files/fr/web/api/node/removechild/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/removeChild <p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); <strong>OR</strong> @@ -23,20 +23,20 @@ translation_of: Web/API/Node/removeChild <ul> <li><code>child</code> est le nœud enfant à retirer du DOM.</li> - <li><code><font face="Consolas, Liberation Mono, Courier, monospace">node </font></code>est le nœud parent de <code>child</code>.</li> + <li><code>node </code>est le nœud parent de <code>child</code>.</li> <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li> </ul> <p>Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet <code>ancienEnfant</code><em>. </em></p> -<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p> +<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p> <p>Si <code>child</code> n'est pas un enfant du noeud <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud <code>element </code>(comme <em>blur</em>).</p> <p>La méthode peut lever une exception de deux façons :</p> <ol> - <li>Si <code>enfant</code> était bien un enfant de <font face="Consolas, Liberation Mono, Courier, monospace">element </font>et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code></code><br> + <li>Si <code>enfant</code> était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code></code><br> <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li> <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br> <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li> @@ -44,62 +44,62 @@ translation_of: Web/API/Node/removeChild <h2 id="Exemples">Exemples</h2> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!--Sample HTML code--></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<pre class="brush: html"><!--Sample HTML code--> +<div id="top" align="center"> </div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); - <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//Cas test 2: la méthode lance l'exception (2)</span> + var garbage = top.removeChild(nested); //Cas test 2: la méthode lance l'exception (2) -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +</script> -<span class="comment token"><!--Sample HTML code--></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<!--Sample HTML code--> +<div id="top" align="center"> + <div id="nested"></div> +</div> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> - <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<script type="text/javascript"> + var top = document.getElementById("top"); + var nested = document.getElementById("nested"); - <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Ce premier appel supprime correctement le noeud</span> + var garbage = top.removeChild(nested); // Ce premier appel supprime correctement le noeud - <span class="comment token">// ......</span> - garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</span> + // ...... + garbage = top.removeChild(nested); // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1) -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> +</script></pre> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!--Sample HTML code--></span> +<pre class="brush: html"><!--Sample HTML code--> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<div id="top" align="center"> + <div id="nested"></div> +</div></pre> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié quand son noeud parent est connu</span> -<span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> d_nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> throwawayNode <span class="operator token">=</span> d<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>d_nested<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush:js">// Supprime un élément spécifié quand son noeud parent est connu +var d = document.getElementById("top"); +var d_nested = document.getElementById("nested"); +var throwawayNode = d.removeChild(d_nested);</pre> -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié sans avoir à spécifier son noeud parent</span> -<span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span> - node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush:js">// Supprime un élément spécifié sans avoir à spécifier son noeud parent +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +}</pre> -<pre class="brush:js line-numbers language-js"> -<code class="language-js"><span class="comment token">// Supprime tous les enfant d'un élément</span> -<span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">while</span> <span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> - element<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush:js"> +// Supprime tous les enfant d'un élément +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +}</pre> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li> <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> </ul> diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html index 3fb6b0e8df..3cdf5aa950 100644 --- a/files/fr/web/api/node/replacechild/index.html +++ b/files/fr/web/api/node/replacechild/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Node/replaceChild <p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); </pre> diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html index aa5b90cf7a..63e892d5b6 100644 --- a/files/fr/web/api/node/textcontent/index.html +++ b/files/fr/web/api/node/textcontent/index.html @@ -12,17 +12,17 @@ translation_of: Web/API/Node/textContent <p>La propriété <code><strong>Node.textContent</strong></code> représente le contenu textuel d'un nœud et de ses descendants.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox">var <em>text</em> = element.textContent; element.textContent = "ceci est un simple exemple de texte"; </pre> -<h2 id="Notes" name="Notes">Description</h2> +<h2 id="Notes">Description</h2> <ul> - <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser <code> <a href="https://developer.mozilla.org/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li> - <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li> + <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="/fr/docs/Web/API/document">document</a>, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser <code> <a href="/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li> + <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li> <li>Pour les autres types de nœuds, <code>textContent</code> renvoie la concaténation des valeurs de propriété <code>textContent</code> de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.</li> <li>En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.</li> </ul> @@ -42,7 +42,7 @@ element.textContent = "ceci est un simple exemple de texte"; <p>{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent <code>innerHTML</code>. Cependant, <code>textContent</code> a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de <code>textContent</code> peut empêcher les attaques XSS.</p> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="eval">// Étant donné le fragment de HTML suivant : // <div id="divA">Ceci est un <span>exemple de</span> texte</div> @@ -58,27 +58,27 @@ document.getElementById("divA").textContent = "Ceci est un exemple de texte"; <h2 id="Polyfill_pour_IE8">Polyfill pour IE8</h2> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>Object<span class="punctuation token">.</span>defineProperty - <span class="operator token">&&</span> Object<span class="punctuation token">.</span>getOwnPropertyDescriptor - <span class="operator token">&&</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span> - <span class="operator token">&&</span> <span class="operator token">!</span>Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> innerText <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"innerText"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">,</span> - <span class="comment token">// Passing innerText or innerText.get directly does not work,</span> - <span class="comment token">// wrapper function is required.</span> - <span class="punctuation token">{</span> - <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> s<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> - <span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8 +if (Object.defineProperty + && Object.getOwnPropertyDescriptor + && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") + && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { + (function() { + var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); + Object.defineProperty(Element.prototype, "textContent", + // Passing innerText or innerText.get directly does not work, + // wrapper function is required. + { + get: function() { + return innerText.get.call(this); + }, + set: function(s) { + return innerText.set.call(this, s); + } + } + ); + })(); +}</pre> <ul> </ul> @@ -89,9 +89,9 @@ document.getElementById("divA").textContent = "Ceci est un exemple de texte"; <p>{{Compat("api.Node.textContent")}}</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> +<h2 id="Sp.C3.A9cification">Spécifications</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/nodefilter/acceptnode/index.html b/files/fr/web/api/nodefilter/acceptnode/index.html index a10a9b5657..58a61e0e11 100644 --- a/files/fr/web/api/nodefilter/acceptnode/index.html +++ b/files/fr/web/api/nodefilter/acceptnode/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/NodeFilter/acceptNode <p>La fonction doit renvoyer <code>NodeFilter.FILTER_ACCEPT</code> qui pousse le TreeWalker à renvoyer le noeud, <code>NodeFilter.FILTER_REJECT</code> qui contraint le TreeWalker à ignorer le sous-arbre entier ou <code>NodeFilter.FILTER_SKIP</code>.</p> -<p><span id="result_box" lang="fr"><span>Le navigateur ne fournit aucun objet implémentant cette méthode.</span></span> C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode <code>acceptNode()</code> à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p> +<p>Le navigateur ne fournit aucun objet implémentant cette méthode. C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode <code>acceptNode()</code> à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -81,7 +81,7 @@ while ((node = iterator.nextNode())) { } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -113,8 +113,4 @@ while ((node = iterator.nextNode())) { <ul> <li>L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.</li> -</ul> - -<dl> - <dt> </dt> -</dl> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/nodefilter/index.html b/files/fr/web/api/nodefilter/index.html index 7850b44bf7..17bab28ee1 100644 --- a/files/fr/web/api/nodefilter/index.html +++ b/files/fr/web/api/nodefilter/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/NodeFilter <p>Une interface <strong><code>NodeFilter</code></strong> représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.</p> <div class="note"> -<p>Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode <code>acceptNode()</code> en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p> +<p><strong>Note :</strong> Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode <code>acceptNode()</code> en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p> </div> <h2 id="Propriétés">Propriétés</h2> @@ -84,7 +84,7 @@ while ((node = nodeIterator.nextNode())) { } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/detach/index.html b/files/fr/web/api/nodeiterator/detach/index.html index 5330650ab5..ee558b083b 100644 --- a/files/fr/web/api/nodeiterator/detach/index.html +++ b/files/fr/web/api/nodeiterator/detach/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/detach <p>Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à <code>INVALID</code>. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le <code>NodeIterator</code> déclenchait une exception <code>INVALID_STATE_ERR</code>. </p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>nodeIterator</em>.detach(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">var nodeIterator = document.createNodeIterator( document.body, @@ -34,7 +34,7 @@ nodeIterator.detach(); // détache l'itérateur nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.html b/files/fr/web/api/nodeiterator/expandentityreferences/index.html index bf1f66e25a..32c3294fc0 100644 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.html +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/expandEntityReferences <p>Si cette valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("NodeIterator.whatToShow")}} et le filtre associé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>expand</em> = <em>nodeIterator</em>.expandEntityReferences; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -31,7 +31,7 @@ translation_of: Web/API/NodeIterator/expandEntityReferences ); expand = nodeIterator.expandEntityReferences;</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -55,13 +55,9 @@ expand = nodeIterator.expandEntityReferences;</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<div id="compat-desktop"> - - <p>{{Compat("api.NodeIterator.expandEntityReferences")}}</p> <h2 id="Voir_aussi">Voir aussi</h2> -</div> <ul> <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li> diff --git a/files/fr/web/api/nodeiterator/filter/index.html b/files/fr/web/api/nodeiterator/filter/index.html index d33a997c5a..57cbd54740 100644 --- a/files/fr/web/api/nodeiterator/filter/index.html +++ b/files/fr/web/api/nodeiterator/filter/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/NodeIterator/filter <p>Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode <code>acceptNode(<em>node</em>)</code> est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante <code>NodeFilter.FILTER_ACCEPT</code> quand le noeud doit être accepté et <code>NodeFilter.FILTER_REJECT</code> s'il doit être rejeté.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>nodeFilter</em> = <em>nodeIterator</em>.filter; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, diff --git a/files/fr/web/api/nodeiterator/index.html b/files/fr/web/api/nodeiterator/index.html index ec58943384..d45bd86f1f 100644 --- a/files/fr/web/api/nodeiterator/index.html +++ b/files/fr/web/api/nodeiterator/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/NodeIterator <pre class="brush: js">var nodeIterator = document.createNodeIterator(<em>root</em>, <em>whatToShow</em>, <em>filter</em>);</pre> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <p><em>L'interface n'hérite d'aucune propriété.</em></p> @@ -110,7 +110,7 @@ translation_of: Web/API/NodeIterator <dd>Renvoie un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si le {{domxref("NodeIterator")}} est ancré avant (<code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud d'ancrage.</dd> </dl> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <p><em>Cette interface n'hérite d'aucune méthode.</em></p> @@ -123,7 +123,7 @@ translation_of: Web/API/NodeIterator <dd>Renvoie le noeud {{domxref("Node")}} suivant dans le document ou <code>null</code> s'il n'y en a aucun.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/nextnode/index.html b/files/fr/web/api/nodeiterator/nextnode/index.html index 8c9b61982a..517cc65cef 100644 --- a/files/fr/web/api/nodeiterator/nextnode/index.html +++ b/files/fr/web/api/nodeiterator/nextnode/index.html @@ -18,12 +18,12 @@ translation_of: Web/API/NodeIterator/nextNode <p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} <code>INVALID_STATE_ERR</code> si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.nextNode(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -34,7 +34,7 @@ translation_of: Web/API/NodeIterator/nextNode currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant. </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html index 439bfe8df6..a2d6507e4f 100644 --- a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html +++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode <p>La propriété en lecture seule <strong><code>NodeIterator.pointerBeforeReferenceNode</code></strong> renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est <code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>flag</em> = <em>nodeIterator</em>.pointerBeforeReferenceNode; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -29,7 +29,7 @@ translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode ); flag = nodeIterator.pointerBeforeReferenceNode;</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/previousnode/index.html b/files/fr/web/api/nodeiterator/previousnode/index.html index d0bfa021f4..e6c19c0c07 100644 --- a/files/fr/web/api/nodeiterator/previousnode/index.html +++ b/files/fr/web/api/nodeiterator/previousnode/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/NodeIterator/previousNode <p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une <code>INVALID_STATE_ERR</code> {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.previousNode(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -34,7 +34,7 @@ currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/referencenode/index.html b/files/fr/web/api/nodeiterator/referencenode/index.html index b138a52723..b706873866 100644 --- a/files/fr/web/api/nodeiterator/referencenode/index.html +++ b/files/fr/web/api/nodeiterator/referencenode/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/referenceNode <p>La propriété en lecture seule <strong><code>NodeIterator.referenceNode</code></strong> renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.referenceNode; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -30,7 +30,7 @@ translation_of: Web/API/NodeIterator/referenceNode node = nodeIterator.referenceNode; </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/root/index.html b/files/fr/web/api/nodeiterator/root/index.html index b5d6aeead3..c3fcbf3a8b 100644 --- a/files/fr/web/api/nodeiterator/root/index.html +++ b/files/fr/web/api/nodeiterator/root/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/NodeIterator/root <p>La propriété en lecture seule <code><strong>NodeIterator.root</strong></code> représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>root</em> = <em>nodeIterator</em>.root; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -30,7 +30,7 @@ translation_of: Web/API/NodeIterator/root root = nodeIterator.root; // document.body dans ce cas </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.html b/files/fr/web/api/nodeiterator/whattoshow/index.html index a36dbc4527..216eee5ac5 100644 --- a/files/fr/web/api/nodeiterator/whattoshow/index.html +++ b/files/fr/web/api/nodeiterator/whattoshow/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/NodeIterator/whatToShow <p>La propriété en lecture seule <strong><code>NodeIterator.whatToShow</code></strong> est un <code>unsigned integer</code> (<em>entier non signé</em>) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var nodeTypes = <em>nodeIterator</em>.whatToShow; </pre> @@ -96,7 +96,7 @@ translation_of: Web/API/NodeIterator/whatToShow </tbody> </table> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var nodeIterator = document.createNodeIterator( document.body, @@ -110,7 +110,7 @@ if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) || } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html index 7888945118..55a048203d 100644 --- a/files/fr/web/api/nodelist/entries/index.html +++ b/files/fr/web/api/nodelist/entries/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/NodeList/entries <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[12]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html index 7ab1ed297b..0a0eb9f1a8 100644 --- a/files/fr/web/api/nodelist/foreach/index.html +++ b/files/fr/web/api/nodelist/foreach/index.html @@ -46,7 +46,7 @@ translation_of: Web/API/NodeList/forEach <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[6]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html index a6b5649708..38e9a6121e 100644 --- a/files/fr/web/api/nodelist/index.html +++ b/files/fr/web/api/nodelist/index.html @@ -9,23 +9,23 @@ tags: - Noeuds translation_of: Web/API/NodeList --- -<p id="Sommaire">{{APIRef("DOM")}}</p> +<p>{{APIRef("DOM")}}</p> <p>Les objets <strong><code>NodeList</code></strong> sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.</p> <div class="note"> -<p>Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p> +<p><strong>Note :</strong> Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p> <p>Néanmoins certains vieux navigateurs n'ont pas encore implémenté <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).</p> </div> <p>Dans certains cas, la <code>NodeList</code> est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> parent <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> child_nodes <span class="operator token">=</span> parent<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supposons "2"</span> -parent<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devrait afficher "3"</span></code></pre> +<pre class="brush: js">var parent = document.getElementById('parent'); +var child_nodes = parent.childNodes; +console.log(child_nodes.length); // supposons "2" +parent.appendChild(document.createElement('div')); +console.log(child_nodes.length); // devrait afficher "3"</pre> <p>Dans d'autres cas, la <code>NodeList</code> est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une <code>NodeList</code> statique.</p> @@ -35,9 +35,6 @@ console<span class="punctuation token">.</span><span class="function token">log< <dl> <dt>{{domxref("NodeList.length")}}</dt> -</dl> - -<dl> <dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd> </dl> @@ -65,23 +62,23 @@ console<span class="punctuation token">.</span><span class="function token">log< } </pre> -<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in" title="JavaScript/ Reference/Statements/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in" title="JavaScript/ Reference/Statements/for each...in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p> +<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p> -<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of" title="JavaScript/Reference/Statements/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p> +<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p> <pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); for (var item of list) { item.checked = true; }</pre> -<p id="Comment_convertir_un_NodeList_en_Array">Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p> +<p>Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p> <p>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> list <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span> <span class="string token">'input[type=checkbox]'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> -Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>forEach<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>list<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span> - item<span class="punctuation token">.</span>checked <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' ); +Array.prototype.forEach.call(list, function (item) { + item.checked = true; +});</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html index e4d65fc86d..8cee3e9216 100644 --- a/files/fr/web/api/nodelist/item/index.html +++ b/files/fr/web/api/nodelist/item/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/NodeList/item --- <div>{{APIRef("DOM")}}</div> -<p class="summary">Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p> +<p>Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -19,7 +19,7 @@ translation_of: Web/API/NodeList/item </pre> <ul> - <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes" title="childNodes">childNodes</a>.</li> + <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes">childNodes</a>.</li> <li><code>index</code> est l'index du noeud à chercher. L'index commence à zéro.</li> <li><code>nodeItem</code> est le numéro d'<code>index</code> du noeud dans la <code>nodeList</code> retourné par la méthode <code>item</code>.</li> </ul> @@ -39,9 +39,9 @@ var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong <h2 id="Spécification">Spécification</h2> -<p><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p> +<p><a href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p> -<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p> +<p><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html index 6f4f693c1a..79da27b5b6 100644 --- a/files/fr/web/api/nodelist/keys/index.html +++ b/files/fr/web/api/nodelist/keys/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/NodeList/keys <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html index b68db9816b..0bc3206cd6 100644 --- a/files/fr/web/api/nodelist/length/index.html +++ b/files/fr/web/api/nodelist/length/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/NodeList/length <p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length </pre> @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/length <li><code>numItems</code> est un entier (<em>integer</em>), valeur représentant le nombre d'éléments dans une <code>NodeList</code>.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// tous les paragraphes dans le document var items = document.getElementsByTagName("p"); @@ -37,15 +37,15 @@ for (var i = 0; i < items.length; i++) { // gross est maintenant tout le HTML pour les paragraphes </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Malgré l'emplacement de cette page dans la référence, <code>length</code> n'est pas une propriété d'<a href="en/DOM/element">Element</a>, mais plutôt d'une <code>NodeList</code>. Les objets NodeList sont retournés à partir des méthodes DOM comme <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a>.</p> <p><code>length</code> est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p> +<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html index 4abe62ad34..74cf0f4ad5 100644 --- a/files/fr/web/api/nodelist/values/index.html +++ b/files/fr/web/api/nodelist/values/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/NodeList/values <h2 id="Exemple">Exemple</h2> -<pre class="brush: js;highlight:[13]">var node = document.createElement("div"); +<pre class="brush: js">var node = document.createElement("div"); var kid1 = document.createElement("p"); var kid2 = document.createTextNode("hey"); var kid3 = document.createElement("span"); diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html index 3f484723f7..e65543b120 100644 --- a/files/fr/web/api/notification/actions/index.html +++ b/files/fr/web/api/notification/actions/index.html @@ -13,17 +13,19 @@ translation_of: Web/API/Notification/actions --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</span> Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p> +<p>La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</p> + +<p>Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p> <div class="blockIndicator note"> <p><strong>Note:</strong> Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.actions</pre> +<pre class="syntaxbox"><var>Notification</var>.actions</pre> -<h3 id="Value" name="Value">Valeur</h3> +<h3 id="Value">Valeur</h3> <p>Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.</p> diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html index 7afe7c725f..319ba58bb9 100644 --- a/files/fr/web/api/notification/badge/index.html +++ b/files/fr/web/api/notification/badge/index.html @@ -12,11 +12,11 @@ translation_of: Web/API/Notification/badge --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</span></p> +<p>La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const url = Notification.badge</pre> +<pre class="syntaxbox">const url = Notification.badge</pre> <h3 id="Valeur">Valeur</h3> @@ -34,7 +34,7 @@ translation_of: Web/API/Notification/badge <tr> <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td> <td>{{Spec2('Web Notifications')}}</td> - <td><span class="tlid-translation translation" lang="fr"><span title="">Définition initiale</span></span>.</td> + <td>Définition initiale.</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html index d89bd55769..e19c579157 100644 --- a/files/fr/web/api/notification/body/index.html +++ b/files/fr/web/api/notification/body/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Notification/body --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <span class="tlid-translation translation" lang="fr">en lecture seule</span> <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> +<p>La propriété en lecture seule <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.body +<pre class="syntaxbox"><var>Notification</var>.body </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html index 37f7f929b6..359bf36dda 100644 --- a/files/fr/web/api/notification/close/index.html +++ b/files/fr/web/api/notification/close/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Notification/close --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est <span class="tlid-translation translation" lang="fr">utilisée </span>pour fermer / supprimer une notification précédemment affichée.</p> +<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est utilisée pour fermer / supprimer une notification précédemment affichée.</p> <div class="note"> <p><strong>Note:</strong> Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).</p> @@ -22,7 +22,7 @@ translation_of: Web/API/Notification/close <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">Notification.close()</pre> +<pre class="syntaxbox">Notification.close()</pre> <h3 id="Paramètres">Paramètres</h3> @@ -36,7 +36,7 @@ translation_of: Web/API/Notification/close <p>Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet <code>options</code>, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également <code>close()</code> dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.</p> -<pre class="brush:js notranslate">function spawnNotification(theBody, theIcon, theTitle) { +<pre class="brush:js">function spawnNotification(theBody, theIcon, theTitle) { const options = { body: theBody, icon: theIcon diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html index e6e29516f2..22b3b01747 100644 --- a/files/fr/web/api/notification/data/index.html +++ b/files/fr/web/api/notification/data/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Notification/data --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</span></p> +<p>La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</p> <p>Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.data +<pre class="syntaxbox"><var>Notification</var>.data </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html index 6e694e6d14..7fed8f84dd 100644 --- a/files/fr/web/api/notification/dir/index.html +++ b/files/fr/web/api/notification/dir/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/Notification/dir --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> +<p>La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval notranslate"><var>Notification</var>.dir +<pre class="eval"><var>Notification</var>.dir </pre> -<h3 id="Value" name="Value">Valeur</h3> +<h3 id="Value">Valeur</h3> <p>Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:</p> @@ -31,7 +31,7 @@ translation_of: Web/API/Notification/dir </ul> <div class="note"> -<p><strong>Note</strong>: La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p> +<p><strong>Note :</strong> La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html index 19eac0702c..8b25811ea0 100644 --- a/files/fr/web/api/notification/icon/index.html +++ b/files/fr/web/api/notification/icon/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/icon <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.icon +<pre class="syntaxbox"><var>Notification</var>.icon </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html index 0ad86d51a3..fa57345f6e 100644 --- a/files/fr/web/api/notification/image/index.html +++ b/files/fr/web/api/notification/image/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Notification/image <p>La propriété en lecture seule <code><strong>image</strong></code> de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>image</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.image</pre> +<pre class="syntaxbox"><var>Notification</var>.image</pre> -<h3 id="Value" name="Value">Valeur</h3> +<h3 id="Value">Valeur</h3> <p>Une {{domxref("USVString")}}.</p> diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html index 207ba16762..f732fae408 100644 --- a/files/fr/web/api/notification/index.html +++ b/files/fr/web/api/notification/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Notification --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">L'interface Notification de l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</span></p> +<p>L'interface Notification de l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</p> <h2 id="Constructeur">Constructeur</h2> @@ -28,7 +28,7 @@ translation_of: Web/API/Notification <dl> <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> - <dd>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont: + <dd><p>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:</p> <ul> <li><code>denied</code> — L'utilisateur refuse d'afficher des notifications.</li> <li><code>granted</code> — L'utilisateur accepte d'afficher des notifications.</li> @@ -36,6 +36,7 @@ translation_of: Web/API/Notification </ul> </dd> <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt> + <dd>Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.</dd> </dl> <h3 id="Propriétés_de_linstance">Propriétés de l'instance</h3> @@ -112,11 +113,11 @@ translation_of: Web/API/Notification <p>Supposons ce HTML de base:</p> -<pre class="brush: html notranslate"><button onclick="notifyMe()">Notifie moi !</button></pre> +<pre class="brush: html"><button onclick="notifyMe()">Notifie moi !</button></pre> <p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> -<pre class="brush: js notranslate">function notifyMe() { +<pre class="brush: js">function notifyMe() { // Vérifions si le navigateur prend en charge les notifications if (!('Notification' in window)) { alert('Ce navigateur ne prend pas en charge la notification de bureau') @@ -145,8 +146,8 @@ translation_of: Web/API/Notification <p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> +<div class="note"> +<p><strong>Note :</strong> Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html index 91134377e5..3a409d72ff 100644 --- a/files/fr/web/api/notification/lang/index.html +++ b/files/fr/web/api/notification/lang/index.html @@ -12,13 +12,13 @@ translation_of: Web/API/Notification/lang --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p> +<p>La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p> <p>La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">une balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</p> <h2 id="Syntaxz">Syntaxz</h2> -<pre class="syntaxbox notranslate"><var>N</var><var>otification</var>.lang +<pre class="syntaxbox"><var>N</var><var>otification</var>.lang </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html index f780fc27a1..df61031657 100644 --- a/files/fr/web/api/notification/maxactions/index.html +++ b/files/fr/web/api/notification/maxactions/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/maxActions <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.maxActions +<pre class="syntaxbox"><var>Notification</var>.maxActions </pre> <h3 id="Valeur">Valeur</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/Notification/maxActions <p>L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.</p> -<pre class="brush: js notranslate">const { maxActions } = Notification +<pre class="brush: js">const { maxActions } = Notification console.log(`This device can display at most ${maxActions} actions on each notification.`); </pre> diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html index 48578eb688..0e9a988e55 100644 --- a/files/fr/web/api/notification/notification/index.html +++ b/files/fr/web/api/notification/notification/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Notification/Notification <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js syntaxbox">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> +<pre class="brush: js">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre> <h3 id="Paramètres">Paramètres</h3> @@ -48,7 +48,7 @@ translation_of: Web/API/Notification/Notification <p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p> -<pre class="brush: js notranslate">function spawnNotification(body, icon, title) { +<pre class="brush: js">function spawnNotification(body, icon, title) { const options = { body: body, icon: icon diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html index 209d7c519f..b1561a4fe9 100644 --- a/files/fr/web/api/notification/onclick/index.html +++ b/files/fr/web/api/notification/onclick/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Notification/onclick <p>La propriété <strong><code>onclick</code></strong>, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>Notification</em>.onclick = function(event) { ... }; </pre> diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html index 5d5edbde16..5dddd078f3 100644 --- a/files/fr/web/api/notification/onclose/index.html +++ b/files/fr/web/api/notification/onclose/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Notification/onclose --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</span></p> +<p>La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.onclose = function(event) { ... } +<pre class="syntaxbox"><var>Notification</var>.onclose = function(event) { ... } Notification.onclose = (event) => { ... } </pre> diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html index 476e5cb9d7..af9115de5b 100644 --- a/files/fr/web/api/notification/onerror/index.html +++ b/files/fr/web/api/notification/onerror/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Notification/onerror --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}}</span> (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p> +<p>La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}} (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.onerror = function(event) { ... } +<pre class="syntaxbox"><var>Notification</var>.onerror = function(event) { ... } <var>Notification</var>.onerror = (even) => { ... } </pre> diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html index bdb0953b6f..a0a38caf41 100644 --- a/files/fr/web/api/notification/onshow/index.html +++ b/files/fr/web/api/notification/onshow/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/Notification/onshow --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</span></p> +<p>La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.onshow = function() { ... } +<pre class="syntaxbox"><var>Notification</var>.onshow = function() { ... } <var>Notification</var>.onshow = () => { ... } </pre> diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html index 55405894aa..603a7cdb3c 100644 --- a/files/fr/web/api/notification/permission/index.html +++ b/files/fr/web/api/notification/permission/index.html @@ -12,13 +12,13 @@ translation_of: Web/API/Notification/permission --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</span></p> +<p>La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate">Notification.permission</pre> +<pre class="syntaxbox">Notification.permission</pre> -<h3 id="Return_Value" name="Return_Value">Valeur</h3> +<h3 id="Return_Value">Valeur</h3> <p>Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:</p> @@ -32,7 +32,7 @@ translation_of: Web/API/Notification/permission <p>L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> -<pre class="brush: js notranslate">function notifyMe() { +<pre class="brush: js">function notifyMe() { // Let's check if the browser supports notifications if (!('Notification' in window)) { console.log('This browser does not support desktop notification') diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html index a79c385380..ebd7bb4492 100644 --- a/files/fr/web/api/notification/renotify/index.html +++ b/files/fr/web/api/notification/renotify/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Notification/renotify --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</span></p> +<p>La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.renotify +<pre class="syntaxbox"><var>Notification</var>.renotify </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html index b5b1222762..e8d71e4a90 100644 --- a/files/fr/web/api/notification/requestpermission/index.html +++ b/files/fr/web/api/notification/requestpermission/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Notification/requestPermission <p><strong>Note:</strong> Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> +<div class="note"> +<p><strong>Note :</strong> Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p> </div> -<p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p> +<p>La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -54,11 +54,11 @@ translation_of: Web/API/Notification/requestPermission <p>Supposons ce HTML de base:</p> -<pre class="brush: html notranslate"><button onclick="notifyMe()">Notifie moi !</button></pre> +<pre class="brush: html"><button onclick="notifyMe()">Notifie moi !</button></pre> <p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p> -<pre class="brush: js notranslate">function notifyMe() { +<pre class="brush: js">function notifyMe() { // Vérifions si le navigateur prend en charge les notifications if (!('Notification' in window)) { alert('Ce navigateur ne prend pas en charge la notification de bureau') @@ -87,8 +87,8 @@ translation_of: Web/API/Notification/requestPermission <p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> +<div class="note"> +<p><strong>Note :</strong> Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html index d598a97269..80eacf5f84 100644 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ b/files/fr/web/api/notification/requireinteraction/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Notification/requireInteraction <p>La propriété en lecture seule <strong><code>requireInteraction</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option <code>requireInteraction</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="brush: js notranslate">Notification.requireInteraction</pre> +<pre class="brush: js">Notification.requireInteraction</pre> -<h3 id="Return_Value" name="Return_Value">Valeur</h3> +<h3 id="Return_Value">Valeur</h3> <p>Un {{jsxref("Boolean")}}.</p> diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html index 5452c77398..d97cde7bd4 100644 --- a/files/fr/web/api/notification/silent/index.html +++ b/files/fr/web/api/notification/silent/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Notification/silent --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p> +<p>La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.silent +<pre class="syntaxbox"><var>Notification</var>.silent </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html index 7794c70e61..7c5196d714 100644 --- a/files/fr/web/api/notification/tag/index.html +++ b/files/fr/web/api/notification/tag/index.html @@ -20,7 +20,7 @@ translation_of: Web/API/Notification/tag <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.tag +<pre class="syntaxbox"><var>Notification</var>.tag </pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html index ca54bf330c..8218d858d6 100644 --- a/files/fr/web/api/notification/timestamp/index.html +++ b/files/fr/web/api/notification/timestamp/index.html @@ -14,15 +14,15 @@ translation_of: Web/API/Notification/timestamp --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p> +<p>La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</p> <p>L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.timestamp</pre> +<pre class="syntaxbox"><var>Notification</var>.timestamp</pre> -<h3 id="Return_Value" name="Return_Value">Valeur</h3> +<h3 id="Return_Value">Valeur</h3> <p>Un {{domxref("DOMTimeStamp")}}.</p> diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html index 40edbb0790..ba07a05630 100644 --- a/files/fr/web/api/notification/title/index.html +++ b/files/fr/web/api/notification/title/index.html @@ -14,11 +14,11 @@ translation_of: Web/API/Notification/title --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</span></p> +<p>La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.title</pre> +<pre class="syntaxbox"><var>Notification</var>.title</pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html index f9945d7c8a..d9bae90120 100644 --- a/files/fr/web/api/notification/vibrate/index.html +++ b/files/fr/web/api/notification/vibrate/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Notification/vibrate --- <p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</span></p> +<p>La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>Notification</var>.vibrate +<pre class="syntaxbox"><var>Notification</var>.vibrate </pre> -<h3 id="Return_Value" name="Return_Value">Valeur</h3> +<h3 id="Return_Value">Valeur</h3> <p>Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p> diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html index 1a5dc8eb8e..6d8129b9d8 100644 --- a/files/fr/web/api/notifications_api/index.html +++ b/files/fr/web/api/notifications_api/index.html @@ -10,29 +10,29 @@ translation_of: Web/API/Notifications_API --- <p>{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p> -<p class="summary"><span class="seoSummary">L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.</span></p> +<p>L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.</p> <h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> <p>Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:</p> -<pre class="brush: js notranslate">btn.addEventListener('click', () => { +<pre class="brush: js">btn.addEventListener('click', () => { let promise = Notification.requestPermission() // wait for permission })</pre> -<div class="blockIndicator note"> -<p>Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> +<div class="note"> +<p><strong>Note :</strong> Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p> </div> <p>Cela créera une boîte de dialogue, proche de cette apparence:</p> -<p><img alt="" src="screen_shot_2019-12-11_at_9.59.14_am.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="screen_shot_2019-12-11_at_9.59.14_am.png"></p> <p>De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.</p> <div class="note"> -<p><strong>Note</strong>: Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.</p> +<p><strong>Note :</strong> Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.</p> </div> <p>Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.</p> @@ -40,7 +40,7 @@ translation_of: Web/API/Notifications_API <p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p> <div class="note"> -<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> +<p><strong>Note :</strong> Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p> </div> <h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2> diff --git a/files/fr/web/api/notifyaudioavailableevent/index.html b/files/fr/web/api/notifyaudioavailableevent/index.html index 2b388ba495..ad2b4365e2 100644 --- a/files/fr/web/api/notifyaudioavailableevent/index.html +++ b/files/fr/web/api/notifyaudioavailableevent/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/NotifyAudioAvailableEvent --- <div>{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}</div> -<p><span class="seoSummary">L'interface <code><strong>NotifyAudioAvailableEvent</strong></code> non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.</span></p> +<p>L'interface <code><strong>NotifyAudioAvailableEvent</strong></code> non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.</p> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html index 048267b45a..80b1b067f5 100644 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.html +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.html @@ -88,5 +88,5 @@ original_slug: Web/Events/complete <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li> + <li><a href="/fr/docs/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/fr/web/api/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html index f5565c502c..fa540f07d4 100644 --- a/files/fr/web/api/offscreencanvas/index.html +++ b/files/fr/web/api/offscreencanvas/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/OffscreenCanvas <p>L'interface <code>OffscreenCanvas</code> fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et <a href="/fr-FR/docs/Web/API/Web_Workers_API">worker</a>.</p> <div class="note"> -<p><strong>Note </strong>: Cette API n'est actuellement implémentée que pour les contextes <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGL1</a> et<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL2</a>. Voir {{bug(801176)}} pour le support de l'<a href="/fr-FR/docs/Web/API/Canvas_API">API canvas</a> depuis les workers.</p> +<p><strong>Note :</strong> Cette API n'est actuellement implémentée que pour les contextes <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGL1</a> et<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL2</a>. Voir {{bug(801176)}} pour le support de l'<a href="/fr-FR/docs/Web/API/Canvas_API">API canvas</a> depuis les workers.</p> </div> <h2 id="Constructeur">Constructeur</h2> diff --git a/files/fr/web/api/oscillatornode/index.html b/files/fr/web/api/oscillatornode/index.html index 0c28e27ee9..c4293946c4 100644 --- a/files/fr/web/api/oscillatornode/index.html +++ b/files/fr/web/api/oscillatornode/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/OscillatorNode <p>L'interface <code>OscillatorNode</code> représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.</p> -<p>On crée un <code style="font-size: 14px;">OscillatorNode</code> en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :</p> +<p>On crée un <code>OscillatorNode</code> en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :</p> <ul> <li>Nombre d'entrées : <code>0</code></li> diff --git a/files/fr/web/api/page_visibility_api/index.html b/files/fr/web/api/page_visibility_api/index.html index 01ae056bdf..0443a0061a 100644 --- a/files/fr/web/api/page_visibility_api/index.html +++ b/files/fr/web/api/page_visibility_api/index.html @@ -5,7 +5,9 @@ translation_of: Web/API/Page_Visibility_API --- <div>{{DefaultAPISidebar("Page Visibility API")}}</div> -<p><span class="seoSummary"><strong>L’API <em>Page Visibility</em></strong> (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.</span> Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.</p> +<p><strong>L’API <em>Page Visibility</em></strong> (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.</p> + +<p>Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.</p> <p>L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.</p> @@ -106,25 +108,16 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden = <h2 id="Propriétés">Propriétés</h2> <dl> - <dt> - <p id="document.hidden_Read_only">{{domxref("document.hidden")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p> - </dt> - <dd> - <p>Retourne <code>true</code> si la page est dans un état considéré comme masqué à l’utilisateur, et <code>false</code> dans le cas contraire.</p> - </dd> - <dt> - <p id="document.visibilityState_Read_only">{{domxref("document.visibilityState")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p> - </dt> - <dd> - <p>Une <code>string</code> représentant l’état de visibilité du document. Valeurs possibles :</p> - + <dt>{{domxref("document.hidden")}}</dt> + <dd><p>Retourne <code>true</code> si la page est dans un état considéré comme masqué à l’utilisateur, et <code>false</code> dans le cas contraire.</p></dd> + <dt>{{domxref("document.visibilityState")}}</dt> + <dd><p>Une <code>string</code> représentant l’état de visibilité du document. Valeurs possibles :</p> <ul> <li><code>visible</code> : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.</li> <li><code>hidden</code> : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.</li> <li><code>prerender</code> : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour <code>document.hidden</code>). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.</li> <li><code>unloaded</code> : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.</li> </ul> - <pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere function handleVisibilityChange() { if (document.hidden) { @@ -133,16 +126,10 @@ function handleVisibilityChange() { startSimulation(); } } - document.addEventListener("visibilitychange", handleVisibilityChange, false); -</pre> - </dd> - <dt> - <p>{{domxref("document.onvisibilitychange")}}</p> - </dt> - <dd> - <p>Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.</p> - </dd> +</pre></dd> + <dt>{{domxref("document.onvisibilitychange")}}</dt> + <dd>Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.</dd> </dl> <h2 id="Specifications">Spécifications</h2> @@ -171,6 +158,6 @@ document.addEventListener("visibilitychange", handleVisibilityChange, false); <h2 id="See_also">Voir aussi</h2> <ul> - <li>La description de <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">l’API Page Visibility</a> sur l’IEBlog</li> - <li>La description de <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">l’API Page Visibility</a> par Google</li> + <li>La description de <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx">l’API Page Visibility</a> sur l’IEBlog</li> + <li>La description de <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html">l’API Page Visibility</a> par Google</li> </ul> diff --git a/files/fr/web/api/pagetransitionevent/index.html b/files/fr/web/api/pagetransitionevent/index.html index 88e918b253..b679c056dd 100644 --- a/files/fr/web/api/pagetransitionevent/index.html +++ b/files/fr/web/api/pagetransitionevent/index.html @@ -48,7 +48,7 @@ translation_of: Web/API/PageTransitionEvent <p>L’objet <strong>PageTransitionEvent</strong> possède les propriétés suivantes :</p> -<table class="members" id="memberListProperties"> +<table> <tbody> <tr> <th>Propriété</th> diff --git a/files/fr/web/api/payment_request_api/index.html b/files/fr/web/api/payment_request_api/index.html index 78434d825c..5712ce4c57 100644 --- a/files/fr/web/api/payment_request_api/index.html +++ b/files/fr/web/api/payment_request_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Payment_Request_API --- <div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div> -<p><span class="seoSummary">L'API <em>Payment Request</em> fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.</span></p> +<p>L'API <em>Payment Request</em> fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.</p> <h2 id="Concepts_et_usages_de_l'API_Payment_Request">Concepts et usages de l'API <em>Payment Request</em></h2> @@ -26,7 +26,7 @@ translation_of: Web/API/Payment_Request_API <p>Vous pouvez trouver un guide complet dans l'article <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p> <div class="note"> -<p><strong>Note</strong>: L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}.</p> + <p><strong>Note :</strong> L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}.</p> </div> <h2 id="Interfaces">Interfaces</h2> diff --git a/files/fr/web/api/performance/clearmarks/index.html b/files/fr/web/api/performance/clearmarks/index.html index 31634399f9..81571fb42e 100644 --- a/files/fr/web/api/performance/clearmarks/index.html +++ b/files/fr/web/api/performance/clearmarks/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/clearMarks --- <div>{{APIRef("User Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>clearMarks()</code></strong> supprime les <em>marqueurs nommés</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « <code>mark</code> » seront supprimées du tampon d'entrée de performance.</p> +<p>La méthode <strong><code>clearMarks()</code></strong> supprime les <em>marqueurs nommés</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « <code>mark</code> » seront supprimées du tampon d'entrée de performance.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/clearmeasures/index.html b/files/fr/web/api/performance/clearmeasures/index.html index c63eff637d..0748baa2b2 100644 --- a/files/fr/web/api/performance/clearmeasures/index.html +++ b/files/fr/web/api/performance/clearmeasures/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/clearMeasures --- <div>{{APIRef("User Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>clearMeasures()</code></strong> supprime les <em>mesures nommées</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>measure</code> » seront supprimées du tampon d'entrée de performance.</p> +<p>La méthode <strong><code>clearMeasures()</code></strong> supprime les <em>mesures nommées</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>measure</code> » seront supprimées du tampon d'entrée de performance.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/clearresourcetimings/index.html b/files/fr/web/api/performance/clearresourcetimings/index.html index a6da2caf50..b7a87a662a 100644 --- a/files/fr/web/api/performance/clearresourcetimings/index.html +++ b/files/fr/web/api/performance/clearresourcetimings/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/clearResourceTimings --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>clearResourceTimings()</code></strong> supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>resource</code> » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.</p> +<p>La méthode <strong><code>clearResourceTimings()</code></strong> supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>resource</code> » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/getentries/index.html b/files/fr/web/api/performance/getentries/index.html index 2cebfda905..1cf2fd1832 100644 --- a/files/fr/web/api/performance/getentries/index.html +++ b/files/fr/web/api/performance/getentries/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/getEntries --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="seoSummary">La méthode <strong><code>getEntries()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (<em>entrées</em>) peuvent être créés en faisant des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.</p> +<p>La méthode <strong><code>getEntries()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (<em>entrées</em>) peuvent être créés en faisant des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/getentriesbyname/index.html b/files/fr/web/api/performance/getentriesbyname/index.html index c01ee9b633..ac125fe6be 100644 --- a/files/fr/web/api/performance/getentriesbyname/index.html +++ b/files/fr/web/api/performance/getentriesbyname/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/getEntriesByName --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="seoSummary">La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> +<p>La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/getentriesbytype/index.html b/files/fr/web/api/performance/getentriesbytype/index.html index 4f06729f3c..3644cd0f60 100644 --- a/files/fr/web/api/performance/getentriesbytype/index.html +++ b/files/fr/web/api/performance/getentriesbytype/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/getEntriesByType --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="seoSummary">La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> +<p>La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html index 46d8e44241..3de85d05ed 100644 --- a/files/fr/web/api/performance/index.html +++ b/files/fr/web/api/performance/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Performance --- <div>{{APIRef("High Resolution Time")}}</div> -<p class="seoSummary">L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs <a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/fr/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p> +<p>L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs <a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/fr/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p> <p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.</p> -<div class="notecard note"> +<div class="note"> <p><strong>Note :</strong> Cette interface et ses attributs sont accessibles aux <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a> via <code><a href="/fr/docs/Web/API/WorkerGlobalScope/performance">WorkerGlobalScope.performance</a></code> sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p> </div> @@ -29,8 +29,8 @@ translation_of: Web/API/Performance </dt> <dd> {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… - <div class="notecard note"> - <p>Indisponible dans les Web Workers.</p> + <div class="note"> + <p><strong>Note :</strong> Indisponible dans les Web Workers.</p> </div> </dd> <dt> @@ -38,8 +38,8 @@ translation_of: Web/API/Performance </dt> <dd> {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. - <div class="notecard note"> - <p>Indisponible dans les Web Workers.</p> + <div class="note"> + <p><strong>Note :</strong> Indisponible dans les Web Workers.</p> </div> </dd> <dt> diff --git a/files/fr/web/api/performance/mark/index.html b/files/fr/web/api/performance/mark/index.html index cdf21108b8..c33a169606 100644 --- a/files/fr/web/api/performance/mark/index.html +++ b/files/fr/web/api/performance/mark/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/mark --- <div>{{APIRef("User Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>mark()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le <em>tampon d'entrée de performance</em> du navigateur avec le nom donné en argument.</p> +<p>La méthode <strong><code>mark()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le <em>tampon d'entrée de performance</em> du navigateur avec le nom donné en argument.</p> <p>L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes <code>getEntries*()</code> de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).</p> diff --git a/files/fr/web/api/performance/measure/index.html b/files/fr/web/api/performance/measure/index.html index 5809124222..74ab333134 100644 --- a/files/fr/web/api/performance/measure/index.html +++ b/files/fr/web/api/performance/measure/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Performance/measure --- <div>{{APIRef("User Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>measure()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le <em>tampon d'entrée de performance</em> du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un <em>marqueur de début</em> et un <em>marqueur de fin</em>. L'horodatage ainsi nommé est désigné comme une <em>mesure</em>.</p> +<p>La méthode <strong><code>measure()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le <em>tampon d'entrée de performance</em> du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un <em>marqueur de début</em> et un <em>marqueur de fin</em>. L'horodatage ainsi nommé est désigné comme une <em>mesure</em>.</p> <p>La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.</p> diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html index be37b1487a..b3487091fd 100644 --- a/files/fr/web/api/performance/navigation/index.html +++ b/files/fr/web/api/performance/navigation/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/Performance/navigation --- <p>{{Deprecated_Header}}{{APIRef("Navigation Timing")}}</p> -<div class="notecard warning"> - <p>Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>.</p> </div> -<p class="seoSummary">L'ancienne propriété en lecture seule <strong><code>Performance.navigation</code></strong> renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.</p> +<p>L'ancienne propriété en lecture seule <strong><code>Performance.navigation</code></strong> renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.</p> {{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html index ae539c7f07..0505c4a6cd 100644 --- a/files/fr/web/api/performance/now/index.html +++ b/files/fr/web/api/performance/now/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Performance/now --- <p>{{APIRef("High Resolution Timing")}}</p> -<p class="seoSummary">La méthode <code><strong>Performance.now()</strong></code> retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).</p> +<p>La méthode <code><strong>Performance.now()</strong></code> retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html index 8a8d8bc117..c45a75f39a 100644 --- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html +++ b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/onresourcetimingbufferfull --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="seoSummary">La propriété <strong><code>onresourcetimingbufferfull</code></strong> est un gestionnaire d'événements qui sera appelé lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.</p> +<p>La propriété <strong><code>onresourcetimingbufferfull</code></strong> est un gestionnaire d'événements qui sera appelé lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html index 08c648e36d..d23ab10aaf 100644 --- a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html +++ b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Performance/resourcetimingbufferfull_event --- <div>{{APIRef}}</div> -<p class="seoSummary">L'événement <code>resourcetimingbufferfull</code> se déclenche lorsque la mémoire <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est pleine.</p> +<p>L'événement <code>resourcetimingbufferfull</code> se déclenche lorsque la mémoire <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est pleine.</p> <table class="properties"> <tbody> diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html index 2f5d479c31..ba6d23eebe 100644 --- a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html +++ b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/setResourceTimingBufferSize --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="seoSummary">La méthode <strong><code>setResourceTimingBufferSize()</code></strong> définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type <code>"resource"</code> (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).</p> +<p>La méthode <strong><code>setResourceTimingBufferSize()</code></strong> définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type <code>"resource"</code> (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).</p> <p>La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets <code>{{domxref("PerformanceEntry")}}</code>.</p> diff --git a/files/fr/web/api/performance/timeorigin/index.html b/files/fr/web/api/performance/timeorigin/index.html index 77ab71c3b6..014045da71 100644 --- a/files/fr/web/api/performance/timeorigin/index.html +++ b/files/fr/web/api/performance/timeorigin/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Performance/getEntriesByName --- <p>{{SeeCompatTable}}{{APIRef("High Resolution Time")}}</p> -<p class="seoSummary">La propriété en lecture seule <strong><code>timeOrigin</code></strong> de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.</p> +<p>La propriété en lecture seule <strong><code>timeOrigin</code></strong> de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance/timing/index.html b/files/fr/web/api/performance/timing/index.html index cc26164e41..583aecd811 100644 --- a/files/fr/web/api/performance/timing/index.html +++ b/files/fr/web/api/performance/timing/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/Performance/timing --- <p>{{deprecated_header}}{{APIRef("Navigation Timing")}}</p> -<div class="notecard warning"> - <p>Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.</p> +<div class="warning"> + <p><strong>Attention :</strong> Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.</p> </div> -<p class="seoSummary">L'ancienne propriété <strong><code>Performance.timing</code></strong> renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.</p> +<p>L'ancienne propriété <strong><code>Performance.timing</code></strong> renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.</p> {{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} diff --git a/files/fr/web/api/performance/tojson/index.html b/files/fr/web/api/performance/tojson/index.html index 6cf32a8077..3136d2d867 100644 --- a/files/fr/web/api/performance/tojson/index.html +++ b/files/fr/web/api/performance/tojson/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Performance/toJSON --- <div>{{APIRef("High Resolution Timing")}}</div> -<p class="seoSummary">La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.</p> +<p>La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performance_api/index.html b/files/fr/web/api/performance_api/index.html index adcb3ced5c..261219a03b 100644 --- a/files/fr/web/api/performance_api/index.html +++ b/files/fr/web/api/performance_api/index.html @@ -11,7 +11,9 @@ translation_of: Web/API/Performance_API --- <div>{{DefaultAPISidebar("High Resolution Time")}}</div> -<p class="summary"><span class="seoSummary">La norme <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> définit l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont considérées comme étant à <em>haute résolution</em>, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).</span> Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).</p> +<p>La norme <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> définit l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont considérées comme étant à <em>haute résolution</em>, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).</p> + +<p>Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).</p> <p>Comme l'<em>horloge système</em> d'une plateforme est sujette à divers <em>décalages</em> (comme les ajustements NTP), les interfaces prennent en charge une <em>horloge monotone</em>, c'est-à-dire une horloge toujours croissante. À ce titre, l'API <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> définit un type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.</p> diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.html b/files/fr/web/api/performance_api/using_the_performance_api/index.html index 7386e4081a..19924b66cc 100644 --- a/files/fr/web/api/performance_api/using_the_performance_api/index.html +++ b/files/fr/web/api/performance_api/using_the_performance_api/index.html @@ -11,7 +11,9 @@ translation_of: Web/API/Performance_API/Using_the_Performance_API --- <div>{{DefaultAPISidebar("High Resolution Time")}}</div> -<p class="summary"><span class="seoSummary">Une exigence fondamentale de la performance web est une définition précise et cohérente du <em>temps.</em> Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un <code>double</code>) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.</span> En outre, il doit y avoir un moyen de créer une <em>empreinte temporelle</em> pour un point spécifique dans le temps ; ceci est fait avec la méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a>.</p> +<p>Une exigence fondamentale de la performance web est une définition précise et cohérente du <em>temps.</em> Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un <code>double</code>) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.</p> + +<p>En outre, il doit y avoir un moyen de créer une <em>empreinte temporelle</em> pour un point spécifique dans le temps ; ceci est fait avec la méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a>.</p> <p>Les interfaces de performance web sont définies dans un <a href="https://www.w3.org/wiki/Web_Performance/Publications">ensemble de normes</a>. L'interface <em>de base</em> de ces normes est l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui sont définies dans la norme <a href="https://w3c.github.io/hr-time/">High-Resolution Time</a>. D'autres guides sur les performances web (répertoriés dans la section <a href="#see_also">Voir aussi</a>) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>.</p> diff --git a/files/fr/web/api/performance_timeline/index.html b/files/fr/web/api/performance_timeline/index.html index 0d6975484b..db39bbf9bd 100644 --- a/files/fr/web/api/performance_timeline/index.html +++ b/files/fr/web/api/performance_timeline/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Performance_Timeline --- <div>{{DefaultAPISidebar("Performance Timeline API")}}</div> -<p class="summary"><span class="seoSummary">L'API <strong>Performance Timeline</strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les <a href="/fr/docs/Web/API/PerformanceEntry">paramètres de saisie des performances</a> en fonction de critères de filtrage spécifiques.</span> La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'<em><a href="#performance_observers">observateur des performances</a></em>, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la <em>chronologie des performances</em> du navigateur.</p> +<p>L'API <strong>Performance Timeline</strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les <a href="/fr/docs/Web/API/PerformanceEntry">paramètres de saisie des performances</a> en fonction de critères de filtrage spécifiques.</p> + +<p>La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'<em><a href="#performance_observers">observateur des performances</a></em>, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la <em>chronologie des performances</em> du navigateur.</p> <p>Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et <a href="/fr/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">Utilisation de Performance Timeline</a>.</p> @@ -59,7 +61,9 @@ translation_of: Web/API/Performance_Timeline <p>Outre la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> (qui sert à enregistrer les <a href="/fr/docs/Web/API/PerformanceEntry">types d'entrées</a> pour <em>observer</em>), l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> possède également une méthode <a href="/fr/docs/Web/API/PerformanceObserver/disconnect"><code>disconnect()</code></a> qui empêche un observateur de recevoir d'autres événements.</p> -<p class="notecard note">Les observateurs de performance ont été ajoutés au <code>Niveau 2</code> de la norme et n'ont pas été implémentés à grande échelle.</p> +<div class="note"> + <p><strong>Note :</strong> Les observateurs de performance ont été ajoutés au <code>Niveau 2</code> de la norme et n'ont pas été implémentés à grande échelle.</p> +</div> <h2 id="Implementation_status">État de la mise en œuvre</h2> diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html index d765a543c8..c3554f1927 100644 --- a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html +++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html @@ -10,7 +10,9 @@ translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline --- <div>{{DefaultAPISidebar("Performance Timeline API")}}</div> -<p><span class="seoSummary">La norme <strong><a href="https://w3c.github.io/performance-timeline/">Performance Timeline</a></strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client au sein des applications.</span> La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.</p> +<p>La norme <strong><a href="https://w3c.github.io/performance-timeline/">Performance Timeline</a></strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client au sein des applications.</p> + +<p>La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.</p> <h2 id="Performance_extensions">Extensions de <code>Performance</code></h2> diff --git a/files/fr/web/api/performanceelementtiming/element/index.html b/files/fr/web/api/performanceelementtiming/element/index.html index fc8b8119f5..1a40658ff7 100644 --- a/files/fr/web/api/performanceelementtiming/element/index.html +++ b/files/fr/web/api/performanceelementtiming/element/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/element --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p> +<p>La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/element }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/id/index.html b/files/fr/web/api/performanceelementtiming/id/index.html index 36e2a07b92..f3083cd256 100644 --- a/files/fr/web/api/performanceelementtiming/id/index.html +++ b/files/fr/web/api/performanceelementtiming/id/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/id --- <div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p> +<p>La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ let entries = list.getEntries().forEach(function (entry) { }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.html b/files/fr/web/api/performanceelementtiming/identifier/index.html index 9c07117bb3..1fb524cf4f 100644 --- a/files/fr/web/api/performanceelementtiming/identifier/index.html +++ b/files/fr/web/api/performanceelementtiming/identifier/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/identifier --- <div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p> +<p>La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/identifier }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/index.html b/files/fr/web/api/performanceelementtiming/index.html index 03a76a40a5..3a591036d7 100644 --- a/files/fr/web/api/performanceelementtiming/index.html +++ b/files/fr/web/api/performanceelementtiming/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/PerformanceElementTiming --- <div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div> -<p class="summary">L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p> +<p>L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p> <h2 id="Properties">Propriétés</h2> diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html index b37c4e77ea..4954876475 100644 --- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html +++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/intersectionRect --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p> +<p>La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p> <h2 id="Syntax">Syntaxe</h2> @@ -38,7 +38,9 @@ translation_of: Web/API/PerformanceElementTiming/intersectionRect }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.html b/files/fr/web/api/performanceelementtiming/loadtime/index.html index 797edea2d3..28e33d6384 100644 --- a/files/fr/web/api/performanceelementtiming/loadtime/index.html +++ b/files/fr/web/api/performanceelementtiming/loadtime/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/loadTime --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p> +<p>La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/loadTime }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.html b/files/fr/web/api/performanceelementtiming/naturalheight/index.html index ac66fb44ae..204efdc562 100644 --- a/files/fr/web/api/performanceelementtiming/naturalheight/index.html +++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/naturalHeight --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p> +<p>La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/naturalHeight }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html index e284faba40..3e254d3289 100644 --- a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html +++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/naturalWidth --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p> +<p>La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p> <h2 id="Syntax">Syntax</h2> <pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre> @@ -35,7 +35,9 @@ translation_of: Web/API/PerformanceElementTiming/naturalWidth }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Specifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.html b/files/fr/web/api/performanceelementtiming/rendertime/index.html index 5e7d247e5a..b541771563 100644 --- a/files/fr/web/api/performanceelementtiming/rendertime/index.html +++ b/files/fr/web/api/performanceelementtiming/rendertime/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/renderTime --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p> +<p>La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p> <h2 id="Syntax">Syntaxe</h2> @@ -40,7 +40,9 @@ translation_of: Web/API/PerformanceElementTiming/renderTime }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.html b/files/fr/web/api/performanceelementtiming/tojson/index.html index 6d0ff16b06..b0dd7affae 100644 --- a/files/fr/web/api/performanceelementtiming/tojson/index.html +++ b/files/fr/web/api/performanceelementtiming/tojson/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/toJSON --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p> +<p>La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p> <h2 id="Syntax">Syntaxe</h2> @@ -40,7 +40,9 @@ translation_of: Web/API/PerformanceElementTiming/toJSON }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceelementtiming/url/index.html b/files/fr/web/api/performanceelementtiming/url/index.html index ed02583ec0..6828122328 100644 --- a/files/fr/web/api/performanceelementtiming/url/index.html +++ b/files/fr/web/api/performanceelementtiming/url/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceElementTiming/url --- <div>{{APIRef("Element Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p> +<p>La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p> <h2 id="Syntax">Syntaxe</h2> @@ -36,7 +36,9 @@ translation_of: Web/API/PerformanceElementTiming/url }); observer.observe({ entryTypes: ["element"] });</pre> -<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +<div class="note"> + <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p> +</div> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/performanceentry/duration/index.html b/files/fr/web/api/performanceentry/duration/index.html index 14b9f3e4e7..8fa0aa4edf 100644 --- a/files/fr/web/api/performanceentry/duration/index.html +++ b/files/fr/web/api/performanceentry/duration/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceEntry/duration --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La propriété <strong><code>duration</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> +<p>La propriété <strong><code>duration</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceentry/entrytype/index.html b/files/fr/web/api/performanceentry/entrytype/index.html index f2223e82cd..63ed9dc6c7 100644 --- a/files/fr/web/api/performanceentry/entrytype/index.html +++ b/files/fr/web/api/performanceentry/entrytype/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceEntry/entryType --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La propriété <strong><code>entryType</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance tel que, par exemple, « <code>mark</code> ». Cette propriété est en lecture seule.</p> +<p>La propriété <strong><code>entryType</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance tel que, par exemple, « <code>mark</code> ». Cette propriété est en lecture seule.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceentry/index.html b/files/fr/web/api/performanceentry/index.html index 1e7ef376ea..32e388a73b 100644 --- a/files/fr/web/api/performanceentry/index.html +++ b/files/fr/web/api/performanceentry/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceEntry --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">L'objet <strong><code>PerformanceEntry</code></strong> encapsule une seule mesure de performance qui fait partie de la <em>chronologie de performance</em>. Une <em>entrée de performance</em> peut être créée directement en faisant <em><a href="/fr/docs/Web/API/PerformanceMark">une marque</a></em> ou <em><a href="/fr/docs/Web/API/PerformanceMeasure">une mesure</a></em> (par exemple en appelant la méthode <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).</p> +<p>L'objet <strong><code>PerformanceEntry</code></strong> encapsule une seule mesure de performance qui fait partie de la <em>chronologie de performance</em>. Une <em>entrée de performance</em> peut être créée directement en faisant <em><a href="/fr/docs/Web/API/PerformanceMark">une marque</a></em> ou <em><a href="/fr/docs/Web/API/PerformanceMeasure">une mesure</a></em> (par exemple en appelant la méthode <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).</p> <p>Les instances <code>PerformanceEntry</code> auront toujours l'un des sous-types suivants :</p> diff --git a/files/fr/web/api/performanceentry/name/index.html b/files/fr/web/api/performanceentry/name/index.html index 1683f51f51..6e8c05fe4e 100644 --- a/files/fr/web/api/performanceentry/name/index.html +++ b/files/fr/web/api/performanceentry/name/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceEntry/name --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La propriété <strong><code>name</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> renvoie une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. Cette propriété est en lecture seule.</p> +<p>La propriété <strong><code>name</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> renvoie une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. Cette propriété est en lecture seule.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceentry/starttime/index.html b/files/fr/web/api/performanceentry/starttime/index.html index 864d4ac068..e8f625d52f 100644 --- a/files/fr/web/api/performanceentry/starttime/index.html +++ b/files/fr/web/api/performanceentry/starttime/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceEntry/startTime --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La propriété <strong><code>startTime</code></strong> renvoie le premier <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> enregistré pour l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> +<p>La propriété <strong><code>startTime</code></strong> renvoie le premier <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> enregistré pour l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceentry/tojson/index.html b/files/fr/web/api/performanceentry/tojson/index.html index 13a8c3bb5e..9450e8f3f0 100644 --- a/files/fr/web/api/performanceentry/tojson/index.html +++ b/files/fr/web/api/performanceentry/tojson/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceEntry/toJSON --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La méthode <strong><code>toJSON()</code></strong> permet de sérialiser l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> courant et renvoie une représentation JSON de l'objet.</p> +<p>La méthode <strong><code>toJSON()</code></strong> permet de sérialiser l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> courant et renvoie une représentation JSON de l'objet.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceeventtiming/index.html b/files/fr/web/api/performanceeventtiming/index.html index 083b200b42..117fefc656 100644 --- a/files/fr/web/api/performanceeventtiming/index.html +++ b/files/fr/web/api/performanceeventtiming/index.html @@ -13,10 +13,9 @@ translation_of: Web/API/PerformanceEventTiming --- <div>{{APIRef("Event Timing API")}}</div> -<p class="summary">L'interface <code>PerformanceEventTiming</code> des événements de l'<code>Event Timing API</code> fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.</p> +<p>L'interface <code>PerformanceEventTiming</code> des événements de l'<code>Event Timing API</code> fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.</p> -<div class="index"> - <ul> +<ul> <li><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></li> <li><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event"><code>beforeinput</code></a></li> <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li> @@ -53,8 +52,7 @@ translation_of: Web/API/PerformanceEventTiming <li><a href="/fr/docs/Web/API/Document/touchstart_event"><code>touchstart</code></a></li> <li><a href="/fr/docs/Web/API/Document/touchend_event"><code>touchend</code></a></li> <li><a href="/fr/docs/Web/API/Document/touchcancel_event"><code>touchcancel</code></a></li> - </ul> -</div> +</ul> <h2 id="Properties">Propriétés</h2> diff --git a/files/fr/web/api/performanceframetiming/index.html b/files/fr/web/api/performanceframetiming/index.html index 118c7296ff..e1c86e7c39 100644 --- a/files/fr/web/api/performanceframetiming/index.html +++ b/files/fr/web/api/performanceframetiming/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceFrameTiming --- <div>{{SeeCompatTable}}{{APIRef("Frame Timing API")}}</div> -<p class="summary"><strong><code>PerformanceFrameTiming</code></strong> est une interface <em>abstraite</em> qui fournit des données d'horodatage de « <em>frame</em> » pour la boucle d'événements du navigateur. Une « <em>frame</em> » représente la quantité de travail qu'un navigateur effectue dans <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">une itération de la boucle d'événements</a>, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un <i>frame rate</i> de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.</p> +<p><strong><code>PerformanceFrameTiming</code></strong> est une interface <em>abstraite</em> qui fournit des données d'horodatage de « <em>frame</em> » pour la boucle d'événements du navigateur. Une « <em>frame</em> » représente la quantité de travail qu'un navigateur effectue dans <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">une itération de la boucle d'événements</a>, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un <i>frame rate</i> de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.</p> <p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour une « <code>frame</code> » de <a href="/fr/docs/Web/API/PerformanceEntry">l'entrée de performance</a> et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.</p> diff --git a/files/fr/web/api/performancemark/index.html b/files/fr/web/api/performancemark/index.html index d258deec2b..c8f1c80399 100644 --- a/files/fr/web/api/performancemark/index.html +++ b/files/fr/web/api/performancemark/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/PerformanceMark --- <div>{{APIRef("User Timing API")}}</div> -<p class="summary"><code><strong>PerformanceMark</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>mark</code> ».Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (le <em>marqueur</em>) à la <em>chronologie des performances</em> du navigateur.</p> +<p><code><strong>PerformanceMark</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>mark</code> ».Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (le <em>marqueur</em>) à la <em>chronologie des performances</em> du navigateur.</p> <p>{{InheritanceDiagram}}</p> diff --git a/files/fr/web/api/performancemeasure/index.html b/files/fr/web/api/performancemeasure/index.html index 4881a14b70..22c05d1a9a 100644 --- a/files/fr/web/api/performancemeasure/index.html +++ b/files/fr/web/api/performancemeasure/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/PerformanceMeasure --- <div>{{APIRef("User Timing API")}}</div> -<p class="summary"><code><strong>PerformanceMeasure</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> ayant un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (la <em>mesure</em>) entre deux <em>marqueurs</em> à la <em>chronologie des performances</em> du navigateur.</p> +<p><code><strong>PerformanceMeasure</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> ayant un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (la <em>mesure</em>) entre deux <em>marqueurs</em> à la <em>chronologie des performances</em> du navigateur.</p> <p>{{InheritanceDiagram}}</p> diff --git a/files/fr/web/api/performancenavigation/index.html b/files/fr/web/api/performancenavigation/index.html index afb5a5d7d9..ced6eff643 100644 --- a/files/fr/web/api/performancenavigation/index.html +++ b/files/fr/web/api/performancenavigation/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/PerformanceNavigation --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.html b/files/fr/web/api/performancenavigation/redirectcount/index.html index 8316baaf34..42d9006675 100644 --- a/files/fr/web/api/performancenavigation/redirectcount/index.html +++ b/files/fr/web/api/performancenavigation/redirectcount/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/PerformanceNavigation/redirectCount --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> diff --git a/files/fr/web/api/performancenavigation/type/index.html b/files/fr/web/api/performancenavigation/type/index.html index 14fc86b915..d203b51da0 100644 --- a/files/fr/web/api/performancenavigation/type/index.html +++ b/files/fr/web/api/performancenavigation/type/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/PerformanceNavigation/type --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/type"><code>PerformanceNavigationTiming.type</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html index 4a6d70c7ca..39a3b6d2ec 100644 --- a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html +++ b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceNavigationTiming/domComplete --- <div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div> -<p class="summary">La propriété en lecture seule <strong><code>domComplete</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p> +<p>La propriété en lecture seule <strong><code>domComplete</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancenavigationtiming/index.html b/files/fr/web/api/performancenavigationtiming/index.html index bb1fdb48d1..95faf846f3 100644 --- a/files/fr/web/api/performancenavigationtiming/index.html +++ b/files/fr/web/api/performancenavigationtiming/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceNavigationTiming --- <p>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</p> -<p class="summary">L'interface <strong><code>PerformanceNavigationTiming</code></strong> fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.</p> +<p>L'interface <strong><code>PerformanceNavigationTiming</code></strong> fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.</p> <p>{{InheritanceDiagram}}</p> @@ -54,8 +54,7 @@ translation_of: Web/API/PerformanceNavigationTiming <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.</dd> <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> - <dd>Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel.</dd> - <dd>S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.</dd> + <dd>Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel. S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.</dd> <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/requestStart"><code>PerformanceNavigationTiming.requestStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.</dd> <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/responseStart"><code>PerformanceNavigationTiming.responseStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt> diff --git a/files/fr/web/api/performanceobserver/index.html b/files/fr/web/api/performanceobserver/index.html index 2b52bba127..27831bb210 100644 --- a/files/fr/web/api/performanceobserver/index.html +++ b/files/fr/web/api/performanceobserver/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceObserver --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">L'interface <strong><code>PerformanceObserver</code></strong> est utilisée pour <em>observer</em> les événements de mesure des performances et être notifié des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entréés de performance</a> lorsqu'elles sont enregistrées dans la <em>chronologie des performances</em> du navigateur.</p> +<p>L'interface <strong><code>PerformanceObserver</code></strong> est utilisée pour <em>observer</em> les événements de mesure des performances et être notifié des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entréés de performance</a> lorsqu'elles sont enregistrées dans la <em>chronologie des performances</em> du navigateur.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceobserver/observe/index.html b/files/fr/web/api/performanceobserver/observe/index.html index 60366f066a..b8fdf46703 100644 --- a/files/fr/web/api/performanceobserver/observe/index.html +++ b/files/fr/web/api/performanceobserver/observe/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceObserver/observe --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La méthode <strong><code>observe()</code></strong> de l'interface <strong><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></strong> est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</p> +<p>La méthode <strong><code>observe()</code></strong> de l'interface <strong><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></strong> est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</p> <p>Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> — est invoquée.</p> @@ -31,7 +31,9 @@ translation_of: Web/API/PerformanceObserver/observe <li><code>type</code> : Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option <code>entryTypes</code>.</li> <li><code>buffered</code> : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « <code>type</code> ».</li> </ul> - <p class="notecard note">Voir <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, <code>observe()</code> n'a aucun effet.</p> + <div class="note"> + <p><strong>Note :</strong>Voir <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, <code>observe()</code> n'a aucun effet.</p> + </div> </dd> </dl> diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.html b/files/fr/web/api/performanceobserver/performanceobserver/index.html index f0388d0689..41ffd9d82b 100644 --- a/files/fr/web/api/performanceobserver/performanceobserver/index.html +++ b/files/fr/web/api/performanceobserver/performanceobserver/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceObserver/PerformanceObserver --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">Le constructeur <strong><code>PerformanceObserver()</code></strong> crée un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> avec le <code>callback</code> d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des <a href="/fr/docs/Web/API/PerformanceEntry">événements d'entrée de performance</a> sont répertoriés pour les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> qui ont été enregistrés, via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> +<p>Le constructeur <strong><code>PerformanceObserver()</code></strong> crée un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> avec le <code>callback</code> d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des <a href="/fr/docs/Web/API/PerformanceEntry">événements d'entrée de performance</a> sont répertoriés pour les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> qui ont été enregistrés, via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.html b/files/fr/web/api/performanceobserverentrylist/getentries/index.html index 4d24a1550a..6e86d57d99 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentries/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentries/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/PerformanceObserverEntryList/getEntries --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La méthode <strong><code>getEntries()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets explicitement <em>observés</em> d'<a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> +<p>La méthode <strong><code>getEntries()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets explicitement <em>observés</em> d'<a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> -<div class="notecard note"> - <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> </div> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html index f1a517d93a..b92be9f1a5 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/PerformanceObserverEntryList/getEntriesByName --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La méthode <strong><code>getEntriesByName()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <em><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></em> et <em><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></em> donnés. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> +<p>La méthode <strong><code>getEntriesByName()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <em><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></em> et <em><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></em> donnés. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> -<div class="notecard note"> - <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> </div> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html index cf8e62a58e..8d692a3092 100644 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html @@ -12,10 +12,10 @@ translation_of: Web/API/PerformanceObserverEntryList/getEntriesByType --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">La méthode <strong><code>getEntriesByType()</code></strong> de la <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée de performance</a>. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> +<p>La méthode <strong><code>getEntriesByType()</code></strong> de la <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée de performance</a>. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p> -<div class="notecard note"> - <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> </div> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceobserverentrylist/index.html b/files/fr/web/api/performanceobserverentrylist/index.html index 7b1ad9d5cb..14cfeaea9e 100644 --- a/files/fr/web/api/performanceobserverentrylist/index.html +++ b/files/fr/web/api/performanceobserverentrylist/index.html @@ -10,10 +10,10 @@ translation_of: Web/API/PerformanceObserverEntryList --- <div>{{APIRef("Performance Timeline API")}}</div> -<p class="summary">L'interface <strong><code>PerformanceObserverEntryList</code></strong> est une liste d'<a href="/fr/docs/Web/API/PerformanceEntry">événements de performance</a> qui ont été explicitement <em>observés</em> via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> +<p>L'interface <strong><code>PerformanceObserverEntryList</code></strong> est une liste d'<a href="/fr/docs/Web/API/PerformanceEntry">événements de performance</a> qui ont été explicitement <em>observés</em> via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p> -<div class="notecard note"> - <p><strong>Remarque :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> +<div class="note"> + <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p> </div> <h2 id="Methods">Méthodes</h2> diff --git a/files/fr/web/api/performancepainttiming/index.html b/files/fr/web/api/performancepainttiming/index.html index 6fc7c6c392..01214c61c1 100644 --- a/files/fr/web/api/performancepainttiming/index.html +++ b/files/fr/web/api/performancepainttiming/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformancePaintTiming --- <p>{{APIRef("Performance Timeline API")}}</p> -<p class="summary">L'interface <strong><code>PerformancePaintTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Paint_Timing_API">Paint Timing API</a> fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.</p> +<p>L'interface <strong><code>PerformancePaintTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Paint_Timing_API">Paint Timing API</a> fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.</p> <p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour le <a href="/fr/docs/Web/API/PerformanceEntry">type d'entrée de performance</a> « <code>paint</code> » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.</p> diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.html b/files/fr/web/api/performanceresourcetiming/connectend/index.html index a7b5dcf04c..c5c10a2ec5 100644 --- a/files/fr/web/api/performanceresourcetiming/connectend/index.html +++ b/files/fr/web/api/performanceresourcetiming/connectend/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/connectEnd --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>connectEnd</code></strong> renvoie le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.</p> +<p>La propriété en lecture seule <strong><code>connectEnd</code></strong> renvoie le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.html b/files/fr/web/api/performanceresourcetiming/connectstart/index.html index 198a11274c..31d6fbf5da 100644 --- a/files/fr/web/api/performanceresourcetiming/connectstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/connectstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/connectStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>connectStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.</p> +<p>La propriété en lecture seule <strong><code>connectStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html index d7a23cd166..9f83cb80c7 100644 --- a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html +++ b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/decodedBodySize --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>decodedBodySize</code></strong> renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.</p> +<p>La propriété en lecture seule <strong><code>decodedBodySize</code></strong> renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html index b2c3c38520..be289e3896 100644 --- a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html +++ b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/domainLookupEnd --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>domainLookupEnd</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.</p> +<p>La propriété en lecture seule <strong><code>domainLookupEnd</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.</p> <p>Si l'agent utilisateur dispose des informations de domaine dans le cache, <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart"><code>domainLookupStart</code></a> et <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd"><code>domainLookupEnd</code></a> représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.</p> diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html index 34f33fb6c9..0e4ed58d1e 100644 --- a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/domainLookupStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>domainLookupStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p> +<p>La propriété en lecture seule <strong><code>domainLookupStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html index ea3c0d6705..567134f104 100644 --- a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html +++ b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/encodedBodySize --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété <strong><code>encodedBodySize</code></strong> en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p> +<p>La propriété <strong><code>encodedBodySize</code></strong> en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html index 2deb1ba0e9..9acdd0756b 100644 --- a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/fetchStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>fetchStart</code></strong> représente un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p> +<p>La propriété en lecture seule <strong><code>fetchStart</code></strong> représente un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p> <p>S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.</p> diff --git a/files/fr/web/api/performanceresourcetiming/index.html b/files/fr/web/api/performanceresourcetiming/index.html index 07f6f67147..708701fc43 100644 --- a/files/fr/web/api/performanceresourcetiming/index.html +++ b/files/fr/web/api/performanceresourcetiming/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/PerformanceResourceTiming --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="symmary">L'interface <strong><code>PerformanceResourceTiming</code></strong> permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des <em>ressources</em> d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, un élément <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, une image ou un script.</p> +<p>L'interface <strong><code>PerformanceResourceTiming</code></strong> permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des <em>ressources</em> d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, un élément <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, une image ou un script.</p> <p>Les propriétés de l'interface créent une <em>chronologie de chargement des ressources</em> avec un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">timestamps haute résolution</a> pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le <em>type</em> de ressource qui a initié l'extraction.</p> diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html index b63192a685..1d8ed0a780 100644 --- a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html +++ b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/initiatorType --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété <strong><code>initiatorType</code></strong> en lecture seule est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> qui représente le <em>type</em> de ressource qui a initié l'événement de performance.</p> +<p>La propriété <strong><code>initiatorType</code></strong> en lecture seule est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> qui représente le <em>type</em> de ressource qui a initié l'événement de performance.</p> <p>La valeur de cette chaîne est la suivante:</p> diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html index e08dab0889..dff0c7e8fd 100644 --- a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html +++ b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/nextHopProtocol --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>nextHopProtocol</code></strong> est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p> +<p>La propriété en lecture seule <strong><code>nextHopProtocol</code></strong> est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p> <p>Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.</p> diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.html b/files/fr/web/api/performanceresourcetiming/redirectend/index.html index e5474b37b9..15002c1b46 100644 --- a/files/fr/web/api/performanceresourcetiming/redirectend/index.html +++ b/files/fr/web/api/performanceresourcetiming/redirectend/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/redirectEnd --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>redirectEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p> +<p>La propriété en lecture seule <strong><code>redirectEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p> <p>Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.</p> diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html index 626038c80b..106c2de0d3 100644 --- a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/redirectStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>redirectStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'instant du début de la récupération qui initie la redirection.</p> +<p>La propriété en lecture seule <strong><code>redirectStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'instant du début de la récupération qui initie la redirection.</p> <p>S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.</p> diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.html b/files/fr/web/api/performanceresourcetiming/requeststart/index.html index de0bec6a29..27e8c19f0d 100644 --- a/files/fr/web/api/performanceresourcetiming/requeststart/index.html +++ b/files/fr/web/api/performanceresourcetiming/requeststart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/requestStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>requestStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.</p> +<p>La propriété en lecture seule <strong><code>requestStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.</p> <p>Il n'y a pas de propriété de fin (« <em>requestEnd</em> ») correspondante pour <code>requestStart</code>.</p> diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.html b/files/fr/web/api/performanceresourcetiming/responseend/index.html index a87722b213..71b45f97b1 100644 --- a/files/fr/web/api/performanceresourcetiming/responseend/index.html +++ b/files/fr/web/api/performanceresourcetiming/responseend/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/responseEnd --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>responseEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.</p> +<p>La propriété en lecture seule <strong><code>responseEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.html b/files/fr/web/api/performanceresourcetiming/responsestart/index.html index bf531b5c93..4279d42446 100644 --- a/files/fr/web/api/performanceresourcetiming/responsestart/index.html +++ b/files/fr/web/api/performanceresourcetiming/responsestart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/responseStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>responseStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> +<p>La propriété en lecture seule <strong><code>responseStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html index 605fa47e55..1b5487516a 100644 --- a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/secureConnectionStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>secureConnectionStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.</p> +<p>La propriété en lecture seule <strong><code>secureConnectionStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.html b/files/fr/web/api/performanceresourcetiming/servertiming/index.html index 7ff22aa4fa..0a1b96fc82 100644 --- a/files/fr/web/api/performanceresourcetiming/servertiming/index.html +++ b/files/fr/web/api/performanceresourcetiming/servertiming/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/PerformanceResourceTiming/serverTiming --- <div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div> -<p class="summary">La propriété en lecture seule <strong><code>serverTiming</code></strong> retourne un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</p> +<p>La propriété en lecture seule <strong><code>serverTiming</code></strong> retourne un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.html b/files/fr/web/api/performanceresourcetiming/tojson/index.html index 224bf123bc..8385dcbafa 100644 --- a/files/fr/web/api/performanceresourcetiming/tojson/index.html +++ b/files/fr/web/api/performanceresourcetiming/tojson/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/toJSON --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> qui retourne une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</p> +<p>La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> qui retourne une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.html b/files/fr/web/api/performanceresourcetiming/transfersize/index.html index 87dfa3535e..bd19c4db5f 100644 --- a/files/fr/web/api/performanceresourcetiming/transfersize/index.html +++ b/files/fr/web/api/performanceresourcetiming/transfersize/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/transferSize --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>transferSize</code></strong> représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">RFC 7230</a>).</p> +<p>La propriété en lecture seule <strong><code>transferSize</code></strong> représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">RFC 7230</a>).</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.html b/files/fr/web/api/performanceresourcetiming/workerstart/index.html index 086f82b9b7..8a6c2cbede 100644 --- a/files/fr/web/api/performanceresourcetiming/workerstart/index.html +++ b/files/fr/web/api/performanceresourcetiming/workerstart/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceResourceTiming/workerStart --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>workerStart</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant l'envoi du <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant le démarrage du processus de <i>service worker</i> s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété renvoie toujours 0.</p> +<p>La propriété en lecture seule <strong><code>workerStart</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant l'envoi du <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant le démarrage du processus de <i>service worker</i> s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété renvoie toujours 0.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/performanceservertiming/description/index.html b/files/fr/web/api/performanceservertiming/description/index.html index 15919ceccd..68062d8a27 100644 --- a/files/fr/web/api/performanceservertiming/description/index.html +++ b/files/fr/web/api/performanceservertiming/description/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceServerTiming/description --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>description</code></strong> retourne une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</p> +<p>La propriété en lecture seule <strong><code>description</code></strong> retourne une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceservertiming/duration/index.html b/files/fr/web/api/performanceservertiming/duration/index.html index dc61670775..7fc0241d4b 100644 --- a/files/fr/web/api/performanceservertiming/duration/index.html +++ b/files/fr/web/api/performanceservertiming/duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceServerTiming/duration --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>duration</code></strong> retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0,0</code>.</p> +<p>La propriété en lecture seule <strong><code>duration</code></strong> retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0,0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceservertiming/index.html b/files/fr/web/api/performanceservertiming/index.html index 6f9bbd6e6f..25e1d58e01 100644 --- a/files/fr/web/api/performanceservertiming/index.html +++ b/files/fr/web/api/performanceservertiming/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/PerformanceServerTiming --- <div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div> -<p class="summary">L'interface <strong><code>PerformanceServerTiming</code></strong> présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a> dans l'en-tête HTTP.</p> +<p>L'interface <strong><code>PerformanceServerTiming</code></strong> présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a> dans l'en-tête HTTP.</p> <p>Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin"><code>Timing-Allow-Origin</code></a> pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.</p> diff --git a/files/fr/web/api/performanceservertiming/name/index.html b/files/fr/web/api/performanceservertiming/name/index.html index 4b8ec5b587..f4834fdcaa 100644 --- a/files/fr/web/api/performanceservertiming/name/index.html +++ b/files/fr/web/api/performanceservertiming/name/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceServerTiming/name --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La propriété en lecture seule <strong><code>name</code></strong> retourne une valeur <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est le nom de la métrique spécifiée par le serveur.</p> +<p>La propriété en lecture seule <strong><code>name</code></strong> retourne une valeur <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est le nom de la métrique spécifiée par le serveur.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performanceservertiming/tojson/index.html b/files/fr/web/api/performanceservertiming/tojson/index.html index 0b7773e322..4c0822c293 100644 --- a/files/fr/web/api/performanceservertiming/tojson/index.html +++ b/files/fr/web/api/performanceservertiming/tojson/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/PerformanceServerTiming/toJSON --- <div>{{APIRef("Resource Timing API")}}</div> -<p class="summary">La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</p> +<p>La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/connectend/index.html b/files/fr/web/api/performancetiming/connectend/index.html index 6ac529c501..036aec20a5 100644 --- a/files/fr/web/api/performancetiming/connectend/index.html +++ b/files/fr/web/api/performancetiming/connectend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/connectEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>connectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</p> +<p>L'ancienne propriété en lecture seule <code><strong>connectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/connectstart/index.html b/files/fr/web/api/performancetiming/connectstart/index.html index bd8848d20a..f4b1f27534 100644 --- a/files/fr/web/api/performancetiming/connectstart/index.html +++ b/files/fr/web/api/performancetiming/connectstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/connectStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>connectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>connectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.html b/files/fr/web/api/performancetiming/domainlookupend/index.html index 6bddef76dd..20a26c397b 100644 --- a/files/fr/web/api/performancetiming/domainlookupend/index.html +++ b/files/fr/web/api/performancetiming/domainlookupend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domainLookupEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domainLookupEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domainLookupEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.html b/files/fr/web/api/performancetiming/domainlookupstart/index.html index d35d4eac99..45020fe7b6 100644 --- a/files/fr/web/api/performancetiming/domainlookupstart/index.html +++ b/files/fr/web/api/performancetiming/domainlookupstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domainLookupStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domainLookupStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domainLookupStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/domcomplete/index.html b/files/fr/web/api/performancetiming/domcomplete/index.html index a8b3d0b028..27e1c9484b 100644 --- a/files/fr/web/api/performancetiming/domcomplete/index.html +++ b/files/fr/web/api/performancetiming/domcomplete/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domComplete --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domComplete"><code>PerformanceNavigationTiming.domComplete</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domComplete</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domComplete</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html index d09d8e22c6..a593001111 100644 --- a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html +++ b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domContentLoadedEventEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>PerformanceNavigationTiming.domContentLoadedEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html index e19dca26ee..fe2f9588ae 100644 --- a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html +++ b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domContentLoadedEventStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>PerformanceNavigationTiming.domContentLoadedEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/dominteractive/index.html b/files/fr/web/api/performancetiming/dominteractive/index.html index 87e2648a84..6d96a184da 100644 --- a/files/fr/web/api/performancetiming/dominteractive/index.html +++ b/files/fr/web/api/performancetiming/dominteractive/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domInteractive --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive"><code>PerformanceNavigationTiming.domInteractive</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domInteractive</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"interactive"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domInteractive</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"interactive"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p> <p>Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs <em>ressentent</em>. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. <a href="http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/">Vérifiez si vous êtes dans l'un de ces cas</a> avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.</p> diff --git a/files/fr/web/api/performancetiming/domloading/index.html b/files/fr/web/api/performancetiming/domloading/index.html index 7e252ffe86..c8ebdceeea 100644 --- a/files/fr/web/api/performancetiming/domloading/index.html +++ b/files/fr/web/api/performancetiming/domloading/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/domLoading --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>domLoading</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"loading"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</p> +<p>L'ancienne propriété en lecture seule <code><strong>domLoading</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"loading"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/fetchstart/index.html b/files/fr/web/api/performancetiming/fetchstart/index.html index 5b8193e731..78701f3386 100644 --- a/files/fr/web/api/performancetiming/fetchstart/index.html +++ b/files/fr/web/api/performancetiming/fetchstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/fetchStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>fetchStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</p> +<p>L'ancienne propriété en lecture seule <code><strong>fetchStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/index.html b/files/fr/web/api/performancetiming/index.html index a743e13d51..7da667936a 100644 --- a/files/fr/web/api/performancetiming/index.html +++ b/files/fr/web/api/performancetiming/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/PerformanceTiming --- <div>{{APIRef("Navigation Timing")}}</div> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'interface <strong><code>PerformanceTiming</code></strong> est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet <code>PerformanceTiming</code> décrivant votre page en utilisant la propriété <a href="/fr/docs/Web/API/Performance/timing"><code>window.performance.timing</code></a>.</p> +<p>L'interface <strong><code>PerformanceTiming</code></strong> est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet <code>PerformanceTiming</code> décrivant votre page en utilisant la propriété <a href="/fr/docs/Web/API/Performance/timing"><code>window.performance.timing</code></a>.</p> <h2 id="Properties">Propriétés</h2> diff --git a/files/fr/web/api/performancetiming/loadeventend/index.html b/files/fr/web/api/performancetiming/loadeventend/index.html index 46df8ff041..e7ee2a6989 100644 --- a/files/fr/web/api/performancetiming/loadeventend/index.html +++ b/files/fr/web/api/performancetiming/loadeventend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/loadEventEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>loadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>loadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.html b/files/fr/web/api/performancetiming/loadeventstart/index.html index 037c50dbe1..ca6d2dd5c7 100644 --- a/files/fr/web/api/performancetiming/loadeventstart/index.html +++ b/files/fr/web/api/performancetiming/loadeventstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/loadEventStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>loadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>loadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/navigationstart/index.html b/files/fr/web/api/performancetiming/navigationstart/index.html index 1ce9e75b82..76fce74f7b 100644 --- a/files/fr/web/api/performancetiming/navigationstart/index.html +++ b/files/fr/web/api/performancetiming/navigationstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/navigationStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>navigationStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>navigationStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/redirectend/index.html b/files/fr/web/api/performancetiming/redirectend/index.html index 84cea2911a..fe8213d131 100644 --- a/files/fr/web/api/performancetiming/redirectend/index.html +++ b/files/fr/web/api/performancetiming/redirectend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/redirectEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>redirectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>redirectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/redirectstart/index.html b/files/fr/web/api/performancetiming/redirectstart/index.html index 35bdf3f8db..fcea481323 100644 --- a/files/fr/web/api/performancetiming/redirectstart/index.html +++ b/files/fr/web/api/performancetiming/redirectstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/redirectStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>redirectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>redirectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/requeststart/index.html b/files/fr/web/api/performancetiming/requeststart/index.html index 96ce2e454a..653f3b8feb 100644 --- a/files/fr/web/api/performancetiming/requeststart/index.html +++ b/files/fr/web/api/performancetiming/requeststart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/requestStart --- <p>{{ APIRef("PerformanceTiming") }}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>requestStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.</p> +<p>L'ancienne propriété en lecture seule <code><strong>requestStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/responseend/index.html b/files/fr/web/api/performancetiming/responseend/index.html index b4b1d436d3..ea05b6efd3 100644 --- a/files/fr/web/api/performancetiming/responseend/index.html +++ b/files/fr/web/api/performancetiming/responseend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/responseEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>responseEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.</p> +<p>L'ancienne propriété en lecture seule <code><strong>responseEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/responsestart/index.html b/files/fr/web/api/performancetiming/responsestart/index.html index e5130ffc08..67ac9329ea 100644 --- a/files/fr/web/api/performancetiming/responsestart/index.html +++ b/files/fr/web/api/performancetiming/responsestart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/responseStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>responseStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> +<p>L'ancienne propriété en lecture seule <code><strong>responseStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.html b/files/fr/web/api/performancetiming/secureconnectionstart/index.html index c23334901d..8031002a2a 100644 --- a/files/fr/web/api/performancetiming/secureconnectionstart/index.html +++ b/files/fr/web/api/performancetiming/secureconnectionstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/secureConnectionStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>secureConnectionStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>secureConnectionStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.html b/files/fr/web/api/performancetiming/unloadeventend/index.html index 6ecbcdfe0e..03a0cbe390 100644 --- a/files/fr/web/api/performancetiming/unloadeventend/index.html +++ b/files/fr/web/api/performancetiming/unloadeventend/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/unloadEventEnd --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd"><code>PerformanceNavigationTiming.unloadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>unloadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>unloadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.html b/files/fr/web/api/performancetiming/unloadeventstart/index.html index 432ccc7870..c97032703f 100644 --- a/files/fr/web/api/performancetiming/unloadeventstart/index.html +++ b/files/fr/web/api/performancetiming/unloadeventstart/index.html @@ -16,11 +16,11 @@ translation_of: Web/API/PerformanceTiming/unloadEventStart --- <p>{{APIRef("Navigation Timing")}}</p> -<div class="notecard deprecated"> +<div class="warning"> <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart"><code>PerformanceNavigationTiming.unloadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p> </div> -<p class="summary">L'ancienne propriété en lecture seule <code><strong>unloadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> +<p>L'ancienne propriété en lecture seule <code><strong>unloadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p> <h2 id="Syntax">Syntaxe</h2> diff --git a/files/fr/web/api/plugin/index.html b/files/fr/web/api/plugin/index.html index 78cb5c4e9a..cfb0919f6d 100644 --- a/files/fr/web/api/plugin/index.html +++ b/files/fr/web/api/plugin/index.html @@ -15,10 +15,10 @@ translation_of: Web/API/Plugin <p>L'interface <code>Plugin</code> fournit des informations à propos d'un <a href="/en-US/docs/Mozilla/Add-ons/Plugins">plugin</a> du navigateur.</p> <div class="note"> -<p><strong>Remarque</strong>: Les propriétés propres des objets <code>Plugin</code> ne sont plus énumérables dans les dernières versions des navigateurs.</p> +<p><strong>Note :</strong> Les propriétés propres des objets <code>Plugin</code> ne sont plus énumérables dans les dernières versions des navigateurs.</p> </div> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <dl> <dt>{{domxref("Plugin.description")}} {{readonlyinline}}</dt> @@ -31,7 +31,7 @@ translation_of: Web/API/Plugin <dd>Le numéro de version du plugin, en chaîne de caractères.</dd> </dl> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <dl> <dt>{{domxref("Plugin.item")}}</dt> diff --git a/files/fr/web/api/pointer_events/index.html b/files/fr/web/api/pointer_events/index.html index b8f5de1c8b..0e26e4cbda 100644 --- a/files/fr/web/api/pointer_events/index.html +++ b/files/fr/web/api/pointer_events/index.html @@ -23,16 +23,16 @@ translation_of: Web/API/Pointer_events <dl> <dt>pointeur actif</dt> <dd>Tout périphérique d'entrée <em><a href="#term_pointer">pointeur</a></em> pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.</dd> - <dt id="term_digitizer">numériseur (digitizer)</dt> + <dt>numériseur (digitizer)</dt> <dd>Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.</dd> - <dt id="term_hit_test">hit test</dt> + <dt>hit test</dt> <dd>Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.</dd> - <dt id="term_pointer">pointeur</dt> + <dt>pointeur</dt> <dd>Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de <em>pointeur</em> sont la souris, le stylet et la contact tactile.</dd> <dt>capture du pointeur</dt> <dd>La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.</dd> - <dt id="term_pointer_event">événement de pointeur</dt> - <dd>Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un <em><a href="#term_pointer">pointeur</a></em>.</dd> + <dt>événement de pointeur</dt> + <dd>Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un <em>pointeur</em>.</dd> </dl> <h2 id="Interfaces">Interfaces</h2> @@ -141,7 +141,7 @@ translation_of: Web/API/Pointer_events <p>This example registers a handler for every event type for the given element.</p> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <script> function over_handler(event) { } function enter_handler(event) { } @@ -179,7 +179,7 @@ function init() { <p>This example illustrates accessing all of a touch event's properties.</p> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <script> var id = -1; @@ -310,7 +310,7 @@ function init() { <p>The following example shows pointer capture being set on an element.</p> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <script> function downHandler(ev) { var el=document.getElementById("target"); @@ -330,7 +330,7 @@ function init() { <p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p> -<pre class="brush: js notranslate"><html> +<pre class="brush: js"><html> <script> function downHandler(ev) { var el=document.getElementById("target"); @@ -363,7 +363,7 @@ function init() { <p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p> -<pre class="brush: html notranslate"><html> +<pre class="brush: html"><html> <body> <div style="touch-action:none;">Can't touch this ... </div> </body> @@ -372,14 +372,14 @@ function init() { <p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p> -<pre class="brush: css notranslate">button#tiny { +<pre class="brush: css">button#tiny { touch-action: none; } </pre> <p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p> -<pre class="brush: css notranslate">#target { +<pre class="brush: css">#target { touch-action: pan-x; } </pre> diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html index deccfa13ca..70a6466883 100644 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/Pointer_events/gestes_pincer_zoom <p>Cet exemple montre comment détecter les gestes de <em>pinch/zoom</em> (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. </p> <div class="note"> -<p><strong>Note</strong>: Une version <em>en direct</em> de cette application est disponible sur <a href="https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html">Github</a>. Le <a href="https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html">code source est également disponible sur Github</a>; les pull requests et <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> sont les bienvenus.</p> +<p><strong>Note :</strong> Une version <em>en direct</em> de cette application est disponible sur <a href="https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html">Github</a>. Le <a href="https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html">code source est également disponible sur Github</a>; les pull requests et <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> sont les bienvenus.</p> </div> <h2 id="Exemple">Exemple</h2> @@ -151,7 +151,9 @@ var prevDiff = -1; <p>Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.</p> -<p class="note">Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.</p> +<div class="note"> + <p><strong>Note :</strong> Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.</p> +</div> <pre class="brush: html"><body onload="init();" style="touch-action:none"> <div id="target">Touchez l'écran avec deux pointeurs, puis pincez ou étirez.<br/> diff --git a/files/fr/web/api/pointer_lock_api/index.html b/files/fr/web/api/pointer_lock_api/index.html index 4e72873553..d5921f5b20 100644 --- a/files/fr/web/api/pointer_lock_api/index.html +++ b/files/fr/web/api/pointer_lock_api/index.html @@ -19,9 +19,9 @@ original_slug: WebAPI/Pointer_Lock <br> Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.</p> -<h2 id="basics" name="basics">Concepts de base</h2> +<h2 id="basics">Concepts de base</h2> -<p>Pointer Lock partage des similtudes avec la <a href="/fr/docs/Web/API/Element/setCapture" title="element.setCapture">capture de souris</a>. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :</p> +<p>Pointer Lock partage des similtudes avec la <a href="/fr/docs/Web/API/Element/setCapture">capture de souris</a>. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :</p> <ul> <li>Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.</li> @@ -30,7 +30,7 @@ original_slug: WebAPI/Pointer_Lock <li>Cache le curseur.</li> </ul> -<h2 id="method_overview" name="method_overview">Vue d'ensemble des méthodes/propriétées</h2> +<h2 id="method_overview">Vue d'ensemble des méthodes/propriétées</h2> <p>Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.</p> @@ -79,7 +79,7 @@ if (document.pointerLockElement === someElement) { document.exitPointerLock(); </pre> -<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockchange</h2> +<h2 id="mouselocklostevent">Événement pointerlockchange</h2> <p>Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p> @@ -100,7 +100,7 @@ document.addEventListener('mozpointerlockchange', pointerLockChange, false); document.addEventListener('webkitpointerlockchange', pointerLockChange, false); </pre> -<h2 id="mouselocklostevent" name="mouselocklostevent">Événement pointerlockerror</h2> +<h2 id="mouselocklostevent">Événement pointerlockerror</h2> <p>Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p> @@ -113,27 +113,29 @@ function lockError(e) { } </pre> -<div class="note"><strong>Note</strong>: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec <code>moz</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec <code>moz</code>.</p> +</div> -<h2 id="extensions" name="extensions">Extensions aux événements de souris</h2> +<h2 id="extensions">Extensions aux événements de souris</h2> <p>L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, <code>eNow</code> et <code>ePrevious</code>. En d'autres termes, <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p> -<h3 id="locked_state" name="locked_state">État verrouillé</h3> +<h3 id="locked_state">État verrouillé</h3> <p>Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.</p> -<h3 id="unlocked_state" name="unlocked_state">État déverrouillé</h3> +<h3 id="unlocked_state">État déverrouillé</h3> <p>Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.</p> <p>Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.</p> -<h2 id="example" name="example">Simple exemple pas à pas</h2> +<h2 id="example">Simple exemple pas à pas</h2> <p>Nous avons écrit une <a href="https://mdn.github.io/dom-examples/pointer-lock/">démo de verrouillage de pointer</a> pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (<a href="https://github.com/mdn/dom-examples/tree/master/pointer-lock">voir le code source</a>). La démo ressemble à ça:</p> -<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p> +<p><img alt="Un cercle rouge sur un arrière-plan noir." src="pointer-lock.png"></p> <p>Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.</p> diff --git a/files/fr/web/api/pointerevent/index.html b/files/fr/web/api/pointerevent/index.html index 3ca9b1d943..b17aaefffb 100644 --- a/files/fr/web/api/pointerevent/index.html +++ b/files/fr/web/api/pointerevent/index.html @@ -56,7 +56,9 @@ translation_of: Web/API/PointerEvent <p>L'interface <code>PointerEvent</code> a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.</p> -<div class="note"><strong>Note:</strong> Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.</div> +<div class="note"> + <p><strong>Note :</strong> Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.</p> +</div> <dl> <dt>{{event('pointerover')}}</dt> diff --git a/files/fr/web/api/positionoptions/maximumage/index.html b/files/fr/web/api/positionoptions/maximumage/index.html index 42abffa48a..72314738ca 100644 --- a/files/fr/web/api/positionoptions/maximumage/index.html +++ b/files/fr/web/api/positionoptions/maximumage/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/PositionOptions/maximumAge --- <div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> -<p>La propriété <code><strong>PositionOptions.maximumAge</strong></code> est de type <code>long</code> positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est <code>0</code>, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit renvoyer une position mise en cache indépendamment de son âge.</p> +<p>La propriété <code><strong>PositionOptions.maximumAge</strong></code> est de type <code>long</code> positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est <code>0</code>, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit renvoyer une position mise en cache indépendamment de son âge.</p> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/api/positionoptions/timeout/index.html b/files/fr/web/api/positionoptions/timeout/index.html index e0f9e323dd..4454f93754 100644 --- a/files/fr/web/api/positionoptions/timeout/index.html +++ b/files/fr/web/api/positionoptions/timeout/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/PositionOptions/timeout --- <div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> -<p>La propriété <code><strong>PositionOptions.timeout</strong></code> est de type <code>long</code> positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera rien tant que la position n'est pas disponible.</p> +<p>La propriété <code><strong>PositionOptions.timeout</strong></code> est de type <code>long</code> positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera rien tant que la position n'est pas disponible.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/processinginstruction/index.html b/files/fr/web/api/processinginstruction/index.html index a3f73f97c0..3db3784969 100644 --- a/files/fr/web/api/processinginstruction/index.html +++ b/files/fr/web/api/processinginstruction/index.html @@ -19,25 +19,25 @@ translation_of: Web/API/ProcessingInstruction <p>Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par '<code>xml</code>', car ceux-ci sont réservés (par exemple <code><a href="/en/XML/xml-stylesheet"><?xml-stylesheet ?></a></code>).</p> -<p>Les instructions de traitement héritent des méthodes et propriétés de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Node"><code>Node</code></a>.</p> +<p>Les instructions de traitement héritent des méthodes et propriétés de <a href="/fr/docs/Web/API/Node"><code>Node</code></a>.</p> <p>{{InheritanceDiagram(700,70)}}</p> -<h3 id="Attributes" name="Attributes">Attributs</h3> +<h3 id="Attributes">Attributs</h3> <ul> - <li>target (<em>cible</em>) (DOMString) (<em>chaîne de caractères</em>) - après le <code><?</code> et avant un <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">whitespace</a> (<em>espace</em>) le séparant des <code>data</code> (<em>données</em>)</li> + <li>target (<em>cible</em>) (DOMString) (<em>chaîne de caractères</em>) - après le <code><?</code> et avant un <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">whitespace</a> (<em>espace</em>) le séparant des <code>data</code> (<em>données</em>)</li> <li>data (<em>données</em>) (DOMString) (<em>chaîne de caractères</em>) - premier caractère non espace après <code>target</code> et avant <code>?></code></li> </ul> -<h3 id="Specification" name="Specification">Spécification</h3> +<h3 id="Specification">Spécification</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core : ProcessingInstruction interface</a></li> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core : ProcessingInstruction interface</a></li> </ul> -<h3 id="See_also" name="See_also">Voir aussi</h3> +<h3 id="See_also">Voir aussi</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createProcessingInstruction">document.createProcessingInstruction</a></li> + <li><a href="/fr/docs/Web/API/Document/createProcessingInstruction">document.createProcessingInstruction</a></li> </ul> diff --git a/files/fr/web/api/push_api/index.html b/files/fr/web/api/push_api/index.html index 58f02a4931..cb167263e3 100644 --- a/files/fr/web/api/push_api/index.html +++ b/files/fr/web/api/push_api/index.html @@ -16,17 +16,17 @@ translation_of: Web/API/Push_API <p>L' <strong>API Push </strong> donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.</p> <div class="note"> -<p><strong>Note</strong>: Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à <a href="/fr/docs/Web/API/Simple_Push_API">Simple Push</a>.</p> +<p><strong>Note :</strong> Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à <a href="/fr/docs/Web/API/Simple_Push_API">Simple Push</a>.</p> </div> <h2 id="Concepts_et_usages_de_Push">Concepts et usages de Push</h2> <div class="warning"> -<p>Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :</p> +<p><strong>Attention :</strong> Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :</p> <ul> - <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Feuille de prévention contre les Cross-Site Request Forgery (CSRF)</a><sup> (en)</sup></li> - <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Prévention conte les attaques CSRF et XSRF</a> <sup>(en)</sup></li> + <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Feuille de prévention contre les Cross-Site Request Forgery (CSRF)</a></li> + <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Prévention conte les attaques CSRF et XSRF</a></li> </ul> </div> @@ -36,16 +36,16 @@ translation_of: Web/API/Push_API <p>Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> -<p>Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une <a class="external" href="http://www.w3.org/TR/capability-urls/">URL fonctionnelle</a> unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.</p> +<p>Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une <a href="http://www.w3.org/TR/capability-urls/">URL fonctionnelle</a> unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.</p> <p>Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.</p> <div class="note"> -<p><strong>Note</strong>: comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.</p> +<p><strong>Note :</strong> Comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.</p> </div> <div class="note"> -<p><strong>Note</strong>: Chrome nécessite actuellement de configurer un projet sur <a class="external" href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..</p> +<p><strong>Note :</strong>: Chrome nécessite actuellement de configurer un projet sur <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..</p> </div> <h2 id="Interfaces">Interfaces</h2> @@ -105,7 +105,7 @@ translation_of: Web/API/Push_API <ul> <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API [EN]</a></li> - <li><a class="external" href="https://github.com/chrisdavidmills/push-api-demo">Démo API Push</a>, sur Github</li> - <li><a class="external" href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> + <li><a href="https://github.com/chrisdavidmills/push-api-demo">Démo API Push</a>, sur Github</li> + <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li> <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li> </ul> diff --git a/files/fr/web/api/pushevent/index.html b/files/fr/web/api/pushevent/index.html index 6b3f68af8e..58b2e0e31f 100644 --- a/files/fr/web/api/pushevent/index.html +++ b/files/fr/web/api/pushevent/index.html @@ -30,10 +30,10 @@ translation_of: Web/API/PushEvent <dl> <dt>{{domxref("PushEvent.data")}} {{readonlyinline}}</dt> - <dd>Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au <span>{{domxref("PushSubscription")}}.</span></dd> + <dd>Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.</dd> </dl> -<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Méthodes</strong></p> +<h2>Méthodes</h2> <p><em>Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}</em>.</p> diff --git a/files/fr/web/api/queuemicrotask/index.html b/files/fr/web/api/queuemicrotask/index.html index cced10b9e4..043382a45d 100644 --- a/files/fr/web/api/queuemicrotask/index.html +++ b/files/fr/web/api/queuemicrotask/index.html @@ -25,7 +25,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="seoSummary">La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</span> La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p> +<p>La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</p> + +<p>La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p> <p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p> diff --git a/files/fr/web/api/range/createcontextualfragment/index.html b/files/fr/web/api/range/createcontextualfragment/index.html index 90209b4a20..6f9342d87d 100644 --- a/files/fr/web/api/range/createcontextualfragment/index.html +++ b/files/fr/web/api/range/createcontextualfragment/index.html @@ -5,19 +5,19 @@ translation_of: Web/API/Range/createContextualFragment --- <p>La méthode <strong><code>Range.createContextualFragment()</code></strong> retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du <code>range</code> (le <em>parent</em> du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le <code>range</code> appartient à un <code>Document</code> dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être <code>html</code>, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec <code>body</code> pour contexte à la place.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.createContextualFragment( <em>chaineHTML</em> ) </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <dl> <dt><em>chaineHTML</em></dt> <dd>Une chaîne contenant du texte et des balises à convertir en un fragment de document.</dd> </dl> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="brush: js">var chaineHTML = "<div>Je suis un nœud div<div>"; var range = document.createRange(); diff --git a/files/fr/web/api/range/extractcontents/index.html b/files/fr/web/api/range/extractcontents/index.html index 3c2dc3377a..dd0d7a672d 100644 --- a/files/fr/web/api/range/extractcontents/index.html +++ b/files/fr/web/api/range/extractcontents/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Range/extractContents <p>Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.extractContents(); </pre> diff --git a/files/fr/web/api/range/index.html b/files/fr/web/api/range/index.html index c42a83b4ea..a17b45d829 100644 --- a/files/fr/web/api/range/index.html +++ b/files/fr/web/api/range/index.html @@ -5,13 +5,13 @@ translation_of: Web/API/Range --- <p>{{ ApiRef() }}</p> -<h3 id="Introduction" name="Introduction">Introduction</h3> +<h3 id="Introduction">Introduction</h3> <p>L'objet <code>Range</code> (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.</p> <p>Un segment peut être crée en utilisant la méthode <a href="/fr/docs/Web/API/document/createRange">createRange</a> de l'objet <a href="/fr/docs/Web/API/document">document</a>. Les objets range peuvent également être récupérés en utilisant la méthode <a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a> de l'objet <a href="/fr/docs/Web/API/Selection">selection</a>.</p> -<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3> +<h3 id="Propri.C3.A9t.C3.A9s">Propriétés</h3> <dl> <dt><a href="/fr/docs/Web/API/range/collapsed">collapsed</a></dt> @@ -28,9 +28,9 @@ translation_of: Web/API/Range <dd>Renvoie un nombre représentant l'endroit où le segment débute dans <code>startContainer</code>.</dd> </dl> -<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3> +<h3 id="M.C3.A9thodes">Méthodes</h3> -<h4 id="M.C3.A9thodes_de_positionnement" name="M.C3.A9thodes_de_positionnement">Méthodes de positionnement</h4> +<h4 id="M.C3.A9thodes_de_positionnement">Méthodes de positionnement</h4> <p>Ces méthodes permettent de définir le début et la fin d'un segment.</p> @@ -55,7 +55,7 @@ translation_of: Web/API/Range <dd>Replie le segment sur l'un de ses points frontières.</dd> </dl> -<h4 id="M.C3.A9thodes_de_modification" name="M.C3.A9thodes_de_modification">Méthodes de modification</h4> +<h4 id="M.C3.A9thodes_de_modification">Méthodes de modification</h4> <p>Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.</p> @@ -72,7 +72,7 @@ translation_of: Web/API/Range <dd>Déplace le contenu d'un segment dans un nouveau nœud.</dd> </dl> -<h4 id="Autres_m.C3.A9thodes" name="Autres_m.C3.A9thodes">Autres méthodes</h4> +<h4 id="Autres_m.C3.A9thodes">Autres méthodes</h4> <dl> <dt><a href="/fr/docs/Web/API/range/compareBoundaryPoints">compareBoundaryPoints</a></dt> @@ -85,7 +85,7 @@ translation_of: Web/API/Range <dd>Renvoie le texte du segment.</dd> </dl> -<h4 id="Les_m.C3.A9thodes_Gecko" name="Les_m.C3.A9thodes_Gecko">Les méthodes Gecko</h4> +<h4 id="Les_m.C3.A9thodes_Gecko">Les méthodes Gecko</h4> <p>Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.</p> @@ -100,12 +100,4 @@ translation_of: Web/API/Range <dd>Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.</dd> <dt><a href="/fr/docs/Web/API/range/isPointInRange">isPointInRange</a></dt> <dd>Renvoie un booléen indiquant si le point donné est dans le segment.</dd> -</dl> - -<p><span class="comment">Liens Interwikis</span></p> - -<p> </p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/range", "es": "es/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}</p> +</dl>
\ No newline at end of file diff --git a/files/fr/web/api/range/selectnode/index.html b/files/fr/web/api/range/selectnode/index.html index 2cbc7f7624..25e418cc4d 100644 --- a/files/fr/web/api/range/selectnode/index.html +++ b/files/fr/web/api/range/selectnode/index.html @@ -12,26 +12,26 @@ translation_of: Web/API/Range/selectNode <p>La méthode <code>Range.selectNode()</code> définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du <em>noeudDeReference</em>.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>range</em>.selectNode(<em>noeudDeReference</em>); </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><em>noeudDeReference</em></dt> <dd>Le {{domxref("Node")}} à choisir à l'intérieur d'un <code>{domxref("Range")}}</code>.</dd> </dl> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var range = document.createRange(); var noeudDeReference = document.getElementsByTagName("div").item(0); range.selectNode(noeudDeReference);</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/range/setstart/index.html b/files/fr/web/api/range/setstart/index.html index 1ae3662b22..019a481c37 100644 --- a/files/fr/web/api/range/setstart/index.html +++ b/files/fr/web/api/range/setstart/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Range/setStart <p>Si le <code>startNode</code> est un {{ domxref("Node") }} de type <code>Text</code>, <code>Comment</code>, ou <code>CDATASection</code>, alors startOffset est le nombre de caractères depuis le départ du <code>startNode</code>. Pour les autres types de <code>Nœud</code>, <code>startOffset</code> est le nombre de noeuds enfants entre le debut du <code>startNode</code>.</p> -<p><span id="result_box" lang="fr"><span>Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.</span></span></p> +<p>Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>); </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><em>startNode</em></dt> <dd>{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.</dd> <dt><em>startOffset</em></dt> - <dd><span id="result_box" lang="fr"><span>Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode</span></span>.</dd> + <dd>Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode.</dd> </dl> -<h2 id="Example" name="Example">Example</h2> +<h2 id="Example">Example</h2> <pre class="brush: js">var range = document.createRange(); var startNode = document.getElementsByTagName("p").item(2); diff --git a/files/fr/web/api/range/surroundcontents/index.html b/files/fr/web/api/range/surroundcontents/index.html index 86a49e1398..4b8b6fa87e 100644 --- a/files/fr/web/api/range/surroundcontents/index.html +++ b/files/fr/web/api/range/surroundcontents/index.html @@ -16,7 +16,7 @@ range.insertNode(newNode)</pre> <p>Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>); </pre> @@ -28,7 +28,7 @@ range.insertNode(newNode)</pre> <dd>Un {{ domxref("Node") }} à insérer à l’emplacement du <code>range</code>.</dd> </dl> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">var range = document.createRange(); var newNode = document.createElement("p"); @@ -37,7 +37,7 @@ range.selectNode(document.getElementsByTagName("div").item(0)); range.surroundContents(newNode); </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> @@ -66,5 +66,5 @@ range.surroundContents(newNode); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">L’index des interfaces DOM</a></li> + <li><a href="/fr/docs/DOM/DOM_Reference">L’index des interfaces DOM</a></li> </ul> diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html index 3a2f14df82..cc9160f5c2 100644 --- a/files/fr/web/api/request/index.html +++ b/files/fr/web/api/request/index.html @@ -86,14 +86,14 @@ translation_of: Web/API/Request </dl> <div class="note"> -<p><strong>Note</strong>: Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p> +<p><strong>Note :</strong> Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p> </div> <h2 id="Exemples">Exemples</h2> <p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:</p> -<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico'); +<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico'); const URL = request.url; const method = request.method; @@ -102,7 +102,7 @@ const credentials = request.credentials; <p>Vous pouvez ensuite récupérer cette requête en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => response.blob()) .then(blob => { image.src = URL.createObjectURL(blob); @@ -110,7 +110,7 @@ const credentials = request.credentials; <p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:</p> -<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); +<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'}); const URL = request.url; const method = request.method; @@ -124,7 +124,7 @@ const bodyUsed = request.bodyUsed; <p>Vous pouvez ensuite récupérer cette demande d'API en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:</p> -<pre class="brush: js notranslate">fetch(request) +<pre class="brush: js">fetch(request) .then(response => { if (response.status === 200) { return response.json(); diff --git a/files/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html index 1e1c82d317..d051e937d6 100644 --- a/files/fr/web/api/request/mode/index.html +++ b/files/fr/web/api/request/mode/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Request/mode <ul> <li><code>same-origin</code> — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.</li> <li><code>no-cors</code> — Prévient la méthode d’une utilisation autre que <code>HEAD</code>, <code>GET</code> ou <code>POST</code>. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour <a href="https://fetch.spec.whatwg.org/#simple-header">ceci</a>. De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.</li> - <li><code>cors</code> — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">protocole CORS</a>. Seul un <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">jeu limité</a> d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.</li> + <li><code>cors</code> — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au <a href="/en-US/docs/Web/HTTP/Access_control_CORS">protocole CORS</a>. Seul un <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">jeu limité</a> d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.</li> <li><code>navigate</code> — Un mode pour supporter la navigation. La valeur <code>navigate</code> est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.</li> </ul> diff --git a/files/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html index 1eca86dcda..bea6114c46 100644 --- a/files/fr/web/api/request/request/index.html +++ b/files/fr/web/api/request/request/index.html @@ -121,13 +121,11 @@ var maRequete = new Request('fleurs.jpg', monInit); <p>Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur <code>Request()</code> pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).</p> -<div class="codehilite" style="background: #f0f3f3;"> -<pre style="line-height: 125%;">var copie = new Request(maRequete); +<pre>var copie = new Request(maRequete); </pre> -</div> <div class="note"> -<p><strong>Note</strong> : Cette dernière utilisation n'est probablement utile que dans <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p> +<p><strong>Note :</strong> Cette dernière utilisation n'est probablement utile que dans <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/resize_observer_api/index.html b/files/fr/web/api/resize_observer_api/index.html index e7dc99f213..7a52b0c837 100644 --- a/files/fr/web/api/resize_observer_api/index.html +++ b/files/fr/web/api/resize_observer_api/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/Resize_Observer_API <p>Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):</p> -<pre class="brush: js notranslate">const resizeObserver = new ResizeObserver(entries => { +<pre class="brush: js">const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { if(entry.contentBoxSize) { entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) + diff --git a/files/fr/web/api/rtciceserver/index.html b/files/fr/web/api/rtciceserver/index.html index b5965fc34b..8974d49f65 100644 --- a/files/fr/web/api/rtciceserver/index.html +++ b/files/fr/web/api/rtciceserver/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/RTCIceServer <p>Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété <code>urls</code>; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.</p> <div class="note"> -<p>Les anciennes versions de la spécification WebRTC incluent une propriété <code>url</code> au lieu de <code>urls</code>; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.</p> +<p><strong>Note :</strong> Les anciennes versions de la spécification WebRTC incluent une propriété <code>url</code> au lieu de <code>urls</code>; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.</p> </div> <h2 id="Constantes">Constantes</h2> diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html index dc85b1039a..152e67aa86 100644 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/RTCPeerConnection/setConfiguration <pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre> -<h3 class="syntaxbox" id="Paramètres">Paramètres</h3> +<h3 id="Paramètres">Paramètres</h3> <dl> <dt><code>configuration</code></dt> diff --git a/files/fr/web/api/screen_capture_api/index.html b/files/fr/web/api/screen_capture_api/index.html index 6ba5ed0468..3bfc553102 100644 --- a/files/fr/web/api/screen_capture_api/index.html +++ b/files/fr/web/api/screen_capture_api/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Screen_Capture_API --- <div>{{DefaultAPISidebar("Screen Capture API")}}</div> -<p><span class="seoSummary">The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.</span> This stream can then be recorded or shared with others over the network.</p> +<p>The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.</p> <h2 id="API_Screen_Capture_concepts_et_utilisation">API Screen Capture concepts et utilisation</h2> @@ -31,7 +31,7 @@ translation_of: Web/API/Screen_Capture_API <p>La {{jsxref("Promise")}} retournée par <code>getDisplayMedia()</code> résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.</p> -<p>Voir l'article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a> <span class="tlid-translation translation" lang="fr"><span title="">pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.</span></span></p> +<p>Voir l'article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a> pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.</p> <h2 id="Ajouts_à_l'interface_actuelle">Ajouts à l'interface actuelle</h2> diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html index 7cea375a1b..266207b731 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html @@ -102,5 +102,5 @@ original_slug: Web/Events/audioprocess <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li> + <li><a href="/fr/docs/Web_Audio_API">Web Audio API</a></li> </ul> diff --git a/files/fr/web/api/selection/index.html b/files/fr/web/api/selection/index.html index b6dc3d0940..d01facda6d 100644 --- a/files/fr/web/api/selection/index.html +++ b/files/fr/web/api/selection/index.html @@ -5,11 +5,11 @@ translation_of: Web/API/Selection --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> -<p>La classe de l'objet retourné par <code><a href="Window/getSelection"> window.getSelection()</a></code>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a> et d'autres méthodes.</p> +<p>La classe de l'objet retourné par <code><a href="Window/getSelection"> window.getSelection()</a></code>, <a href="/fr/docs/Web/API/Document/getSelection"><code>document.getSelection()</code></a> et d'autres méthodes.</p> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>Un objet <code>selection</code> représente les <a href="range">plages</a> sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :</p> @@ -22,7 +22,7 @@ translation_of: Web/API/Selection window.alert(selObj); </pre> -<h3 id="Glossaire" name="Glossaire">Glossaire</h3> +<h3 id="Glossaire">Glossaire</h3> <p>Autres mots clés utilisés dans cette section.</p> @@ -35,7 +35,7 @@ window.alert(selObj); <dd>Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet <a href="range">range</a>. Les objets <code>range</code> peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.</dd> </dl> -<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3> +<h3 id="Propri.C3.A9t.C3.A9s">Propriétés</h3> <dl> <dt><a href="/fr/docs/Web/API/Selection/anchorNode">anchorNode</a></dt> @@ -52,7 +52,7 @@ window.alert(selObj); <dd>Renvoie le nombre de « plages » dans la sélection.</dd> </dl> -<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3> +<h3 id="M.C3.A9thodes">Méthodes</h3> <dl> <dt><a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a></dt> @@ -83,24 +83,18 @@ window.alert(selObj); <dd>Indique si un nœud donné appartient à la sélection.</dd> </dl> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Selection")}}</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> -<p><a href="Window/getSelection">window.getSelection</a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a>,<a href="range">Range</a></p> +<p><a href="Window/getSelection">window.getSelection</a>, <a href="/fr/docs/Web/API/Document/getSelection"><code>document.getSelection()</code></a>,<a href="range">Range</a></p> -<h3 id="Liens_externes" name="Liens_externes">Liens externes</h3> +<h3 id="Liens_externes">Liens externes</h3> <ul> - <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">Définition IDL dans Mozilla cross-reference</a></li> -</ul> - -<p> </p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}</p> + <li><a href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">Définition IDL dans Mozilla cross-reference</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/selection/tostring/index.html b/files/fr/web/api/selection/tostring/index.html index 760100faa5..c0e4836d47 100644 --- a/files/fr/web/api/selection/tostring/index.html +++ b/files/fr/web/api/selection/tostring/index.html @@ -6,26 +6,23 @@ tags: translation_of: Web/API/Selection/toString --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>string</i> =<i>sel</i>.toString() </pre> <ul> <li><code>string</code> est la représentation sous la forme d'une chaîne de caractères de la sélection.</li> </ul> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <p>Aucun.</p> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>Cette méthode renvoie le texte sélectionné.</p> <p>En <a href="fr/JavaScript">JavaScript</a>, cette méthode est appelée automatiquement pour des objets <code>selection</code> aux fonctions nécessitant un paramètre <code>string</code> :</p> <pre class="eval">alert(window.getSelection()) // Appel automatique alert(window.getSelection().toString()) // Appel explicite </pre> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">Object.toString</a></li> -</ul> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html index 83f6130c35..8bbfc6079e 100644 --- a/files/fr/web/api/server-sent_events/index.html +++ b/files/fr/web/api/server-sent_events/index.html @@ -8,49 +8,39 @@ translation_of: Web/API/Server-sent_events --- <p>Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> - - <dl> - <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Utilisation des événements envoyés par le serveur</a></dt> - <dd>Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.</dd> - <dt><a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource référence</a></dt> - <dd>Une référence à l'API EventSource côté client.</dd> - </dl> - - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">Outils</h2> - - <ul> - <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> - <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li> - <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> - </ul> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Rubriques connexes</h2> - - <ul> - <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li> - </ul> - </td> - </tr> - </tbody> -</table> +<h2 id="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events">Utilisation des événements envoyés par le serveur</a></dt> + <dd>Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.</dd> + <dt><a href="/en-US/docs/Server-sent_events/EventSource">EventSource référence</a></dt> + <dd>Une référence à l'API EventSource côté client.</dd> +</dl> + +<h2 id="Tools">Outils</h2> + +<ul> + <li>Remy Sharp’s <a href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> + <li>Yaffle’s <a href="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li> + <li>Rick Waldron’s <a href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> +</ul> + +<h2 id="Related_Topics">Rubriques connexes</h2> + +<ul> + <li><a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets">WebSockets</a></li> +</ul> <h2 id="Voir_également">Voir également</h2> <ul> - <li>Une <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">application de type Twitter</a> alimentée par des événements envoyés par le serveur et <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">son code sur Github</a>.</li> - <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">Événements HTML5 et envoyés par le serveur</a></li> - <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Événements envoyés par le serveur à l'aide d'Asp.Net</a></li> + <li>Une <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">application de type Twitter</a> alimentée par des événements envoyés par le serveur et <a href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline">son code sur Github</a>.</li> + <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events">Événements HTML5 et envoyés par le serveur</a></li> + <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Événements envoyés par le serveur à l'aide d'Asp.Net</a></li> </ul> <h2 id="Spécification">Spécification</h2> <ul> - <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Événements envoyés par le serveur</a></li> + <li><a href="http://dev.w3.org/html5/eventsource/">Événements envoyés par le serveur</a></li> </ul> diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html index bb817baf5a..0d6c1aa33a 100644 --- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html @@ -51,8 +51,8 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events <p>Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ <code>event</code> est <code>ping</code> ; il analysera alors le JSON dans le champ <code>data</code> et l'affichera.</p> -<div class="notecard warning"> - <p><strong>Lorsque HTTP/2 n'est pas utilisé</strong>, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée <em>par le navigateur</em> et vaut 6 pour chaque origine (voir les bugs <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955">Chrome</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896">Firefox</a>). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur <code>www.example1.com</code>, 6 autres pour tous les onglets sur <code>www.example2.com</code> (voir cette réponse <a href="https://stackoverflow.com/a/5326159/1905229">Stack Overflow</a>). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.</p> +<div class="warning"> + <p><strong>Attention :</strong> <strong>Lorsque HTTP/2 n'est pas utilisé</strong>, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée <em>par le navigateur</em> et vaut 6 pour chaque origine (voir les bugs <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955">Chrome</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896">Firefox</a>). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur <code>www.example1.com</code>, 6 autres pour tous les onglets sur <code>www.example2.com</code> (voir cette réponse <a href="https://stackoverflow.com/a/5326159/1905229">Stack Overflow</a>). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.</p> </div> <h2 id="sending_events_from_the_server">Envoyer un évènement depuis le serveur</h2> @@ -99,7 +99,7 @@ while (true) { <p>La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée.</p> <div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" lang="en-US">Démonstration d'évènements serveur avec PHP.</a></p> +<p><strong>Note :</strong> Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Démonstration d'évènements serveur avec PHP.</a></p> </div> <h2 id="error_handling">Gestion des erreurs</h2> @@ -122,7 +122,7 @@ while (true) { <p>Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en <a href="/fr/docs/Glossary/UTF-8">UTF-8</a>. Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré.</p> <div class="note"> -<p><strong>Note :</strong> Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.</p> +<p><strong>Note :</strong> Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.</p> </div> <p>Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ.</p> @@ -145,7 +145,7 @@ while (true) { <p>Tous les autres noms de champs sont ignorés.</p> <div class="note"> -<p><strong>Note :</strong> Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.</p> +<p><strong>Note :</strong> Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.</p> </div> <h3 id="examples">Exemples</h3> diff --git a/files/fr/web/api/service_worker_api/index.html b/files/fr/web/api/service_worker_api/index.html index 0ef299c60c..76f29f0ca6 100644 --- a/files/fr/web/api/service_worker_api/index.html +++ b/files/fr/web/api/service_worker_api/index.html @@ -14,23 +14,23 @@ translation_of: Web/API/Service_Worker_API <p>{{ SeeCompatTable() }}</p> -<p class="summary">Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.</p> +<p>Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.</p> </div> <h2 id="Service_worker_concepts_et_usage">Service worker, concepts et usage</h2> -<p>Un service worker est un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)</p> +<p>Un service worker est un <a href="/en-US/docs/Web/API/Worker">worker</a> événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)</p> <p>Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XHR</a> en synchrone et <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> ne peuvent pas être utilisées au sein d'un service worker.</p> <p>Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.</p> <div class="note"> -<p><strong>Remarque </strong>: les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API <a class="external" href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.</p> +<p><strong>Note :</strong> les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.</p> </div> <div class="note"> -<p><strong>Remarque </strong>: les service workers font un usage intensif des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise" lang="fr">promesses</a>, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.</p> +<p><strong>Note :</strong> les service workers font un usage intensif des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">promesses</a>, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.</p> </div> <h3 id="Enregistrement">Enregistrement</h3> @@ -64,7 +64,7 @@ translation_of: Web/API/Service_Worker_API <p>Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.</p> <div class="note"> -<p><strong>Remarque </strong>: Parce que <code>oninstall</code>/<code>onactivate</code> pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode <code>waitUntil</code> qui, lorsque <code>oninstall</code> ou <code>onactivate</code> sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.</p> +<p><strong>Note :</strong> Parce que <code>oninstall</code>/<code>onactivate</code> pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode <code>waitUntil</code> qui, lorsque <code>oninstall</code> ou <code>onactivate</code> sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.</p> </div> <p>Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Services Workers</a>.</p> @@ -86,7 +86,7 @@ translation_of: Web/API/Service_Worker_API <p>À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :</p> <ul> - <li><a class="external" href="https://github.com/slightlyoff/BackgroundSync">Synchronisation en arrière-plan</a> : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.</li> + <li><a href="https://github.com/slightlyoff/BackgroundSync">Synchronisation en arrière-plan</a> : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.</li> <li><a href="/fr/docs/Web/API/Push_API">Réagir à des messages de push </a>: démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.</li> <li>Réagir à une date particulière</li> <li>Enregistrer une géo-localisation</li> @@ -165,10 +165,10 @@ translation_of: Web/API/Service_Worker_API <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> - <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utilisation des Service Workers</a></li> - <li><a class="external" href="https://github.com/mdn/sw-test">Exemple basique de Service workers</a></li> - <li><a class="external" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> + <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Exemple basique de Service workers</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a></li> <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li> </ul> diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.html b/files/fr/web/api/service_worker_api/using_service_workers/index.html index 8225067a3b..1af137c1f5 100644 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.html +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.html @@ -13,9 +13,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>{{ SeeCompatTable() }}</p> -<div class="summary"> <p>Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.</p> -</div> <h2 id="Le_préambule_aux_Service_Workers">Le préambule aux Service Workers</h2> @@ -24,7 +22,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> de Jake Archibald pour plus de détails.</p> <div class="note"> -<p><strong>Remarque </strong>: à partir de Firefox 44, lorsque <a href="/fr/docs/Web/HTML/Utiliser_Application_Cache">AppCache</a> est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p> +<p><strong>Note :</strong> à partir de Firefox 44, lorsque <a href="/fr/docs/Web/HTML/Utiliser_Application_Cache">AppCache</a> est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p> </div> <p>Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de <a href="http://offlinefirst.org/">Offline First</a>). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.</p> @@ -43,8 +41,6 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h2 id="Architecture_de_base">Architecture de base</h2> -<p><img alt="" src="https://mdn.mozillademos.org/files/8241/flowchart-production-version.png" style="float: right; height: 600px; margin-left: 20px; width: 300px;"></p> - <p>Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :</p> <ol> @@ -57,6 +53,8 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <li>Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le <code>register()</code> ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.</li> </ol> +<p><img alt="" src="sw-lifecycle.png"></p> + <h3 id="Promesses">Promesses</h3> <p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Les Promesses</a> sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.<br> @@ -67,7 +65,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="sync">sync</h4> -<pre class="brush: js notranslate">try { +<pre class="brush: js">try { var value = myFunction(); console.log(value); } catch(err) { @@ -76,7 +74,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <h4 id="async">async</h4> -<pre class="brush: js notranslate">myFunction().then(function(value) { +<pre class="brush: js">myFunction().then(function(value) { console.log(value); }).catch(function(err) { console.log(err); @@ -89,10 +87,10 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du <a href="https://github.com/mdn/promises-test">test de promesses</a> pour le code source, ou <a href="https://mdn.github.io/promises-test/">le voir fonctionner en direct</a>.)</p> <div class="note"> -<p><strong>Remarque </strong>: la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.</p> +<p><strong>Note :</strong> la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.</p> </div> -<pre class="brush: js notranslate">function imgLoad(url) { +<pre class="brush: js">function imgLoad(url) { return new Promise(function(resolve, reject) { var request = new XMLHttpRequest(); request.open('GET', url); @@ -118,7 +116,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers <p>Lorsqu'on appelle la fonction <code>imgLoad()</code>, on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :</p> -<pre class="brush: js notranslate">var body = document.querySelector('body'); +<pre class="brush: js">var body = document.querySelector('body'); var myImage = new Image(); imgLoad('myLittleVader.jpg').then(function(response) { @@ -134,22 +132,21 @@ imgLoad('myLittleVader.jpg').then(function(response) { <p>Le tout se déroule de manière asynchrone.</p> <div class="note"> -<p><strong>Remarque </strong>: il est possible d'assembler des appels de promesse, par exemple:<br> +<p><strong>Note :</strong> il est possible d'assembler des appels de promesse, par exemple:<br> <code>myPromise().then(success, failure).then(success).catch(failure);</code></p> </div> <div class="note"> -<p><strong>Remarque </strong>: pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p> +<p><strong>Note :</strong> pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p> </div> <h2 id="Démo_de_service_workers">Démo de service workers</h2> <p>Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée <a href="https://github.com/mdn/sw-test">sw-test</a>, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> - <br> - <br> - Vous pouvez consulter le <a href="https://github.com/mdn/sw-test/">code source sur GitHub</a>, et <a href="https://mdn.github.io/sw-test/">voir l'exemple en direct</a>. Le bout de code qui sera appelé est la promesse (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), qui est une version modifiée du code présenté ci-dessus, dans la <a href="https://github.com/mdn/promises-test">démo du test de promesses</a>. Il en diffère de la façon suivante :</p> +<p><img alt="" src="demo-screenshot.png"></p> + +<p>Vous pouvez consulter le <a href="https://github.com/mdn/sw-test/">code source sur GitHub</a>, et <a href="https://mdn.github.io/sw-test/">voir l'exemple en direct</a>. Le bout de code qui sera appelé est la promesse (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), qui est une version modifiée du code présenté ci-dessus, dans la <a href="https://github.com/mdn/promises-test">démo du test de promesses</a>. Il en diffère de la façon suivante :</p> <ol> <li>Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle <code>for()</code>, cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)</li> @@ -165,7 +162,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { <p>Le premier bloc de code dans le fichier JavaScript de l'application — <code>app.js</code> — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) { // registration worked console.log('Registration succeeded. Scope is ' + reg.scope); @@ -188,11 +185,11 @@ imgLoad('myLittleVader.jpg').then(function(response) { Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.</p> <div class="note"> -<p><strong>Remarque </strong>: un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.</p> +<p><strong>Note :</strong> un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.</p> </div> <div class="note"> -<p><strong>Remarque </strong>: une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.</p> +<p><strong>Note :</strong> une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.</p> </div> <h4 id="Pourquoi_mon_service_worker_échoue_à_senregistrer">Pourquoi mon service worker échoue à s'enregistrer ?</h4> @@ -212,12 +209,12 @@ imgLoad('myLittleVader.jpg').then(function(response) { L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.</p> <div class="note"> -<p><strong>Remarque </strong>: L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la <a href="https://github.com/Polymer/topeka/blob/master/sw.js">démo Topeka de Google</a>, ou peut-être stocker les ressources dans <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> +<p><strong>Note :</strong> L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la <a href="https://github.com/Polymer/topeka/blob/master/sw.js">démo Topeka de Google</a>, ou peut-être stocker les ressources dans <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> </div> <p>Commençons cette section par l'examen d'un exemple de code — c'est le <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">premier bloc présent dans le service worker</a>:</p> -<pre class="brush: js notranslate">this.addEventListener('install', function(event) { +<pre class="brush: js">this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ @@ -244,11 +241,11 @@ imgLoad('myLittleVader.jpg').then(function(response) { </ol> <div class="note"> -<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.</p> </div> <div class="note"> -<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.</p> +<p><strong>Note :</strong> <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.</p> </div> <h3 id="Réponses_personnalisées_aux_requêtes">Réponses personnalisées aux requêtes</h3> @@ -259,7 +256,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { <p>On peut attacher un écouteur de l'événement <code>fetch</code> au service worker, puis appeler la méthode <code>respondWith()</code> sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { event.respondWith( // la magie opère ici ); @@ -267,7 +264,7 @@ imgLoad('myLittleVader.jpg').then(function(response) { <p>On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) ); @@ -281,29 +278,29 @@ imgLoad('myLittleVader.jpg').then(function(response) { <li> <p>Le constructeur <code>{{domxref("Response.Response","Response()")}}</code> permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :</p> - <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');</pre> + <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre> </li> <li> <p>La <code>Response</code> plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :</p> - <pre class="brush: js notranslate">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { + <pre class="brush: js">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { headers: { 'Content-Type': 'text/html' } })</pre> </li> <li> <p>Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :</p> - <pre class="brush: js notranslate">fetch(event.request)</pre> + <pre class="brush: js">fetch(event.request)</pre> </li> <li> <p>Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :</p> - <pre class="brush: js notranslate">caches.match('/fallback.html');</pre> + <pre class="brush: js">caches.match('/fallback.html');</pre> </li> <li> <p>On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :</p> - <pre class="brush: js notranslate">event.request.url + <pre class="brush: js">event.request.url event.request.method event.request.headers event.request.body</pre> @@ -316,7 +313,7 @@ event.request.body</pre> <p>Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return fetch(event.request); @@ -328,7 +325,7 @@ event.request.body</pre> <p>Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return fetch(event.request).then(function(response) { @@ -347,7 +344,7 @@ event.request.body</pre> <p>Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return fetch(event.request).then(function(response) { @@ -368,7 +365,7 @@ event.request.body</pre> <p>Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que <code>caches.open()</code> soit résolue :</p> -<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) { +<pre class="brush: js">this.addEventListener('fetch', function(event) { var response; event.respondWith(caches.match(event.request).catch(function() { return fetch(event.request); @@ -383,13 +380,13 @@ event.request.body</pre> })); });</pre> -<h2 id="Mettre_à_jour_le_service_worker"><a id="Updating your service worker" name="Updating your service worker">Mettre à jour le service worker</a></h2> +<h2 id="Mettre_à_jour_le_service_worker">Mettre à jour le service worker</h2> <p>Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.</p> <p>On souhaite mettre à jour l'écouteur d'événement <code>install</code> dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :</p> -<pre class="brush: js notranslate">this.addEventListener('install', function(event) { +<pre class="brush: js">this.addEventListener('install', function(event) { event.waitUntil( caches.open('v2').then(function(cache) { return cache.addAll([ @@ -417,7 +414,7 @@ event.request.body</pre> <p>Les promesses passées à <code>waitUntil()</code> bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement <code>fetch</code> du nouveau cache.</p> -<pre class="brush: js notranslate">this.addEventListener('activate', function(event) { +<pre class="brush: js">this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( @@ -438,7 +435,7 @@ event.request.body</pre> <p>Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :</p> <ul> - <li>Consulter <a>about:serviceworkers</a> pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.</li> + <li>Consulter about:serviceworkers pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.</li> <li>Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)</li> </ul> diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html index ebd6289046..97c6688183 100644 --- a/files/fr/web/api/serviceworker/index.html +++ b/files/fr/web/api/serviceworker/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/ServiceWorker --- <div>{{APIRef("Service Workers API")}}</div> -<p><span class="seoSummary">L'interface <strong><code>ServiceWorker</code></strong> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un <em>worker</em>, etc.) peuvent être associés au même service worker, chacun à travers un unique objet <code>ServiceWorker</code>.</span></p> +<p>L'interface <strong><code>ServiceWorker</code></strong> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un <em>worker</em>, etc.) peuvent être associés au même service worker, chacun à travers un unique objet <code>ServiceWorker</code>.</p> <p>Un objet <code>ServiceWorker</code> est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).</p> -<p>L'interface <code>ServiceWorker</code> est distribuée à travers différents évènements de son cycle de vie — <code>install</code> et <code>activate</code> — et d'utilisation, comme <code>fetch</code>. Un objet <code style="font-style: normal; font-weight: normal; line-height: 1.5;">ServiceWorker</code> a un état associé <span style="line-height: 1.5;">{{domxref("ServiceWorker.state")}}, lié à son cycle de vie.</span></p> +<p>L'interface <code>ServiceWorker</code> est distribuée à travers différents évènements de son cycle de vie — <code>install</code> et <code>activate</code> — et d'utilisation, comme <code>fetch</code>. Un objet <code>ServiceWorker</code> a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.</p> <h2 id="Propriétés">Propriétés</h2> @@ -45,7 +45,7 @@ translation_of: Web/API/ServiceWorker <p>Ce fragment de code provient d'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évènement pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo en direct</a>). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { navigator.serviceWorker .register('service-worker.js', { scope: './' diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.html b/files/fr/web/api/serviceworkercontainer/getregistration/index.html index 131b781087..d18712f2ff 100644 --- a/files/fr/web/api/serviceworkercontainer/getregistration/index.html +++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/ServiceWorkerContainer/getRegistration <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre> <h3 id="Paramètres">Paramètres</h3> @@ -24,7 +24,7 @@ translation_of: Web/API/ServiceWorkerContainer/getRegistration <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">navigator.serviceWorker.getRegistration('/app').then(function(registration) { +<pre class="brush: js">navigator.serviceWorker.getRegistration('/app').then(function(registration) { if(registration){ document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.'; } diff --git a/files/fr/web/api/serviceworkercontainer/index.html b/files/fr/web/api/serviceworkercontainer/index.html index 885de0d20d..9201074b47 100644 --- a/files/fr/web/api/serviceworkercontainer/index.html +++ b/files/fr/web/api/serviceworkercontainer/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/ServiceWorkerContainer <dl> <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt> - <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code style="font-style: normal;">null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd> + <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code>null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd> </dl> <dl> @@ -38,9 +38,9 @@ translation_of: Web/API/ServiceWorkerContainer <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt> <dd>Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un <code>scriptURL</code> donné.</dd> <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt> - <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd> + <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd> <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt> - <dd>Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd> + <dd>Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd> </dl> <h2 id="Exemples">Exemples</h2> @@ -89,9 +89,9 @@ translation_of: Web/API/ServiceWorkerContainer <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li> + <li><a href="/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li> <li>{{jsxref("Promise")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li> + <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li> </ul> diff --git a/files/fr/web/api/serviceworkercontainer/register/index.html b/files/fr/web/api/serviceworkercontainer/register/index.html index 6ddc659fd9..ebb85bd058 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.html +++ b/files/fr/web/api/serviceworkercontainer/register/index.html @@ -14,15 +14,15 @@ translation_of: Web/API/ServiceWorkerContainer/register --- <div>{{APIRef("Service Workers API")}}</div> -<p><span class="seoSummary">La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</span></p> +<p>La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</p> -<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous <span class="tlid-translation translation" lang="fr"><span title="">n'avez pas besoin de vérifier </span></span><span class="tlid-translation translation" lang="fr"><span title="">si </span></span>un enregistrement existe déjà.</p> +<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.</p> <p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>) +<pre class="syntaxbox"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>) .then(function(<em>serviceWorkerRegistration</em>) { ... })</pre> <h3 id="Paramètres">Paramètres</h3> @@ -31,9 +31,9 @@ translation_of: Web/API/ServiceWorkerContainer/register <dt><code>scriptURL</code></dt> <dd>L' URL du script contenant le <code>ServiceWorker</code>. Le fichier qui a enregistré le <code>ServiceWorker</code> doit avoir un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript MIME type</a> valide.</dd> <dt><code>options</code> {{optional_inline}}</dt> - <dd>Un objet contenant les options d'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span>. Les options sont: + <dd>Un objet contenant les options d'enregistrement. Les options sont: <ul> - <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; <span class="tlid-translation translation" lang="fr"><span title="">c'est-à-dire quelle plage d'URL</span></span> un <code>ServiceWorker</code> <span class="tlid-translation translation" lang="fr"><span title="">peut contrôler</span></span>. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span> d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li> + <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; c'est-à-dire quelle plage d'URL un <code>ServiceWorker</code> peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li> <li>{{non-standard_inline}} <code>type</code>: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".</li> <li>{{non-standard_inline}} <code>updateViaCache</code>: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".</li> </ul> @@ -42,7 +42,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <h3 id="Valeur_de_retour">Valeur de retour</h3> -<p>Une {{jsxref("Promise")}} <span class="tlid-translation translation" lang="fr"><span title=""> qui se résout avec un objet</span></span> {{domxref("ServiceWorkerRegistration")}}.</p> +<p>Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.</p> <h2 id="Exemples">Exemples</h2> @@ -50,7 +50,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du <code>ServiceWorker</code> dans ce cas, s'il est inclus dans <code>example.com/index.html</code>, contrôlera <code>example.com/index.html</code>, ainsi que les pages en dessous, comme <code>example.com/product/description.html</code>.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // Register a service worker hosted at the root of the // site using the default scope. navigator.serviceWorker.register('/sw.js').then( @@ -69,7 +69,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Sinon, si ce code était inclus dans une page à <code>example.com/product/description.html</code>, avec le fichier Javascript résidant à <code>example.com/product/sw.js</code>, alors le service worker ne s'appliquerait qu'aux ressources sous <code>example.com /product</code>.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // declaring scope manually navigator.serviceWorker.register('/sw.js', { scope: './' }).then( (registration) => { @@ -88,7 +88,7 @@ translation_of: Web/API/ServiceWorkerContainer/register <p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, ne s'appliquerait qu'aux ressources sous <code>example.com/product</code>.</p> -<pre class="brush: js notranslate">if ('serviceWorker' in navigator) { +<pre class="brush: js">if ('serviceWorker' in navigator) { // declaring scope manually navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( (registration) => { @@ -102,7 +102,7 @@ translation_of: Web/API/ServiceWorkerContainer/register console.log('Service workers are not supported.') }</pre> -<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed" id="ref-for-service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p> +<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/serviceworkerglobalscope/index.html b/files/fr/web/api/serviceworkerglobalscope/index.html index a114ee3ee4..49afb28427 100644 --- a/files/fr/web/api/serviceworkerglobalscope/index.html +++ b/files/fr/web/api/serviceworkerglobalscope/index.html @@ -92,7 +92,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope <p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p> -<pre class="brush: js notranslate">self.addEventListener('fetch', function(event) { +<pre class="brush: js">self.addEventListener('fetch', function(event) { console.log('Handling fetch event for', event.request.url); event.respondWith( @@ -146,7 +146,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope <ul> <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> - <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> - <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> + <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> + <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> <li>{{jsxref("Promise")}}</li> </ul> diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html index fea0aee57c..a3dedb93af 100644 --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html @@ -13,23 +13,23 @@ translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick --- <p>{{APIRef("Service Workers API")}}</p> -<p><span class="seoSummary">La propriété <strong><code>ServiceWorkerGlobalScope.onnotificationclick</code></strong> est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.</span></p> +<p>La propriété <strong><code>ServiceWorkerGlobalScope.onnotificationclick</code></strong> est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p> <p>Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet <code>Notification</code> lui-même.</p> <div class="note"> -<p><strong>Note</strong>: Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.</p> +<p><strong>Note :</strong> Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.</p> </div> -<h2 id="Syntaxe" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js notranslate" style="font-size: 14px;">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... } +<pre class="brush: js">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... } ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... } </pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">self.onnotificationclick = (event) => { +<pre class="brush: js">self.onnotificationclick = (event) => { console.log('On notification click: ', event.notification.tag) event.notification.close() @@ -56,7 +56,7 @@ ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... } <table class="standard-table"> <tbody> <tr> - <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th> + <th scope="col">Spécification</th> <th scope="col">État</th> <th scope="col">Commentaire</th> </tr> diff --git a/files/fr/web/api/serviceworkerregistration/active/index.html b/files/fr/web/api/serviceworkerregistration/active/index.html index 72ef793946..257fc3eb90 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.html +++ b/files/fr/web/api/serviceworkerregistration/active/index.html @@ -5,33 +5,33 @@ translation_of: Web/API/ServiceWorkerRegistration/active --- <div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> -<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code style="font-style: normal;">activating</code> ou <code style="font-style: normal;">activated</code>. Cette propriété est initialement définie à <code style="font-style: normal;">null</code>.</p> +<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code>activating</code> ou <code>activated</code>. Cette propriété est initialement définie à <code>null</code>.</p> <p>Un <em>worker</em> actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option <code>scope</code> définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)</p> <div class="note"> -<p><strong>Note</strong> : Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> -<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox" style="font-size: 14px;">sw = ServiceWorker.active +<pre class="syntaxbox">sw = ServiceWorker.active </pre> <h3 id="Valeur">Valeur</h3> <p>Un objet {{domxref("ServiceWorker")}}, si le <em>worker</em> est actuellement dans un état <code>activating</code> ou <code>activated</code>.</p> -<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <div> </div> <table class="standard-table"> <tbody> <tr> - <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th> - <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Statut</span></font></th> - <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Commentaire</span></font></th> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> </tr> <tr> <td>{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td> diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html index da50d1745a..23379e7520 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/ServiceWorkerRegistration/getNotifications --- <div>{{APIRef("Service Workers API")}}</div> -<p><span class="seoSummary">La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</span></p> +<p>La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.getNotifications(<em>options</em>) +<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.getNotifications(<em>options</em>) .then(function(<em>notificationsList</em>) { ... })</pre> <h3 id="Paramétres">Paramétres</h3> @@ -39,7 +39,7 @@ translation_of: Web/API/ServiceWorkerRegistration/getNotifications <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js') +<pre class="brush: js">navigator.serviceWorker.register('sw.js') const options = { tag: 'user_alerts' } diff --git a/files/fr/web/api/serviceworkerregistration/index.html b/files/fr/web/api/serviceworkerregistration/index.html index 15606c9603..7412dfa554 100644 --- a/files/fr/web/api/serviceworkerregistration/index.html +++ b/files/fr/web/api/serviceworkerregistration/index.html @@ -18,12 +18,12 @@ translation_of: Web/API/ServiceWorkerRegistration <div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div> </div> -<p><span class="seoSummary">The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</span></p> +<p>The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</p> <p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p> <div class="note"> -<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Properties">Properties</h2> @@ -33,17 +33,17 @@ translation_of: Web/API/ServiceWorkerRegistration <dl> <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt> <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd> - <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dt>{{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}</dt> <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd> - <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dt>{{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}</dt> <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd> - <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt> + <dt>{{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}</dt> <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd> <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt> <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd> <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd> - <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt> + <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong>{{non-standard_inline}} </strong>{{readonlyinline}} </dt> <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd> </dl> @@ -58,7 +58,7 @@ translation_of: Web/API/ServiceWorkerRegistration <dl> <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt> - <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd> + <dd>An <a href="/en-US/docs/Web/API/EventListener"><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd> </dl> <h2 id="Methods">Methods</h2> diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.html b/files/fr/web/api/serviceworkerregistration/scope/index.html index 63627cbb8a..19ef530db5 100644 --- a/files/fr/web/api/serviceworkerregistration/scope/index.html +++ b/files/fr/web/api/serviceworkerregistration/scope/index.html @@ -13,15 +13,15 @@ translation_of: Web/API/ServiceWorkerRegistration/scope --- <div>{{APIRef("Service Workers API")}}</div> -<p><span class="seoSummary">La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</span></p> +<p>La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</p> <div class="note"> -<p><strong>Note</strong>: Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.scope</pre> +<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.scope</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html index d65ab4a999..fa1c3dfab1 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html @@ -14,10 +14,10 @@ translation_of: Web/API/ServiceWorkerRegistration/showNotification --- <p>{{APIRef("Service Workers API")}}</p> -<p><span class="seoSummary">La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</span></p> +<p>La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</p> <div class="note"> -<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/settimeout/index.html b/files/fr/web/api/settimeout/index.html index 351b32953b..c487fcc22f 100644 --- a/files/fr/web/api/settimeout/index.html +++ b/files/fr/web/api/settimeout/index.html @@ -34,7 +34,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout </dl> <div class="note"> -<p><strong>Note</strong> : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p> +<p><strong>Note :</strong> La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p> </div> <h3 id="Valeur_de_retour">Valeur de retour</h3> @@ -85,7 +85,7 @@ function clearAlert() { <p><strong>Note :</strong> Voir aussi les exemples pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples"><code>clearTimeout()</code></a>.</p> </div> -<h2 id="Prothèse_d'émulation_(polyfill)"><a name="polyfill">Prothèse d'émulation (<em>polyfill</em>)</a></h2> +<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> <p>S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :</p> @@ -217,7 +217,9 @@ setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2); <h3 id="Solutions_éventuelles">Solutions éventuelles</h3> -<p class="note"><strong>Note</strong>: JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p> +<div class="note"> + <p><strong>Note :</strong> JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p> +</div> <p>Exemple d'utilisation :</p> @@ -254,7 +256,7 @@ window.setTimeout("console.log('Coucou monde !');", 500); <p>Une chaîne de caractères passée à <code>setTimeout</code> sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de <code>setTimeout()</code> ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.</p> -<h3 id="Durée_plus_longue_que_le_paramètre_indiquée"><a id="durée" name="durée">Durée plus longue que le paramètre indiquée</a></h3> +<h3 id="Durée_plus_longue_que_le_paramètre_indiquée">Durée plus longue que le paramètre indiquée</h3> <p>Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.</p> @@ -262,30 +264,30 @@ window.setTimeout("console.log('Coucou monde !');", 500); <p>Dans les navigateurs récents les appels à <code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :</p> -<pre class="brush: js" id="ct-0">function cb() { f(); setTimeout(cb, 0); } +<pre class="brush: js">function cb() { f(); setTimeout(cb, 0); } setTimeout(cb, 0);</pre> <pre class="brush: js">setInterval(f, 0);</pre> <p>Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel, Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite <code>setInterval()</code> de la même façon depuis la <a href="/fr/docs/Mozilla/Firefox/Releases/56">version 56</a>.</p> -<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p> +<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p> <p>Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.</p> <div class="note"> -<p><strong>Note </strong>: Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p> +<p><strong>Note :</strong> Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p> </div> <div class="note"> -<p><strong>Note</strong> : Cette durée de 4 ms est <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p> +<p><strong>Note :</strong> Cette durée de 4 ms est <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p> </div> <h4 id="Précision_minimale_des_minuteurs_pour_les_onglets_inactifs_plus_de_1000ms">Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms</h4> <p>Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.</p> -<p>Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <span class="comment-copy"><code>dom.min_background_timeout_value</code>.</span> Chrome implémente ce comportement depuis la version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p> +<p>Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <code>dom.min_background_timeout_value</code>. Chrome implémente ce comportement depuis la version 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>).</p> <p>Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf. {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.</p> diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html index 033fbf323e..a42192a6a2 100644 --- a/files/fr/web/api/shadowroot/delegatesfocus/index.html +++ b/files/fr/web/api/shadowroot/delegatesfocus/index.html @@ -13,8 +13,8 @@ translation_of: Web/API/ShadowRoot/delegatesFocus <p><strong><code>delegatesFocus</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option <code>delegatesFocus</code> a été intialisée lors de l'attachement de la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</p> -<div class="blockIndicator warning"> -<p><strong>Attention !</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html index 8aaece5361..1e5e6b0351 100644 --- a/files/fr/web/api/sharedworker/index.html +++ b/files/fr/web/api/sharedworker/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/SharedWorker <p>L'interface <code><strong>SharedWorker</strong></code> représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.</p> <div class="note"> -<p><strong>Remarque :</strong> si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p> +<p><strong>Note :</strong> Si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p> </div> <h2 id="Constructeurs">Constructeurs</h2> @@ -45,45 +45,45 @@ translation_of: Web/API/SharedWorker <h2 id="Exemple">Exemple</h2> -<p>Dans notre <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p> +<p>Dans notre <a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p> <p>L'extrait de code suivant illustre la création d'un objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p> -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">SharedWorker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre> <p>Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode <code>start()</code> :</p> -<pre class="brush: js language-js"><code class="language-js">myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">myWorker.port.start();</pre> <p>Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p> -<pre class="brush: js language-js"><code class="language-js">first<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> +<pre class="brush: js">first.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message envoyé au worker'); + } - second<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + second.onchange = function() { + myWorker.port.postMessage([first.value,second.value]); + console.log('Message envoyé au worker'); + } - myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - result1<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message reçu du worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span></code></pre> + myWorker.port.onmessage = function(e) { + result1.textContent = e.data; + console.log('Message reçu du worker'); + }</pre> <p>Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} <code>start()</code> pour démarrer le port, et le gestionnaire <code>onmessage</code> pour s'occuper des messages en provenance des threads principaux.</p> -<pre class="brush: js language-js"><code class="language-js">onconnect <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> port <span class="operator token">=</span> e<span class="punctuation token">.</span>ports<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<pre class="brush: js">onconnect = function(e) { + var port = e.ports[0]; - port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> workerResult <span class="operator token">=</span> <span class="string token">'Result: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">*</span> e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span>workerResult<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + port.onmessage = function(e) { + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.postMessage(workerResult); + } - port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + port.start(); +}</pre> <h2 id="Spécifications">Spécifications</h2> @@ -102,7 +102,7 @@ translation_of: Web/API/SharedWorker </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.SharedWorker")}}</p> @@ -110,5 +110,5 @@ translation_of: Web/API/SharedWorker <ul> <li>{{ domxref("Worker") }}</li> - <li><a class="internal" href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li> + <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li> </ul> diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html index 80605091d8..22bd830ee7 100644 --- a/files/fr/web/api/sharedworker/port/index.html +++ b/files/fr/web/api/sharedworker/port/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/SharedWorker/port <pre class="brush: js">var myWorker = new SharedWorker('worker.js'); myWorker.port.start();</pre> -<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a class="external external-icon" href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p> +<p>Pour un exemple complet, voir <a href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html index fb98ecbe33..c4c35fb16d 100644 --- a/files/fr/web/api/sharedworker/sharedworker/index.html +++ b/files/fr/web/api/sharedworker/sharedworker/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/SharedWorker/SharedWorker <p>Le constructeur <code><strong>SharedWorker()</strong></code> crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la <a href="/fr/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p> <div class="note"> -<p><strong>Remarque</strong>: Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p> +<p><strong>Note :</strong> Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -68,7 +68,7 @@ myWorker.port.onmessage = function(e) { console.log('Message received from worker'); }</pre> -<p>Pour l'exemple en complet, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p> +<p>Pour l'exemple en complet, voir <a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html index 1d2fde68f1..7440932b75 100644 --- a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html +++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html @@ -6,7 +6,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/applicationCache <div>{{APIRef("Web Workers API")}}</div> <div class="warning"> -<p><strong>Important</strong>: Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les <a href="/fr/docs/Web/API/Service_Worker_API">services workers.</a></p> +<p><strong>Attention :</strong> Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les <a href="/fr/docs/Web/API/Service_Worker_API">services workers.</a></p> </div> <p>La propriété en lecture seule <code><strong>applicationCache</strong></code> de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le <em>worker</em> (voir <a href="/fr/docs/Web/HTML/Using_the_application_cache">Utiliser le cache d'application</a>).</p> @@ -25,7 +25,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/applicationCache <pre class="brush: js">self.applicationCache</pre> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html index 1609e094ba..88b05cd2d7 100644 --- a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html +++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html @@ -28,10 +28,10 @@ translation_of: Web/API/SharedWorkerGlobalScope/onconnect port.start(); }</pre> -<p>Pour l'exemple complet en fonctionnement, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p> +<p>Pour l'exemple complet en fonctionnement, voir <a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p> -<div class="blockIndicator note"> -<p><strong>Remarque</strong>: La propriété <code>data</code> de l'objet évènement est <code>null</code> dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).</p> +<div class="note"> +<p><strong>Note :</strong> La propriété <code>data</code> de l'objet évènement est <code>null</code> dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -51,7 +51,7 @@ translation_of: Web/API/SharedWorkerGlobalScope/onconnect </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/speechrecognition/index.html b/files/fr/web/api/speechrecognition/index.html index cfb56e343e..60b7ce9ab6 100644 --- a/files/fr/web/api/speechrecognition/index.html +++ b/files/fr/web/api/speechrecognition/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/SpeechRecognition --- <p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> -<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p> +<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p> <h2 id="Constructeur">Constructeur</h2> diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html index 8d9d33100a..c177f94657 100644 --- a/files/fr/web/api/storage/clear/index.html +++ b/files/fr/web/api/storage/clear/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/Storage/clear }</pre> <div class="note"> -<p><strong>Note</strong>: Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p> +<p><strong>Note :</strong> Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -63,5 +63,5 @@ translation_of: Web/API/Storage/clear <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li> + <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li> </ul> diff --git a/files/fr/web/api/storage/getitem/index.html b/files/fr/web/api/storage/getitem/index.html index a81ccb0ccf..1e3f950436 100644 --- a/files/fr/web/api/storage/getitem/index.html +++ b/files/fr/web/api/storage/getitem/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Storage/getItem <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>); +<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>); </pre> <h3 id="Paramètre">Paramètre</h3> @@ -31,7 +31,7 @@ translation_of: Web/API/Storage/getItem <p>La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .</p> -<pre class="brush: js notranslate">function setStyles() { +<pre class="brush: js">function setStyles() { var currentColor = localStorage.getItem('bgcolor'); var currentFont = localStorage.getItem('font'); var currentImage = localStorage.getItem('image'); @@ -46,7 +46,7 @@ translation_of: Web/API/Storage/getItem }</pre> <div class="note"> -<p><strong>Note</strong>: Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</a>.</p> +<p><strong>Note :</strong> Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -74,4 +74,4 @@ translation_of: Web/API/Storage/getItem <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p> +<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p> diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html index 50cbfaaabe..97e9160b4c 100644 --- a/files/fr/web/api/storage/key/index.html +++ b/files/fr/web/api/storage/key/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/Storage/key }</pre> <div class="note"> -<p><strong>Note</strong>: Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +<p><strong>Note :</strong> Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> </div> <h2 id="Autre_exemple">Autre exemple</h2> diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html index 09ccc26c76..b8479be8fa 100644 --- a/files/fr/web/api/storage/length/index.html +++ b/files/fr/web/api/storage/length/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/Storage/length }</pre> <div class="note"> -<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html index f978fceb95..40a61a48e0 100644 --- a/files/fr/web/api/storage/removeitem/index.html +++ b/files/fr/web/api/storage/removeitem/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/Storage/removeItem <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>nomCle</em>);</pre> +<pre class="syntaxbox"><em>storage</em>.removeItem(<em>nomCle</em>);</pre> <h3 id="Paramètres">Paramètres</h3> <dl> - <dt><em><u>nomCle</u></em></dt> + <dt><code>nomCle</code></dt> <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd> </dl> @@ -33,7 +33,7 @@ translation_of: Web/API/Storage/removeItem <p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { localStorage.setItem('bgcolor', 'red'); localStorage.setItem('font', 'Helvetica'); localStorage.setItem('image', 'myCat.png'); @@ -43,7 +43,7 @@ translation_of: Web/API/Storage/removeItem <p>Nous pouvons également faire ceci avec le stockage de session.</p> -<pre class="brush: js notranslate">function populateStorage() { +<pre class="brush: js">function populateStorage() { <code>sessionStorage</code>.setItem('bgcolor', 'red'); <code>sessionStorage</code>.setItem('font', 'Helvetica'); <code>sessionStorage</code>.setItem('image', 'myCat.png'); @@ -52,7 +52,7 @@ translation_of: Web/API/Storage/removeItem }</pre> <div class="note"> -<p><strong>Note</strong>: Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +<p><strong>Note :</strong> Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -80,4 +80,4 @@ translation_of: Web/API/Storage/removeItem <h2 id="Voir_aussi">Voir aussi</h2> -<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p> +<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p> diff --git a/files/fr/web/api/storage/setitem/index.html b/files/fr/web/api/storage/setitem/index.html index 88bc71a4d1..ce945681ff 100644 --- a/files/fr/web/api/storage/setitem/index.html +++ b/files/fr/web/api/storage/setitem/index.html @@ -45,7 +45,7 @@ translation_of: Web/API/Storage/setItem }</pre> <div class="note"> -<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> +<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/storage_api/index.html b/files/fr/web/api/storage_api/index.html index 69ea4358b3..fe7135c1d3 100644 --- a/files/fr/web/api/storage_api/index.html +++ b/files/fr/web/api/storage_api/index.html @@ -26,7 +26,7 @@ translation_of: Web/API/Storage_API <p>Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule <strong>unité de stockage de site</strong> pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).</p> -<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="https://mdn.mozillademos.org/files/14379/StorageUnits.png" style="height: 412px; width: 600px;"></p> +<p><img alt="Un diagramme illustrant la façon dont l'espace de stockage du site se compose de plusieurs unités de stockage qui contienne des données de différentes API ainsi que l'espace libre restant avant que le quota soit atteint." src="storageunits.png"></p> <ul> <li>L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.</li> @@ -54,7 +54,7 @@ translation_of: Web/API/Storage_API <p>Si le site ou l’application a la permission sur la fonctionnalité <strong><code>"persistent-storage"</code></strong>, il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (<em>flags</em>), algorithmes et types associés à la permission <code>"persistent-storage"</code>, sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que <strong>l’état de permission</strong> doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas <code>"granted"</code> (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours <code>"best-effort"</code>.</p> <div class="note"> -<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> pour plus de détails sur l’obtension et la gestion des permissions.</p> +<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> pour plus de détails sur l’obtension et la gestion des permissions.</p> </div> <p>Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.</p> diff --git a/files/fr/web/api/storagemanager/estimate/index.html b/files/fr/web/api/storagemanager/estimate/index.html index 3b069c91ba..c94942b615 100644 --- a/files/fr/web/api/storagemanager/estimate/index.html +++ b/files/fr/web/api/storagemanager/estimate/index.html @@ -21,7 +21,7 @@ translation_of: Web/API/StorageManager/estimate <p>Il est possible de constater que le <code>quota</code> varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.</p> diff --git a/files/fr/web/api/storagemanager/persist/index.html b/files/fr/web/api/storagemanager/persist/index.html index 7509749363..8a8c15f76f 100644 --- a/files/fr/web/api/storagemanager/persist/index.html +++ b/files/fr/web/api/storagemanager/persist/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/StorageManager/persist --- <p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">La méthode <strong><code>persist()</code></strong> de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si la permission est accordée et le mode de boîte est persistant, et <code>false</code> dans le cas contraire.</span></p> +<p>La méthode <strong><code>persist()</code></strong> de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si la permission est accordée et le mode de boîte est persistant, et <code>false</code> dans le cas contraire.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/storagemanager/persisted/index.html b/files/fr/web/api/storagemanager/persisted/index.html index 10e6503ecb..35fcfa12c2 100644 --- a/files/fr/web/api/storagemanager/persisted/index.html +++ b/files/fr/web/api/storagemanager/persisted/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/StorageManager/persisted --- <p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p> -<p><span class="seoSummary">La propriété <strong><code>persisted</code></strong> de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si le mode de boîte est est persistant pour le stockage de votre site.</span></p> +<p>La propriété <strong><code>persisted</code></strong> de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si le mode de boîte est est persistant pour le stockage de votre site.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/streams_api/index.html b/files/fr/web/api/streams_api/index.html index 83771cdb3f..3bce14616c 100644 --- a/files/fr/web/api/streams_api/index.html +++ b/files/fr/web/api/streams_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/Streams_API --- <div>{{SeeCompatTable}}{{APIRef("Streams")}}</div> -<p class="summary">L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.</p> +<p>L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.</p> <h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> @@ -15,7 +15,7 @@ translation_of: Web/API/Streams_API <p>Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un <em>buffer</em>, <em>string</em>, ou <em>blob</em>.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p> +<p><img alt="" src="concept.png"></p> <p>Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.</p> @@ -26,7 +26,7 @@ translation_of: Web/API/Streams_API <p>Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.</p> <div class="note"> -<p><strong>Note</strong>: Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — <a href="/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, et <a href="/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p> +<p><strong>Note :</strong> Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — <a href="/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, et <a href="/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p> </div> <h2 id="Stream_interfaces">Stream interfaces</h2> @@ -74,7 +74,7 @@ translation_of: Web/API/Streams_API <h3 id="Interfaces_liées_aux_flux_doctets">Interfaces liées aux flux d'octets</h3> <div class="warning"> -<p><strong>Important</strong>: ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.</p> +<p><strong>Attention :</strong> Ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.</p> </div> <dl> @@ -96,7 +96,7 @@ translation_of: Web/API/Streams_API <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.</li> <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li> - <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li> + <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li> </ul> <p>Examples from other developers:</p> diff --git a/files/fr/web/api/stylesheet/disabled/index.html b/files/fr/web/api/stylesheet/disabled/index.html index d338299bf1..681c2c6795 100644 --- a/files/fr/web/api/stylesheet/disabled/index.html +++ b/files/fr/web/api/stylesheet/disabled/index.html @@ -3,23 +3,23 @@ title: StyleSheet.disabled slug: Web/API/StyleSheet/disabled translation_of: Web/API/StyleSheet/disabled --- -<div><font><font>{{APIRef("CSSOM")}}</font></font></div> +<div>{{APIRef("CSSOM")}}</div> -<p><font><font>La </font></font><code><strong>StyleSheet.disabled</strong></code><font><font>propriété indique si la feuille de style est empêchée de demander le document. </font><font>Une feuille de style peut être désactivé en réglant manuellement cette propriété </font></font><code>true</code><font><font>ou si elle est une forme </font><font>inactive </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>feuille de style alternatif</font></font></a><font><font> . </font><font>Notez que </font></font><code>disabled == false</code><font><font>ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).</font></font></p> +<p>La <code><strong>StyleSheet.disabled</strong></code>propriété indique si la feuille de style est empêchée de demander le document. Une feuille de style peut être désactivé en réglant manuellement cette propriété <code>true</code>ou si elle est une forme inactive <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">feuille de style alternatif</a> . Notez que <code>disabled == false</code>ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).</p> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval"><em><font><font>bool</font></font></em><font><font> = stylesheet.disabled -</font></font></pre> +<pre class="eval"><em>bool</em> = stylesheet.disabled +</pre> -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> +<h2 id="Example">Exemple</h2> -<pre><font><font>// si la feuille de style est désactivé ... </font></font><font><font> -si (stylesheet.disabled) {</font></font><font><font> - // appliquer le style en ligne </font></font> +<pre>// si la feuille de style est désactivé ... +si (stylesheet.disabled) { + // appliquer le style en ligne } </pre> -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled"><font><font>désactivée </font></font></a></p> +<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled">désactivée </a></p> diff --git a/files/fr/web/api/stylesheet/href/index.html b/files/fr/web/api/stylesheet/href/index.html index f1ff1da5ea..730d459303 100644 --- a/files/fr/web/api/stylesheet/href/index.html +++ b/files/fr/web/api/stylesheet/href/index.html @@ -3,49 +3,47 @@ title: Stylesheet.href slug: Web/API/StyleSheet/href translation_of: Web/API/StyleSheet/href --- -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p>Renvoie l'emplacement de la feuille de style.</p> -<p><font><font>Renvoie l'emplacement de la feuille de style.</font></font></p> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> - -<pre class="eval"><em><font><font>Uri</font></font></em><font><font> = stylesheet.href -</font></font></pre> +<pre class="eval"><em>Uri</em> = stylesheet.href +</pre> -<h3 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h3> +<h3 id="Parameters">Paramètres</h3> <ul> - <li><code>uri</code><font><font> Est une chaîne contenant l'URI de la feuille de style.</font></font></li> + <li><code>uri</code> Est une chaîne contenant l'URI de la feuille de style.</li> </ul> -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> - -<pre><font><font> // sur une machine locale: </font></font><font><font> - <Html> </font></font><font><font> - <Tête> </font></font><font><font> - <Link rel = "StyleSheet" href = "example.css" type = "text / css" /> </font></font><font><font> - <Script> </font></font><font><font> - Function sref () { </font></font><font><font> - Alerte (document.styleSheets [0] .href); </font></font><font><font> - }</font></font><font><font> - </ Script> </font></font><font><font> - </ Head> </font></font><font><font> - <Body> </font></font><font><font> - <Div class = "tonnerre"> Thunder </ div></font></font><font><font> - <Button onclick = "sref ()"> ss </ button></font></font><font><font> - </ Body> </font></font><font><font> - </ Html></font></font><font><font> -// retourne "fichier: //// C: /Windows/Desktop/example.css</font></font> +<h2 id="Example">Exemple</h2> + +<pre> // sur une machine locale: + <Html> + <Tête> + <Link rel = "StyleSheet" href = "example.css" type = "text / css" /> + <Script> + Function sref () { + Alerte (document.styleSheets [0] .href); + } + </ Script> + </ Head> + <Body> + <Div class = "tonnerre"> Thunder </ div> + <Button onclick = "sref ()"> ss </ button> + </ Body> + </ Html> +// retourne "fichier: //// C: /Windows/Desktop/example.css </pre> -<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2> +<h2 id="Notes">Remarques</h2> -<p><font><font>Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. </font><font>Pour les feuilles de style en ligne, la valeur de cet attribut est </font></font><code>NULL</code><font><font>.</font></font></p> +<p>Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. Pour les feuilles de style en ligne, la valeur de cet attribut est <code>NULL</code>.</p> -<p><font><font>Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.</font></font></p> +<p>Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.</p> -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href"><font><font>Href </font></font></a></p> +<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href">Href </a></p> diff --git a/files/fr/web/api/stylesheet/index.html b/files/fr/web/api/stylesheet/index.html index 6a2a414946..6732be552d 100644 --- a/files/fr/web/api/stylesheet/index.html +++ b/files/fr/web/api/stylesheet/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/StyleSheet <p>Un objet qui implémente l'interface <code>StyleSheet</code> représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.</p> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <dl> <dt>{{domxref("StyleSheet.disabled")}}</dt> @@ -32,7 +32,7 @@ translation_of: Web/API/StyleSheet <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/stylesheet/media/index.html b/files/fr/web/api/stylesheet/media/index.html index 89c03f7438..5d750c2e9c 100644 --- a/files/fr/web/api/stylesheet/media/index.html +++ b/files/fr/web/api/stylesheet/media/index.html @@ -3,33 +3,31 @@ title: StyleSheet.media slug: Web/API/StyleSheet/media translation_of: Web/API/StyleSheet/media --- -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p><strong>Media</strong> spécifie le support de destination prévu pour les informations de style.</p> -<p><strong><font><font>Media</font></font></strong><font><font> spécifie le support de destination prévu pour les informations de style.</font></font></p> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> - -<pre class="eval"><em><font><font>Medium</font></font></em><font><font> = stylesheet.media</font></font><font><font> -Stylesheet.media = </font></font><em><font><font>medium</font></font></em> +<pre class="eval"><em>Medium</em> = stylesheet.media +Stylesheet.media = <em>medium</em> </pre> -<h2 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h2> +<h2 id="Parameters">Paramètres</h2> <ul> - <li><code>medium</code><font><font> Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.</font></font></li> + <li><code>medium</code> Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.</li> </ul> -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> +<h2 id="Example">Exemple</h2> -<pre><font><font><Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" /> -</font></font></pre> +<pre><Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" /> +</pre> -<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2> +<h2 id="Notes">Remarques</h2> -<p><font><font>La valeur par défaut pour les médias est "écran".</font></font></p> +<p>La valeur par défaut pour les médias est "écran".</p> -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> -<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p> +<p>DOM Styles de niveau 2 - FEUILLE DE STYLES</p> diff --git a/files/fr/web/api/stylesheet/ownernode/index.html b/files/fr/web/api/stylesheet/ownernode/index.html index b1f3d9c1e3..d736810190 100644 --- a/files/fr/web/api/stylesheet/ownernode/index.html +++ b/files/fr/web/api/stylesheet/ownernode/index.html @@ -3,39 +3,37 @@ title: StyleSheet.ownerNode slug: Web/API/StyleSheet/ownerNode translation_of: Web/API/StyleSheet/ownerNode --- -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p><strong>OwnerNode</strong> renvoie le noeud qui associe cette feuille de style au document.</p> -<p><strong><font><font>OwnerNode</font></font></strong><font><font> renvoie le noeud qui associe cette feuille de style au document.</font></font></p> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> - -<pre class="eval"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.ownerNode -</font></font></pre> - -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> +<pre class="eval"><em>ObjRef</em> = stylesheet.ownerNode +</pre> -<pre class="eval"><font><font><Html></font></font><font><font> - <Tête></font></font><font><font> - <Link rel = "StyleSheet" href = "example.css" type = "text / css" /></font></font><font><font> - <Script></font></font><font><font> - Function stilo () {</font></font><font><font> - Alerte (document.styleSheets [0] .ownerNode);</font></font><font><font> - }</font></font><font><font> - </ Script> </font></font><font><font> - </ Head></font></font><font><font> - <Body></font></font><font><font> - <Button onclick = "stilo ()"> ss </ button></font></font><font><font> - </ Body></font></font><font><font> -</ Html></font></font><font><font> -// affiche "objet HTMLLinkElement"</font></font> +<h2 id="Example">Exemple</h2> + +<pre class="eval"><Html> + <Tête> + <Link rel = "StyleSheet" href = "example.css" type = "text / css" /> + <Script> + Function stilo () { + Alerte (document.styleSheets [0] .ownerNode); + } + </ Script> + </ Head> + <Body> + <Button onclick = "stilo ()"> ss </ button> + </ Body> +</ Html> +// affiche "objet HTMLLinkElement" </pre> -<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2> +<h2 id="Notes">Remarques</h2> -<p><font><font>Pour HTML, </font></font><strong><font><font>ownerNode</font></font></strong><font><font> peut être l' </font><font>élément </font></font><a href="en/LINK"><font><font>LINK</font></font></a><font><font> ou </font></font><a href="en/STYLE"><font><font>STYLE</font></font></a><font><font> correspondant </font><font>. </font><font>Pour XML, il peut s'agir des instructions de traitement de liaison. </font><font>Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.</font></font></p> +<p>Pour HTML, <strong>ownerNode</strong> peut être l' élément <a href="en/LINK">LINK</a> ou <a href="en/STYLE">STYLE</a> correspondant . Pour XML, il peut s'agir des instructions de traitement de liaison. Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.</p> -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> -<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p> +<p>DOM Styles de niveau 2 - FEUILLE DE STYLES</p> diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.html b/files/fr/web/api/stylesheet/parentstylesheet/index.html index 8db8ffbff9..1f0d852edf 100644 --- a/files/fr/web/api/stylesheet/parentstylesheet/index.html +++ b/files/fr/web/api/stylesheet/parentstylesheet/index.html @@ -4,33 +4,31 @@ slug: Web/API/StyleSheet/parentStyleSheet translation_of: Web/API/StyleSheet/parentStyleSheet --- <div> -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> </div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p>Renvoie la feuille de style qui inclut celle-ci, le cas échéant.</p> -<p><font><font>Renvoie la feuille de style qui inclut celle-ci, le cas échéant.</font></font></p> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> +<pre class="syntaxbox"><em>ObjRef</em> = stylesheet.parentStyleSheet +</pre> -<pre class="syntaxbox"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.parentStyleSheet -</font></font></pre> +<h2 id="Example">Exemple</h2> -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> +<pre class="brush:js">// trouve la feuille de style de niveau supérieur +If (stylesheet.parentStyleSheet) { + Feuille = stylesheet.parentStyleSheet; +} autre { + Feuille = feuille de style; +}</pre> -<pre class="brush:js"><font><font>// trouve la feuille de style de niveau supérieur</font></font><font><font> -If (stylesheet.parentStyleSheet) {</font></font><font><font> - Feuille = stylesheet.parentStyleSheet;</font></font><font><font> -} autre {</font></font><font><font> - Feuille = feuille de style;</font></font><font><font> -}</font></font></pre> +<h2 id="Notes">Remarques</h2> -<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2> +<p>Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.</p> -<p><font><font>Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.</font></font></p> - -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet"><font><font>ParentStyleSheet </font></font></a></li> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet">ParentStyleSheet </a></li> </ul> diff --git a/files/fr/web/api/stylesheet/title/index.html b/files/fr/web/api/stylesheet/title/index.html index a33fd45920..2892d25b2f 100644 --- a/files/fr/web/api/stylesheet/title/index.html +++ b/files/fr/web/api/stylesheet/title/index.html @@ -4,19 +4,17 @@ slug: Web/API/StyleSheet/title translation_of: Web/API/StyleSheet/title --- <div> -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> </div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p><code>title</code> Renvoie le titre de conseil de la feuille de style actuelle.</p> -<p><code>title</code><font><font> Renvoie le titre de conseil de la feuille de style actuelle.</font></font></p> +<h2 id="Notes">Remarques</h2> -<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2> +<p>Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.</p> -<p><font><font>Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.</font></font></p> - -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> +<h2 id="Specification">spécification</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title"><font><font>Titre </font></font></a></li> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title">Titre </a></li> </ul> diff --git a/files/fr/web/api/stylesheet/type/index.html b/files/fr/web/api/stylesheet/type/index.html index eb315e2871..3b2ce12fe1 100644 --- a/files/fr/web/api/stylesheet/type/index.html +++ b/files/fr/web/api/stylesheet/type/index.html @@ -3,22 +3,20 @@ title: StyleSheet.type slug: Web/API/StyleSheet/type translation_of: Web/API/StyleSheet/type --- -<div><font><font>{{APIRef ("CSSOM")}}</font></font></div> +<div>{{APIRef ("CSSOM")}}</div> -<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2> +<p>Type spécifie la langue de la feuille de style pour cette feuille de style.</p> -<p><font><font>Type spécifie la langue de la feuille de style pour cette feuille de style.</font></font></p> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2> +<pre class="eval"><em>String</em> = stylesheet.type +</pre> -<pre class="eval"><em><font><font>String</font></font></em><font><font> = stylesheet.type -</font></font></pre> +<h2 id="Example">Exemple</h2> -<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2> +<pre> Ss.type = "text / css"; +</pre> -<pre><font><font> Ss.type = "text / css"; -</font></font></pre> +<h2 id="Specification">spécification</h2> -<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2> - -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type"><font><font>type </font></font></a></p> +<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type">type </a></p> diff --git a/files/fr/web/api/stylesheetlist/index.html b/files/fr/web/api/stylesheetlist/index.html index 37436f0469..18336eada2 100644 --- a/files/fr/web/api/stylesheetlist/index.html +++ b/files/fr/web/api/stylesheetlist/index.html @@ -10,11 +10,11 @@ translation_of: Web/API/StyleSheetList --- <p>{{APIRef("CSSOM")}}</p> -<p>L'interface <span style="font-family: consolas,monaco,andale mono,monospace;">StyleSheetList représente une liste de </span>{{domxref("StyleSheet")}}.</p> +<p>L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.</p> <p>Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. </p> -<h2 id="Example" name="Example" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array var allCSS = [].slice.call(document.styleSheets) diff --git a/files/fr/web/api/subtlecrypto/digest/index.html b/files/fr/web/api/subtlecrypto/digest/index.html index 091a59de28..eee3e4668d 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.html +++ b/files/fr/web/api/subtlecrypto/digest/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/SubtleCrypto/digest <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>; +<pre class="syntaxbox">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>; </pre> <h3 id="Paramètres">Paramètres</h3> @@ -43,8 +43,8 @@ translation_of: Web/API/SubtleCrypto/digest <p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.1, et produit un résultat de 160 bits de long.</p> -<div class="blockIndicator warning"> -<p><strong>Avertissement:</strong> Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.</p> </div> <h3 id="SHA-256">SHA-256</h3> @@ -59,8 +59,8 @@ translation_of: Web/API/SubtleCrypto/digest <p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.4, et produit un résultat de 512 bits de long.</p> -<div class="blockIndicator note"> -<p>Indice: Si vous cherchez à créer un condensé pour authentifié un message (<a href="/fr/docs/Glossary/HMAC">HMAC</a>), vous aurez plutôt besoin de <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Si vous cherchez à créer un condensé pour authentifié un message (<a href="/fr/docs/Glossary/HMAC">HMAC</a>), vous aurez plutôt besoin de <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a>.</p> </div> <h2 id="Exemples">Exemples</h2> @@ -69,7 +69,7 @@ translation_of: Web/API/SubtleCrypto/digest <p>Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.</p> -<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; +<pre class="brush: js">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; async function digestMessage(message) { const encoder = new TextEncoder(); @@ -86,7 +86,7 @@ console.log(digestBuffer.byteLength); <p>Le condensé est retourné sous forme d'un <code>ArrayBuffer</code>, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'<code>ArrayBuffer</code> vers une chaîne hexadécimale.</p> -<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; +<pre class="brush: js">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; async function digestMessage(message) { const msgUint8 = new TextEncoder().encode(message); // encode comme (utf-8) Uint8Array @@ -119,12 +119,10 @@ console.log(digestHex); <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - <p>{{Compat("api.SubtleCrypto.digest")}}</p> -<div class="blockIndicator note"> -<p> Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive <strong>crypto.subtle</strong> pour les connexions non TLS.</p> +<div class="note"> +<p><strong>Note :</strong> Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive <strong>crypto.subtle</strong> pour les connexions non TLS.</p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/subtlecrypto/index.html b/files/fr/web/api/subtlecrypto/index.html index 6788ee5bdb..b9cca851e9 100644 --- a/files/fr/web/api/subtlecrypto/index.html +++ b/files/fr/web/api/subtlecrypto/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/SubtleCrypto --- <div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div> -<p><span class="seoSummary">The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</span></p> +<p>The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</p> <div class="warning"> <p><strong>Warning:</strong> This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.</p> diff --git a/files/fr/web/api/svgaelement/index.html b/files/fr/web/api/svgaelement/index.html index 13cb5b982d..90e403be20 100644 --- a/files/fr/web/api/svgaelement/index.html +++ b/files/fr/web/api/svgaelement/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/SVGAElement </tr> <tr> <th scope="row">Document Normative</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/api/svgelement/index.html b/files/fr/web/api/svgelement/index.html index 4203624187..031175c330 100644 --- a/files/fr/web/api/svgelement/index.html +++ b/files/fr/web/api/svgelement/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/SVGElement </tr> <tr> <th scope="row">Normative document</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/api/svgmatrix/index.html b/files/fr/web/api/svgmatrix/index.html index 5566ebf569..374dd11c20 100644 --- a/files/fr/web/api/svgmatrix/index.html +++ b/files/fr/web/api/svgmatrix/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/SVGMatrix <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li> <li>{{ domxref("SVGMatrix") }} <code>translate(in float <em>x</em>, in float <em>y</em>)</code></li> <li>{{ domxref("SVGMatrix") }} <code>scale(in float <em>scaleFactor</em>)</code></li> - <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float <span style="font-style: italic;">scaleFactorX</span>, in float <em>scaleFactorY</em>)</code></li> + <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float scaleFactorX, in float <em>scaleFactorY</em>)</code></li> <li>{{ domxref("SVGMatrix") }} <code>rotate(in float<code> <em>angle</em>)</code></code></li> <li>{{ domxref("SVGMatrix") }} <code>rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code></li> <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li> @@ -63,7 +63,7 @@ translation_of: Web/API/SVGMatrix </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix" title="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> @@ -92,7 +92,7 @@ translation_of: Web/API/SVGMatrix <tr> <td><code>c</code></td> <td>float</td> - <td>Le composant <span style="font-style: italic;">c</span> de la matrice.</td> + <td>Le composant c de la matrice.</td> </tr> <tr> <td><code>d</code></td> @@ -238,6 +238,6 @@ translation_of: Web/API/SVGMatrix </tbody> </table> -<h2 id="Browser_compatibility"">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.SVGMatrix")}}</p> diff --git a/files/fr/web/api/svgrect/index.html b/files/fr/web/api/svgrect/index.html index b080a3d2e2..96251b83cf 100644 --- a/files/fr/web/api/svgrect/index.html +++ b/files/fr/web/api/svgrect/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/SVGRect </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/api/svgtitleelement/index.html b/files/fr/web/api/svgtitleelement/index.html index 922a3d3d68..1a29aaefd1 100644 --- a/files/fr/web/api/svgtitleelement/index.html +++ b/files/fr/web/api/svgtitleelement/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/SVGTitleElement </tr> <tr> <th scope="row">Norme</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement" title="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/api/syncmanager/index.html b/files/fr/web/api/syncmanager/index.html index 42819bb886..494d730c82 100644 --- a/files/fr/web/api/syncmanager/index.html +++ b/files/fr/web/api/syncmanager/index.html @@ -37,7 +37,7 @@ translation_of: Web/API/SyncManager </tbody> </table> -<h2 id="Browser_compatibility"><span style="font-size: 2.14285714285714rem;">Browser compatibility</span></h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <div> diff --git a/files/fr/web/api/text/index.html b/files/fr/web/api/text/index.html index 17d8a077cf..37dfffb61a 100644 --- a/files/fr/web/api/text/index.html +++ b/files/fr/web/api/text/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Text <p>{{InheritanceDiagram}}</p> -<h2 id="Methods" name="Methods">Constructeur</h2> +<h2 id="Methods">Constructeur</h2> <dl> <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt> @@ -49,7 +49,7 @@ translation_of: Web/API/Text </dl> <dl> - <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt> + <dt>{{domxref("Text.splitText")}}</dt> <dd>Fractionne le noeud en deux noeuds selon un décalage spécifié.</dd> </dl> @@ -96,5 +96,5 @@ translation_of: Web/API/Text <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a></li> + <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li> </ul> diff --git a/files/fr/web/api/textencoder/index.html b/files/fr/web/api/textencoder/index.html index 34f0803a9b..7fb51d5498 100644 --- a/files/fr/web/api/textencoder/index.html +++ b/files/fr/web/api/textencoder/index.html @@ -12,14 +12,14 @@ translation_of: Web/API/TextEncoder --- <p>{{APIRef("Encoding API")}}{{SeeCompatTable}}</p> -<p><code><strong>TextEncoder</strong></code> prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir <a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés</a>.</p> +<p><code><strong>TextEncoder</strong></code> prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés</a>.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que <code>utf-8</code> (tels que <code>utf-16</code>, <code>iso-8859-2</code>, <code>koi8</code>, <code>cp1261</code>, et <code>gbk</code>). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (<a href="https://www.chromestatus.com/feature/5630760492990464">ticket</a>) et Opera 41, aucun type d'encodage autre que <code>utf-8</code> n'est disponible, de manière à être en accord avec la <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécification</a>. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).</p> +<div class="note"> +<p><strong>Note :</strong> Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que <code>utf-8</code> (tels que <code>utf-16</code>, <code>iso-8859-2</code>, <code>koi8</code>, <code>cp1261</code>, et <code>gbk</code>). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (<a href="https://www.chromestatus.com/feature/5630760492990464">ticket</a>) et Opera 41, aucun type d'encodage autre que <code>utf-8</code> n'est disponible, de manière à être en accord avec la <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécification</a>. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans <a href="https://github.com/inexorabletash/text-encoding">GitHub</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans <a href="https://github.com/inexorabletash/text-encoding">GitHub</a>.</p> </div> <h2 id="Constructeur">Constructeur</h2> @@ -47,7 +47,7 @@ translation_of: Web/API/TextEncoder <dl> <dt>{{DOMxRef("TextEncoder.encode()")}}</dt> - <dd>Retourne un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> conternant un texte encodé en utf-8.</dd> + <dd>Retourne un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> conternant un texte encodé en utf-8.</dd> </dl> <h2 id="Prothèse_d'émulation">Prothèse d'émulation</h2> @@ -143,7 +143,7 @@ translation_of: Web/API/TextEncoder <ul> <li>The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.</li> - <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays</li> - <li>A <a href="https://github.com/inexorabletash/text-encoding" title="http://code.google.com/p/stringencoding/">shim</a> allowing to use this interface in browsers that don't support it.</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays</li> + <li>A <a href="https://github.com/inexorabletash/text-encoding">shim</a> allowing to use this interface in browsers that don't support it.</li> <li><code><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></code></li> </ul> diff --git a/files/fr/web/api/textencoder/textencoder/index.html b/files/fr/web/api/textencoder/textencoder/index.html index 3c00dcf5c5..739e661142 100644 --- a/files/fr/web/api/textencoder/textencoder/index.html +++ b/files/fr/web/api/textencoder/textencoder/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/TextEncoder/TextEncoder <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>encoder</var> = new TextEncoder(); +<pre class="syntaxbox"><var>encoder</var> = new TextEncoder(); </pre> <h3 id="Paramètre">Paramètre</h3> @@ -18,8 +18,8 @@ translation_of: Web/API/TextEncoder/TextEncoder <li><code>TextEncoder()</code> ne prend plus de paramètre depuis Firefox 48 et Chrome 53.</li> </ul> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet <code>TextEncoder</code>, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'<code>utf-8</code> afin de respecté les <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécifications</a>. N'importe quel indication d'encodage passé au constructeur sera ignoré et un <code>utf-8</code> <code>TextEncoder</code> sera créé.</p> +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet <code>TextEncoder</code>, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'<code>utf-8</code> afin de respecté les <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécifications</a>. N'importe quel indication d'encodage passé au constructeur sera ignoré et un <code>utf-8</code> <code>TextEncoder</code> sera créé.</p> </div> <h3 id="Exceptions">Exceptions</h3> @@ -28,8 +28,8 @@ translation_of: Web/API/TextEncoder/TextEncoder <li><code>TextEncoder()</code> ne lève plus d’exception depuis Firefox 48 et Chrome 53</li> </ul> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.</p> +<div class="note"> +<p><strong>Note :</strong> Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.</p> </div> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html index d59603163c..69436e4cb2 100644 --- a/files/fr/web/api/textmetrics/width/index.html +++ b/files/fr/web/api/textmetrics/width/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/TextMetrics/width <p>La propriété en lecture seule <strong>TextMetrics.width</strong> contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>readonly <em>metrics</em></var>.width;</pre> @@ -26,7 +26,7 @@ translation_of: Web/API/TextMetrics/width <p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p> -<pre class="brush: js;highlight:[5]">var canvas = document.getElementById("canevas"); +<pre class="brush: js">var canvas = document.getElementById("canevas"); var ctx = canvas.getContext("2d"); var texte = ctx.measureText("foo"); // objet TextMetrics diff --git a/files/fr/web/api/timeranges/index.html b/files/fr/web/api/timeranges/index.html index 2b215c1234..e2b8b214c4 100644 --- a/files/fr/web/api/timeranges/index.html +++ b/files/fr/web/api/timeranges/index.html @@ -21,9 +21,9 @@ translation_of: Web/API/TimeRanges <p>Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.</p> -<p>Le terme "<a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).</p> +<p>Le terme "<a href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).</p> -<h3 id="Properties" name="Properties">Propriétés</h3> +<h3 id="Properties">Propriétés</h3> <table class="standard-table"> <tbody> @@ -34,7 +34,7 @@ translation_of: Web/API/TimeRanges <th>Disponibilité</th> </tr> <tr> - <td><a href="/en/DOM/TimeRanges.length" title="En/DOM/TimeRanges.length"><code>TimeRanges.length</code></a></td> + <td><a href="/en/DOM/TimeRanges.length"><code>TimeRanges.length</code></a></td> <td> <p>Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>.</p> </td> @@ -46,7 +46,7 @@ translation_of: Web/API/TimeRanges </tbody> </table> -<h3 id="Methods" name="Methods">Méthodes</h3> +<h3 id="Methods">Méthodes</h3> <dl> <dt>{{ domxref("TimeRanges.start") }}</dt> @@ -58,5 +58,5 @@ translation_of: Web/API/TimeRanges <h3 id="Spécification">Spécification</h3> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#timeranges">WHATWG Working Draft</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#timeranges">WHATWG Working Draft</a></li> </ul> diff --git a/files/fr/web/api/touch_events/index.html b/files/fr/web/api/touch_events/index.html index 5ffb0c1e95..5853459757 100644 --- a/files/fr/web/api/touch_events/index.html +++ b/files/fr/web/api/touch_events/index.html @@ -16,10 +16,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events <dl> <dt>Surface</dt> <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd> -</dl> - -<dl> - <dt><strong style="font-weight: bold;">Point de toucher (<em>Touch point</em>)</strong></dt> + <dt>Point de toucher (<em>Touch point</em>)</dt> <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd> </dl> @@ -40,7 +37,9 @@ original_slug: Web/Guide/DOM/Events/Touch_events <p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p> -<div class="note"><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</div> +<div class="note"> + <p><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</p> +</div> <h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3> @@ -112,7 +111,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events <p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p> -<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p> +<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p> <h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3> @@ -139,7 +138,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events } </pre> -<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p> +<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p> <h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3> @@ -205,7 +204,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) return; - var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents"); + var newEvt = document.createEvent("MouseEvents"); var type = null; var touch = null; switch (event.type) { @@ -213,10 +212,10 @@ original_slug: Web/Guide/DOM/Events/Touch_events case "touchmove": type = "mousemove"; touch = event.changedTouches[0]; case "touchend": type = "mouseup"; touch = event.changedTouches[0]; } - newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0, + newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0, touch.screenX, touch.screenY, touch.clientX, touch.clientY, evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null); - event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt); + event.originalTarget.dispatchEvent(newEvt); } </pre> @@ -231,16 +230,14 @@ original_slug: Web/Guide/DOM/Events/Touch_events <p>{{Compat("api.Touch")}}</p> -<div id="compat-mobile"> </div> - <h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3> <p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p> -<div class="geckoVersionNote" style=""> <p>{{ gecko_callout_heading("12.0") }}</p> <p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p> -</div> -<div class="note"><strong>Note : </strong>Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</div> +<div class="note"> + <p><strong>Note :</strong> Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</p> +</div> diff --git a/files/fr/web/api/transferable/index.html b/files/fr/web/api/transferable/index.html index 2b900b05cb..564d4e4b7f 100644 --- a/files/fr/web/api/transferable/index.html +++ b/files/fr/web/api/transferable/index.html @@ -13,8 +13,8 @@ translation_of: Web/API/Transferable <p>C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.</p> -<div class="blockIndicator note"> -<p><strong>Remarque:</strong> L'interface <code>Transferable</code> n'existe plus pour longtemps. La fonctionnalité des objets <code>Transferable</code> existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu <code>[Transferable]</code> {{Glossary("WebIDL")}})</p> +<div class="note"> +<p><strong>Note :</strong> L'interface <code>Transferable</code> n'existe plus pour longtemps. La fonctionnalité des objets <code>Transferable</code> existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu <code>[Transferable]</code> {{Glossary("WebIDL")}})</p> </div> <p>Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.</p> diff --git a/files/fr/web/api/transitionevent/index.html b/files/fr/web/api/transitionevent/index.html index 8a156255f3..72c99a9f6b 100644 --- a/files/fr/web/api/transitionevent/index.html +++ b/files/fr/web/api/transitionevent/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/TransitionEvent --- <p>{{APIRef("CSSOM")}} {{SeeCompatTable}}</p> -<p>L' <code><strong>Transition</strong></code><strong><code>Event</code></strong>interface représente des événements fournissant des informations relatives aux <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/ En-US / docs / Web / Guide / CSS / Using_CSS_transitions">transitions</a> .</p> +<p>L' <code><strong>Transition</strong></code><strong><code>Event</code></strong>interface représente des événements fournissant des informations relatives aux <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions</a> .</p> <h2 id="Propriétés">Propriétés</h2> @@ -17,7 +17,7 @@ translation_of: Web/API/TransitionEvent <dt>{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}</dt> <dd>Est- <code>float</code>ce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.</dd> <dt>{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}</dt> - <dd>Est-ce qu'un {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/ En-US / docs / Web / CSS / Pseudo-elements">pseudo-élément</a> sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:<code>''</code><code>.</code></dd> + <dd>Est-ce qu'un {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:<code>''</code><code>.</code></dd> </dl> <h2 id="Constructeur">Constructeur</h2> @@ -57,118 +57,7 @@ translation_of: Web/API/TransitionEvent <h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Constructor</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("6.0") }}<br> - Removed in {{ CompatGeckoDesktop("23.0") }}</td> - <td>10.0</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>pseudoelement</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Constructor</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("6.0") }}<br> - Removed in {{ CompatGeckoMobile("23.0") }}</td> - <td>10.0</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>pseudoelement</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Removal version unknown.</p> +<p>{{Compat}}</p> <h2 id="Voir_également">Voir également</h2> diff --git a/files/fr/web/api/treewalker/currentnode/index.html b/files/fr/web/api/treewalker/currentnode/index.html index 4a57bb944d..3af4a1f311 100644 --- a/files/fr/web/api/treewalker/currentnode/index.html +++ b/files/fr/web/api/treewalker/currentnode/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/TreeWalker/currentNode <p>La propriété <code><strong>TreeWalker.currentNode</strong></code> représente le {{domxref("Node")}} (<em>noeud</em>) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.currentNode; <code><em>treeWalker</em></code>.currentNode = <em>node</em>; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ translation_of: Web/API/TreeWalker/currentNode root = treeWalker.currentNode; // l'élément racine car c'est le premier élément! </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.html b/files/fr/web/api/treewalker/expandentityreferences/index.html index 18001450cc..ee9090b598 100644 --- a/files/fr/web/api/treewalker/expandentityreferences/index.html +++ b/files/fr/web/api/treewalker/expandentityreferences/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/TreeWalker/expandEntityReferences <p>Si la valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("TreeWalker.whatToShow")}} et du filtre associé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>expand</em> = <em>treeWalker</em>.expandEntityReferences; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ translation_of: Web/API/TreeWalker/expandEntityReferences ); expand = treeWalker.expandEntityReferences;</pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/filter/index.html b/files/fr/web/api/treewalker/filter/index.html index 1872033d47..e9e2904840 100644 --- a/files/fr/web/api/treewalker/filter/index.html +++ b/files/fr/web/api/treewalker/filter/index.html @@ -15,12 +15,12 @@ translation_of: Web/API/TreeWalker/filter <p>Lors de la création du <code>TreeWalker</code>, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>nodeFilter</em> = <em>treeWalker</em>.filter; </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -31,7 +31,7 @@ translation_of: Web/API/TreeWalker/filter nodeFilter = treeWalker.filter; // document.body dans ce cas </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/firstchild/index.html b/files/fr/web/api/treewalker/firstchild/index.html index 8485e85827..25d5749df2 100644 --- a/files/fr/web/api/treewalker/firstchild/index.html +++ b/files/fr/web/api/treewalker/firstchild/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/TreeWalker/firstChild <p>La méthode <strong><code>TreeWalker.firstChild()</code></strong> déplace le {{domxref("Node")}} courant vers le premier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie <code>null</code> et le noeud courant n'est pas modifié.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.firstChild;</pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -29,7 +29,7 @@ var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/index.html b/files/fr/web/api/treewalker/index.html index 7815815f77..f5ac68fb17 100644 --- a/files/fr/web/api/treewalker/index.html +++ b/files/fr/web/api/treewalker/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/TreeWalker <p>Un <code>TreeWalker</code> peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.</p> -<h2 id="Properties" name="Properties">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> <p><em>Cette interface n'hérite d'aucune propriété.</em></p> @@ -109,12 +109,12 @@ translation_of: Web/API/TreeWalker <dd>est le {{domxref("Node")}} sur lequel le <code>TreeWalker</code> pointe actuellement.</dd> </dl> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <p><em>Cette interface n'hérite d'aucune méthode.</em></p> <div class="note"> -<p><em>Notez que le TreeWalker considère uniquement les nœuds DOM visibles..</em></p> +<p><strong>Note :</strong> Le TreeWalker considère uniquement les nœuds DOM visibles.</p> </div> <dl> @@ -134,7 +134,7 @@ translation_of: Web/API/TreeWalker <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd> </dl> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/lastchild/index.html b/files/fr/web/api/treewalker/lastchild/index.html index fdd2a862b9..c61ad55a6a 100644 --- a/files/fr/web/api/treewalker/lastchild/index.html +++ b/files/fr/web/api/treewalker/lastchild/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/lastChild <p>La méthode <strong><code>TreeWalker.lastChild()</code></strong> déplace le {{domxref("Node")}} courant au dernier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne <code>null</code> et le noeud courant reste inchangé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.lastChild(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -29,7 +29,7 @@ translation_of: Web/API/TreeWalker/lastChild var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/nextnode/index.html b/files/fr/web/api/treewalker/nextnode/index.html index 3507fea553..19b3d6e972 100644 --- a/files/fr/web/api/treewalker/nextnode/index.html +++ b/files/fr/web/api/treewalker/nextnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/nextNode <p>La méthode <strong><code>TreeWalker.nextNode()</code></strong> déplace le {{domxref("Node")}} courant au noeud suivant <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie <code>null</code> et le noeud courant est inchangé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextNode(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/nextsibling/index.html b/files/fr/web/api/treewalker/nextsibling/index.html index c13a152a47..ebf87930af 100644 --- a/files/fr/web/api/treewalker/nextsibling/index.html +++ b/files/fr/web/api/treewalker/nextsibling/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/nextSibling <p>La méthode <strong><code>TreeWalker.nextSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie <code>null</code> et le noeud courant reste inchangé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextSibling(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -31,7 +31,7 @@ var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l' </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/parentnode/index.html b/files/fr/web/api/treewalker/parentnode/index.html index 81bb1b885a..a80948ea84 100644 --- a/files/fr/web/api/treewalker/parentnode/index.html +++ b/files/fr/web/api/treewalker/parentnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/parentNode <p>La méthode <strong><code>TreeWalker.parentNode()</code></strong> déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du <em>noeud racine</em> du <code>TreeWalker</code>, elle renvoie <code>null</code> et le noeud actuel reste inchangé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.parentNode(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ var node = treeWalker.parentNode(); // returns null as there is no parent </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/previousnode/index.html b/files/fr/web/api/treewalker/previousnode/index.html index 5bc701e21c..05471ace25 100644 --- a/files/fr/web/api/treewalker/previousnode/index.html +++ b/files/fr/web/api/treewalker/previousnode/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/previousNode <p>La méthode <strong><code>TreeWalker.previousNode()</code></strong> déplace le {{domxref("Node")}} courant vers le noeud précédent <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, elle renvoie <code>null</code> et le noeud actuel n'est pas changé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousNode(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/previoussibling/index.html b/files/fr/web/api/treewalker/previoussibling/index.html index 150ccd3db9..49db9c03ad 100644 --- a/files/fr/web/api/treewalker/previoussibling/index.html +++ b/files/fr/web/api/treewalker/previoussibling/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/TreeWalker/previousSibling <p>La méthode <strong><code>TreeWalker.previousSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie <code>null</code> et le noeud actuel est inchangé.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousSibling(); </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -30,7 +30,7 @@ var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de fr </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/root/index.html b/files/fr/web/api/treewalker/root/index.html index fe89e8d850..bfa2d38c2b 100644 --- a/files/fr/web/api/treewalker/root/index.html +++ b/files/fr/web/api/treewalker/root/index.html @@ -13,11 +13,11 @@ translation_of: Web/API/TreeWalker/root <p>La propriété en lecture seule <code><strong>TreeWalker.root</strong></code> renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>root</em> = TreeWalker.root;</pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, @@ -28,7 +28,7 @@ translation_of: Web/API/TreeWalker/root root = treeWalker.root; // document.body dans ce cas </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/treewalker/whattoshow/index.html b/files/fr/web/api/treewalker/whattoshow/index.html index d0d559adbf..4e63064707 100644 --- a/files/fr/web/api/treewalker/whattoshow/index.html +++ b/files/fr/web/api/treewalker/whattoshow/index.html @@ -93,7 +93,7 @@ translation_of: Web/API/TreeWalker/whatToShow <pre class="syntaxbox"><em>nodeTypes</em> = treeWalker.whatToShow;</pre> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <pre class="brush: js">var treeWalker = document.createTreeWalker( document.body, diff --git a/files/fr/web/api/uievent/index.html b/files/fr/web/api/uievent/index.html index 342b6ae2e3..0bf32d28b4 100644 --- a/files/fr/web/api/uievent/index.html +++ b/files/fr/web/api/uievent/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/UIEvent --- <p>{{APIRef("DOM Events")}}</p> -<p><span class="seoSummary">L'interface <strong><code>UIEvent</code></strong> représente des évènements simples de l'interface utilisateur.</span></p> +<p>L'interface <strong><code>UIEvent</code></strong> représente des évènements simples de l'interface utilisateur.</p> <p><code>UIEvent</code> dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}} soit conservée pour la compatibilité ascendante, vous devez créer un objet <code>UIEvent</code> en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.</p> @@ -62,7 +62,7 @@ translation_of: Web/API/UIEvent <dl> <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt> - <dd>Initialise un objet <code>UIEvent</code>. <span id="result_box" lang="fr"><span>Si l'évènement a déjà été envoyé, cette méthode ne fait rien.</span></span></dd> + <dd>Initialise un objet <code>UIEvent</code>. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> @@ -101,9 +101,9 @@ translation_of: Web/API/UIEvent <p>{{Compat("api.UIEvent")}}</p> -<h2 class="editable" id="Voir_aussi"><span>Voir aussi</span></h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> <li>{{ domxref("Event") }}</li> </ul> diff --git a/files/fr/web/api/uievent/layerx/index.html b/files/fr/web/api/uievent/layerx/index.html index 649458c30d..c4ea6de756 100644 --- a/files/fr/web/api/uievent/layerx/index.html +++ b/files/fr/web/api/uievent/layerx/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/UIEvent/layerX <p>Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.</p> -<h2 id="Syntax" name="Syntax"><strong>Syntaxe</strong></h2> +<h2 id="Syntax"><strong>Syntaxe</strong></h2> <pre>var <em>posx</em> = <em>event</em>.layerX</pre> @@ -24,7 +24,7 @@ translation_of: Web/API/UIEvent/layerX <li><em><code>posx</code></em> est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.</li> </ul> -<h2 id="Syntax" name="Syntax"><strong>Exemples</strong></h2> +<h2 id="Syntax"><strong>Exemples</strong></h2> <pre class="eval"><html> <head> diff --git a/files/fr/web/api/url/createobjecturl/index.html b/files/fr/web/api/url/createobjecturl/index.html index 4d63b56b27..faca6b81b9 100644 --- a/files/fr/web/api/url/createobjecturl/index.html +++ b/files/fr/web/api/url/createobjecturl/index.html @@ -3,7 +3,6 @@ title: URL.createObjectURL slug: Web/API/URL/createObjectURL translation_of: Web/API/URL/createObjectURL --- -<h2 id="Summary" name="Summary">Résumé</h2> <p>{{APIRef("URL")}}<br> La méthode statique <strong>URL.createObjectURL()</strong> crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.</p> @@ -12,11 +11,11 @@ translation_of: Web/API/URL/createObjectURL <p>{{AvailableInWorkers}}</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Cette fonctionnalité n'est pas disponible dans les <a href="/fr/docs/Web/API/ServiceWorker">Service Workers</a> à cause de possible fuite mémoire.</p> +<div class="note"> +<p><strong>Note :</strong> Cette fonctionnalité n'est pas disponible dans les <a href="/fr/docs/Web/API/ServiceWorker">Service Workers</a> à cause de possible fuite mémoire.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>object</em>); </pre> @@ -30,15 +29,13 @@ translation_of: Web/API/URL/createObjectURL <h3 id="Valeur_de_retour">Valeur de retour</h3> -<dl> - <dd>Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source <code>object</code> spécifié.</dd> -</dl> +<p>Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source <code>object</code> spécifié.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a>.</p> +<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a>.</p> -<h2 id="Notes" name="Notes">Notes d’utilisation</h2> +<h2 id="Notes">Notes d’utilisation</h2> <h3 id="Gestion_de_la_mémoire">Gestion de la mémoire</h3> @@ -51,10 +48,10 @@ translation_of: Web/API/URL/createObjectURL <p>Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.</p> <div class="warning"> -<p><strong>Important :</strong> si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au <code>MediaStream</code>.</p> +<p><strong>Attention :</strong> si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au <code>MediaStream</code>.</p> </div> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spécifications</h2> +<h2 id="Browser_Compatibility">Spécifications</h2> <table class="standard-table"> <tbody> @@ -83,11 +80,11 @@ translation_of: Web/API/URL/createObjectURL <p>{{Compat("api.URL.createObjectURL")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers à partir d’applications web</a></li> - <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a></li> + <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d’applications web</a></li> + <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a></li> <li>{{domxref("URL.revokeObjectURL()")}}</li> <li>{{domxref("HTMLMediaElement.srcObject")}}</li> <li>{{domxref("FileReader.readAsDataURL()")}}</li> diff --git a/files/fr/web/api/url/hash/index.html b/files/fr/web/api/url/hash/index.html index df993c4a2f..f89d838eb1 100644 --- a/files/fr/web/api/url/hash/index.html +++ b/files/fr/web/api/url/hash/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/URL/hash --- <div>{{ APIRef("URL API") }}</div> -<p><span class="seoSummary">La propriété <strong><code>hash</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère <code>'#'</code> suivi par l'identificateur de fragment de URL.</span></p> +<p>La propriété <strong><code>hash</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère <code>'#'</code> suivi par l'identificateur de fragment de URL.</p> <p>Le fragment n'est pas <a href="/en-US/docs/Glossary/percent-encoding">décodé en pourcent</a>. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — <code>""</code>.</p> diff --git a/files/fr/web/api/url/index.html b/files/fr/web/api/url/index.html index 98ce833c1b..917fa44e1a 100644 --- a/files/fr/web/api/url/index.html +++ b/files/fr/web/api/url/index.html @@ -11,39 +11,39 @@ translation_of: Web/API/URL <p>L'interface <strong><code>URL</code></strong><strong> </strong>représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.</p> -<p><span id="result_box" lang="fr"><span>Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés</span></span> {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que <code>Window.webkitURL</code>).</p> +<p>Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que <code>Window.webkitURL</code>).</p> <p>{{AvailableInWorkers}}</p> <h2 id="Utilisation">Utilisation</h2> -<p>Le constructeur <span id="result_box" lang="fr"><span>prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :</span></span></p> +<p>Le constructeur prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> url <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'../cats'</span><span class="punctuation token">,</span> <span class="string token">'http://www.example.com/dogs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "www.example.com"</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "/cats"</span></code></pre> +<pre class="brush: js">const url = new URL('../cats', 'http://www.example.com/dogs'); +console.log(url.hostname); // "www.example.com" +console.log(url.pathname); // "/cats"</pre> <p>Les propriétés de l'URL peuvent être définies pour construire l'URL :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">url<span class="punctuation token">.</span>hash <span class="operator token">=</span> <span class="string token">'tabby'</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/cats#tabby"</span></code></pre> +<pre class="brush: js">url.hash = 'tabby'; +console.log(url.href); // "http://www.example.com/cats#tabby"</pre> <p>Les URL seront encodées selon la norme RFC 3986:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">url<span class="punctuation token">.</span>pathname <span class="operator token">=</span> <span class="string token">'démonstration.html'</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/d%C3%A9monstration.html"</span></code></pre> +<pre class="brush: js">url.pathname = 'démonstration.html'; +console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"</pre> <p>L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.</p> -<p><span id="result_box" lang="fr"><span>Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :</span></span></p> +<p>Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// https://some.site/?id=123</span> -<span class="keyword token">var</span> parsedUrl <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>location<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>parsedUrl<span class="punctuation token">.</span>searchParams<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"id"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 123</span></code></pre> +<pre class="brush: js">// https://some.site/?id=123 +var parsedUrl = new URL(window.location.href); +console.log(parsedUrl.searchParams.get("id")); // 123</pre> -<p>La méthode <code>stringifier</code> de l' <code>URL</code> est la propriété <code>href</code> , ainsi le constructeur<span id="result_box" lang="fr"><span> peut être utilisé pour normaliser et encoder directement une URL :</span></span></p> +<p>La méthode <code>stringifier</code> de l' <code>URL</code> est la propriété <code>href</code> , ainsi le constructeur peut être utilisé pour normaliser et encoder directement une URL :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'http://www.example.com/démonstration.html'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">const response = await fetch(new URL('http://www.example.com/démonstration.html'));</pre> <h2 id="Constructeur">Constructeur</h2> @@ -56,7 +56,7 @@ console<span class="punctuation token">.</span><span class="function token">log< <dl> <dt>{{domxref("URL.hash")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'#'</code> <span class="short_text" id="result_box" lang="fr"><span>suivi de l'identifiant du fragment de l'URL.</span></span></dd> + <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'#'</code> suivi de l'identifiant du fragment de l'URL.</dd> <dt>{{domxref("URL.host")}}</dt> <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'hôte, c'est-à-dire le <em>hostname (nom d'hôte)</em>, <code>':'</code>et le <em>port</em> de l'URL.</dd> <dt>{{domxref("URL.hostname")}}</dt> @@ -67,7 +67,7 @@ console<span class="punctuation token">.</span><span class="function token">log< <dl> <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt> - <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'origine de l'URL, <span class="short_text" id="result_box" lang="fr"><span>c'est son schéma, son domaine et son port</span></span> .</dd> + <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'origine de l'URL, c'est son schéma, son domaine et son port .</dd> </dl> <dl> @@ -91,19 +91,19 @@ console<span class="punctuation token">.</span><span class="function token">log< <dt>{{domxref("URL.search")}}</dt> <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'?'</code> suivi par les paramètres de l'URL.</dd> <dt>{{domxref("URL.searchParams")}}</dt> - <dd>Retourne un objet {{domxref("URLSearchParams")}} <span id="result_box" lang="fr"><span>permettant d'accéder aux arguments de requête GET contenus dans l'URL.</span></span></dd> + <dd>Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL.</dd> <dt>{{domxref("URL.username")}}</dt> - <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant<span id="result_box" lang="fr"><span> le nom d'utilisateur spécifié avant le nom de domaine.</span></span></dd> + <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd> </dl> <h2 id="Méthodes">Méthodes</h2> -<p><em>L'interface <code>URL</code> </em> <span id="result_box" lang="fr"><span>implémente les méthodes définies dans </span></span><em>{{domxref("URLUtils")}}.</em></p> +<p><em>L'interface <code>URL</code> </em> implémente les méthodes définies dans <em>{{domxref("URLUtils")}}.</em></p> <dl> <dt>{{domxref("URLUtils.toString()")}}</dt> <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.</dd> - <dt>{{domxref("URL.toJSON()")}} <sup>[disponible depuis FireFox v54]</sup></dt> + <dt>{{domxref("URL.toJSON()")}}</dt> <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière. Il retourne la même chaîne que la propriété <code>href</code> .</dd> </dl> @@ -111,9 +111,9 @@ console<span class="punctuation token">.</span><span class="function token">log< <dl> <dt>{{ domxref("URL.createObjectURL()") }}</dt> - <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un "blob URL" unique ; c'est une URL avec <code>blob :</code> <span id="result_box" lang="fr"><span>son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.</span></span></dd> + <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un "blob URL" unique ; c'est une URL avec <code>blob :</code> son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.</dd> <dt>{{ domxref("URL.revokeObjectURL()") }}</dt> - <dd><span id="result_box" lang="fr"><span>Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.</span></span></dd> + <dd>Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.</dd> </dl> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/url/revokeobjecturl/index.html b/files/fr/web/api/url/revokeobjecturl/index.html index cf838f7b8e..5785e39c30 100644 --- a/files/fr/web/api/url/revokeobjecturl/index.html +++ b/files/fr/web/api/url/revokeobjecturl/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/URL/revokeObjectURL --- <div>{{ApiRef("URL")}}</div> -<p><span class="seoSummary">La méthode statique <strong><code>URL.revokeObjectURL()</code></strong> libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}.</span> Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.</p> +<p>La méthode statique <strong><code>URL.revokeObjectURL()</code></strong> libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}. Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.</p> <p>{{AvailableInWorkers}}</p> diff --git a/files/fr/web/api/url/tojson/index.html b/files/fr/web/api/url/tojson/index.html index 8c34a37e42..3b594c32cd 100644 --- a/files/fr/web/api/url/tojson/index.html +++ b/files/fr/web/api/url/tojson/index.html @@ -29,8 +29,8 @@ translation_of: Web/API/URL/toJSON <h2 id="Exemples">Exemples</h2> -<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>); -<span class="cm-variable">url</span>.<span class="cm-property">toJSON</span>()</span></span></span> +<pre>const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"); +url.toJSON() </pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/url/tostring/index.html b/files/fr/web/api/url/tostring/index.html index 6c20fada36..f3733e2678 100644 --- a/files/fr/web/api/url/tostring/index.html +++ b/files/fr/web/api/url/tostring/index.html @@ -29,8 +29,8 @@ translation_of: Web/API/URL/toString <h2 id="Examples">Examples</h2> -<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>); -<span class="cm-variable">url</span>.<span class="cm-property">toString</span>() // doit retourner l'URL en tant que chaîne</span></span></span> +<pre class="brush: js">const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"); +url.toString() // doit retourner l'URL en tant que chaîne </pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/url/url/index.html b/files/fr/web/api/url/url/index.html index c50003de75..c0ff1cb049 100644 --- a/files/fr/web/api/url/url/index.html +++ b/files/fr/web/api/url/url/index.html @@ -11,9 +11,9 @@ translation_of: Web/API/URL/URL --- <p>{{APIRef("URL API")}}</p> -<p><span id="result_box" lang="fr"><span>Le constructeur </span></span><strong><code>URL()</code></strong><span lang="fr"><span> renvoie un nouvel objet </span></span>{{domxref("URL")}}<span lang="fr"><span> représentant l'URL définie par les paramètres.</span><br> +<p>Le constructeur <strong><code>URL()</code></strong> renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres.<br> <br> - <span>Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une </span></span>{{domxref("DOMException")}}<span lang="fr"><span> de type </span></span><code>SYNTAX_ERROR</code><span lang="fr"><span> est levée.</span></span></p> + Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est levée.</p> <p>{{AvailableInWorkers}}</p> @@ -26,17 +26,13 @@ translation_of: Web/API/URL/URL <dl> <dt><em>url</em></dt> - <dd> - <div id="gt-res-content"> - <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>Un </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant une URL absolue ou relative.</span> <span>Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base.</span> <span>Si url est une URL absolue, une base donnée sera ignorée.</span></span></div> - </div> - </dd> + <dd>Un {{domxref("USVString")}} représentant une URL absolue ou relative. Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base. Si url est une URL absolue, une base donnée sera ignorée.</dd> <dt><em>base </em>{{optional_inline}}</dt> - <dd><span id="result_box" lang="fr"><span>Un </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative.</span></span> <span id="result_box" lang="fr"><span>Si non spécifié, il est par défaut à </span></span><code>''</code><span lang="fr"><span>.</span></span></dd> + <dd>Un {{domxref("USVString")}} représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative. Si non spécifié, il est par défaut à <code>''</code>.</dd> </dl> <div class="note"> -<p><strong>Remarque </strong>: <span id="result_box" lang="fr"><span>Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.</span></span></p> +<p><strong>Note :</strong> Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.</p> </div> <h3 id="Exceptions">Exceptions</h3> @@ -51,29 +47,29 @@ translation_of: Web/API/URL/URL <tbody> <tr> <td><code>TypeError</code></td> - <td><span id="result_box" lang="fr"><span>url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.</span></span></td> + <td>url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.</td> </tr> </tbody> </table> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js language-js">var a = new URL("/", "https://developer.mozilla.org"); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/' -var b = new URL("https://developer.mozilla.org"); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/' -var c = new URL('en-US/docs', b); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs' -var d = new URL('/en-US/docs', b); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs' -var f = new URL('/en-US/docs', d); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs' +<pre class="brush: js">var a = new URL("/", "https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/' +var b = new URL("https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/' +var c = new URL('en-US/docs', b); // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs' +var d = new URL('/en-US/docs', b); // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs' +var f = new URL('/en-US/docs', d); // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs' var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto"); - // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs' -var h = new URL('/en-US/docs', a); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs' -var i = new URL('/en-US/docs', ''); // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '' n'est pas une URL valide</span></span> -var j = new URL('/en-US/docs'); // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide</span></span> + // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs' +var h = new URL('/en-US/docs', a); // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs' +var i = new URL('/en-US/docs', ''); // Déclenche une exception TypeError car '' n'est pas une URL valide +var j = new URL('/en-US/docs'); // Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide var k = new URL('http://www.example.com', 'https://developers.mozilla.com'); - // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/' -var l = new URL('http://www.example.com', b); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/' + // Crée une URL pointant vers 'http://www.example.com/' +var l = new URL('http://www.example.com', b); // Crée une URL pointant vers 'http://www.example.com/' </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -97,5 +93,5 @@ var l = new URL('http://www.example.com', b); // <span class="short_tex <h2 id="À_voir_également">À voir également</h2> <ul> - <li><span class="short_text" id="result_box" lang="fr"><span>L'interface à laquelle il appartient</span></span> : {{domxref("URL")}}.</li> + <li>L'interface à laquelle il appartient : {{domxref("URL")}}.</li> </ul> diff --git a/files/fr/web/api/urlsearchparams/entries/index.html b/files/fr/web/api/urlsearchparams/entries/index.html index af1a117d18..4f10b1bb12 100644 --- a/files/fr/web/api/urlsearchparams/entries/index.html +++ b/files/fr/web/api/urlsearchparams/entries/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/URLSearchParams/entries <p>La méthode <code><strong>URLSearchParams.entries()</strong></code> retourne un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet {{domxref("USVString")}} .</p> <div class="note"> -<p><strong>Note</strong>: This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> +<p><strong>Note :</strong> This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p> </div> <h2 id="Syntax">Syntax</h2> @@ -21,7 +21,7 @@ translation_of: Web/API/URLSearchParams/entries <h2 id="Example">Example</h2> -<pre class="brush: js;highlight:[5]">// Create a test URLSearchParams object +<pre class="brush: js">// Create a test URLSearchParams object var searchParams = new URLSearchParams("key1=value1&key2=value2"); // Display the key/value pairs diff --git a/files/fr/web/api/usvstring/index.html b/files/fr/web/api/usvstring/index.html index 9fb2f745bd..fc7d4ab42a 100644 --- a/files/fr/web/api/usvstring/index.html +++ b/files/fr/web/api/usvstring/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/USVString <p><code>USVString</code> correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. <code>USVString</code> correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. <code>USVString</code> est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans <code>USVString</code> sont convertis par le navigateur en "caractère de remplacement" Unicode <code>U+FFFD</code>, (�).</p> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/videotrack/id/index.html b/files/fr/web/api/videotrack/id/index.html index 27a83048d8..6cd67b7732 100644 --- a/files/fr/web/api/videotrack/id/index.html +++ b/files/fr/web/api/videotrack/id/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/VideoTrack/id --- <p>{{APIRef("HTML DOM")}}</p> -<p><span class="seoSummary">La propriété <code>id</code> contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}.</span> Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.</p> +<p>La propriété <code>id</code> contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}. Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.</p> <p>Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).</p> diff --git a/files/fr/web/api/videotrack/index.html b/files/fr/web/api/videotrack/index.html index 851d86e40e..07ed277113 100644 --- a/files/fr/web/api/videotrack/index.html +++ b/files/fr/web/api/videotrack/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/VideoTrack --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="seoSummary">L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}.</span> L'utilisation la plus courante à un objet <code>VideoTrack</code> est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.</p> +<p>L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}. L'utilisation la plus courante à un objet <code>VideoTrack</code> est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.</p> <h2 id="Propriétés">Propriétés</h2> @@ -38,7 +38,7 @@ translation_of: Web/API/VideoTrack <p>Pour obtenir un <code>VideoTrack</code> pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:</p> -<pre class="brush: js notranslate">var el = document.querySelector("video"); +<pre class="brush: js">var el = document.querySelector("video"); var tracks = el.videoTracks; </pre> @@ -46,11 +46,11 @@ var tracks = el.videoTracks; <p>Ce premier exemple obtient la première piste vidéo sur le média:</p> -<pre class="brush: js notranslate">var firstTrack = tracks[0];</pre> +<pre class="brush: js">var firstTrack = tracks[0];</pre> <p>L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable <code>userLanguage</code>).</p> -<pre class="brush: js notranslate">for (var i = 0; i < tracks.length; i++) { +<pre class="brush: js">for (var i = 0; i < tracks.length; i++) { if (tracks[i].language === userLanguage) { tracks[i].selected = true; break; diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html index 0b64fa7a75..2e2a8a8435 100644 --- a/files/fr/web/api/web_animations_api/index.html +++ b/files/fr/web/api/web_animations_api/index.html @@ -44,9 +44,11 @@ translation_of: Web/API/Web_Animations_API <dd>L'objet <code>DocumentTimeline</code> représentant la chronologie du document par défaut.</dd> <dt>{{domxref("document.getAnimations()")}}</dt> <dd>Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du <code>document</code>.</dd> - <dt> - <h3 id="Extensions_à_linterface_Element">Extensions à l'interface <code>Element</code></h3> - </dt> +</dl> + +<h3 id="Extensions_à_linterface_Element">Extensions à l'interface <code>Element</code></h3> + +<dl> <dt>{{domxref("Element.animate()")}}</dt> <dd>Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.</dd> <dt>{{domxref("Element.getAnimations()")}}</dt> diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg new file mode 100644 index 0000000000..088bb1442c --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="630" height="360"><g transform="translate(.5 .5)"><circle cx="294" cy="248" fill="#fff" stroke="#000" stroke-dasharray="3 3" pointer-events="none" r="110"/><path d="M199 248h190" fill="none" stroke="#000" stroke-width="5" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 188h94v24h-94zm0 24h94v24h-94zm0 24h94v24h-94z"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 258h94v24h-94zm0 24h94v24h-94z"/><path d="M249 188v120m94-120v120" fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M284 180h24v16h-24z"/><text x="3" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 183)">L</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 203h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 206)">R</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 227h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(290 230)">SL</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 250h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(289 253)">SR</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 274h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 277)">C</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 298h24v16h-24z"/><text x="10" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(287 301)">LFE</text><path d="M9 27h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 27-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m74 47 129 135" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M278 26h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m404.65 26-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M278 49h55.5q10 0 10 10v47q0 10 10 10h45.4" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m405.65 116-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M549 25h59.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m615.65 25-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><text y="22" text-anchor="left" font-size="10" font-family="Helvetica" transform="translate(421 216)"> + Chaque entrée / sortie est + <tspan x="0" dy="1.5em">composée de plusieurs canaux.</tspan> + <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan> + </text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M151 13h118v50H151z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(176 32)">Noeud audio</text><path d="M9 47h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 47-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 1h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 20)">Noeud audio</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 91h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 110)">Noeud audio</text><text x="19" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(41 12)">Sources</text><text x="24" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(308 11)">Destination</text></g></svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg new file mode 100644 index 0000000000..6f020d5b37 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="692.929px" height="206.323px" viewBox="0 0 692.929 206.323" enable-background="new 0 0 692.929 206.323" xml:space="preserve"> +<g id="Calque_2"> + <g> + <line fill="none" stroke="#010101" x1="25.556" y1="31.667" x2="25.556" y2="91.125"/> + <polygon fill="#010101" points="19.722,32.667 25.556,15.828 31.056,32.667 "/> + <polygon fill="#010101" points="230.637,84.581 247.476,90.415 230.637,95.915 "/> + <path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722,53.167h36.667c0,0,4.167-14.333,9-11 c0,0,2.333,0.417,7.333,14c0,0,2.917,10.583,8,8.167c0,0,3.333-0.417,6.667-14.167c0,0,3.333-11.917,8.5-7.333 c0,0,2.667,1.833,6.5,13.333c0,0,4,12,8.5,7.5c0,0,3.333-2.666,6.167-13.5c0,0,3.167-12.667,9-7.667c0,0,2.292,0.562,5.667,13.5 c0,0,4.167,13.083,9.5,7.667c0,0,2.188-1.729,5-13.5c0,0,3.25-12.667,8.5-7.667c0,0,2.938,3.25,6.667,13.667 c0,0,5.021,12.333,8.833,7.667c0,0,3.812-4.646,4.667-10.561h30"/> + <text transform="matrix(1 0 0 1 252.0552 94.8335)" font-family="'ArialMT'" font-size="14">t</text> + <text transform="matrix(1 0 0 1 23.2222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan><tspan x="151.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan></text> + <line fill="none" stroke="#010101" stroke-miterlimit="10" x1="25.556" y1="90.667" x2="230.637" y2="90.667"/> + </g> + <g> + <line fill="none" stroke="#010101" x1="431.556" y1="31.667" x2="431.556" y2="91.125"/> + <polygon fill="#010101" points="425.722,32.667 431.556,15.828 437.056,32.667 "/> + <polygon fill="#010101" points="636.636,84.581 653.476,90.415 636.636,95.915 "/> + <path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722,53.167h36.666c0,0,4.167-14.333,9-11 c0,0,2.334,0.417,7.334,14c0,0,2.916,10.583,8,8.167c0,0,3.334-0.417,6.666-14.167c0,0,3.334-11.917,8.5-7.333 c0,0,2.667,1.833,6.5,13.333c0,0,4,12,8.5,7.5c0,0,3.334-2.666,6.168-13.5c0,0,3.166-12.667,9-7.667c0,0,2.291,0.562,5.666,13.5 c0,0,4.167,13.083,9.5,7.667c0,0,2.188-1.729,5-13.5c0,0,3.25-12.667,8.5-7.667c0,0,2.938,3.25,6.667,13.667 c0,0,5.021,12.333,8.833,7.667c0,0,3.812-4.646,4.667-10.561h30"/> + <text transform="matrix(1 0 0 1 658.0552 94.8335)" font-family="'ArialMT'" font-size="14">t</text> + <text transform="matrix(1 0 0 1 429.2222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan><tspan x="151.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24"> </tspan></text> + <line fill="none" stroke="#010101" stroke-miterlimit="10" x1="431.556" y1="90.667" x2="636.636" y2="90.667"/> + </g> + <polygon fill="#010101" points="401.636,47.489 418.476,53.323 401.636,58.823 "/> + <line fill="none" stroke="#010101" stroke-miterlimit="10" x1="273.555" y1="53.576" x2="401.636" y2="53.576"/> + <polygon fill="#010101" points="347.889,148.454 342.055,165.294 336.555,148.454 "/> + <rect x="299.222" y="35" fill="#719FD0" stroke="#010101" width="86" height="96.5"/> + <text transform="matrix(1 0 0 1 304.2227 56.8232)" font-family="'ArialMT'" font-size="11">AnalyserNode</text> + <line fill="none" stroke="#010101" stroke-miterlimit="10" x1="341.803" y1="118" x2="341.803" y2="148.454"/> + <text transform="matrix(1 0 0 1 331.8887 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text> + <polygon fill="none" stroke="#2C2C76" stroke-miterlimit="10" points="321.889,86.667 362.889,86.667 354.889,116 329.556,116 "/> +</g> +<g id="Calque_4"> + <g> + <text transform="matrix(1 0 0 1 478.2222 131.5)" font-family="'ArialMT'" font-size="11">sortie inchangée</text> + </g> + <text transform="matrix(1 0 0 1 287.2227 176.167)" font-family="'ArialMT'" font-size="11">données de fréquence</text> +</g> +</svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html index bf0a5112b8..6e5c9cae01 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html @@ -3,9 +3,8 @@ title: Les concepts de base de la Web Audio API slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API --- -<div class="summary"> -<p><span class="seoSummary">Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</span></p> -</div> + +<p>Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</p> <h2 id="Graphes_audio">Graphes audio</h2> @@ -21,11 +20,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API <li>Connection des sources aux effets, et des effets à la sortie.</li> </ol> -<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="https://mdn.mozillademos.org/files/12525/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="webaudioapi_en.svg"></p> <p>Chaque entrée ou sortie est composée de plusieurs <strong>canaux, </strong>chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, etc.</p> -<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="https://mdn.mozillademos.org/files/12235/audionodes.svg" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p> +<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="audionodes.svg"></p> <p>Les sources audio peuvent être de provenance variée :</p> @@ -33,12 +32,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API <li>générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)</li> <li>créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)</li> <li>fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})</li> - <li>récupérées directement avec <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li> + <li>récupérées directement avec <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li> </ul> <h2 id="Données_audio_ce_qu'on_trouve_dans_un_échantillon">Données audio: ce qu'on trouve dans un échantillon</h2> -<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p> +<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p> <p>On peut trouver davantage de détails sur la page Wikipedia <a href="https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)">Echantillonage (signal)</a>.</p> @@ -57,12 +56,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API <li>le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra aussi 44100, puisqu'elle correspond au nombre de trames.</li> </ul> -<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="https://mdn.mozillademos.org/files/12489/sampleframe.svg" style="height: 110px; width: 622px;"></p> +<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="sampleframe.svg"></p> <p>Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.</p> <div class="note"> -<p><strong>Note</strong>: Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p> +<p><strong>Note :</strong> Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p> </div> <p>Voici quelques exemples simples:</p> @@ -71,11 +70,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API var memoireTampon = contexte.createBuffer(2, 22050, 44100);</pre> <div class="note"> -<p><strong>Note</strong>: <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br> +<p><strong>Note :</strong> <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br> <br> - D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br> + D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br> <br> - De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a>, et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p> + De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing">aliasing</a>, et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p> </div> <p>Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.</p> @@ -86,7 +85,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre> <p>Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.</p> <div class="note"> -<p><strong>Note</strong>: le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p> +<p><strong>Note :</strong> le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p> </div> <h3 id="Mémoire_tampon_linéaire_ou_entrelacée">Mémoire tampon linéaire ou entrelacée</h3> @@ -290,7 +289,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre> <p>Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.</p> -<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="https://mdn.mozillademos.org/files/12493/fttaudiodata.svg" style="height: 206px; width: 693px;"></p> +<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="fttaudiodata.svg"></p> <p>On peut accéder aux données en utilisant les méthodes suivantes:</p> @@ -312,7 +311,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre> </dl> <div class="note"> -<p><strong>Note</strong>: Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p> +<p><strong>Note :</strong> Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p> </div> <h2 id="Spatialisations">Spatialisations</h2> @@ -323,24 +322,24 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre> <p>La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.</p> </div> -<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="https://mdn.mozillademos.org/files/12495/pannernode.svg" style="height: 340px; width: 799px;"></p> +<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="pannernode.svg"></p> <div> <p>La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.</p> </div> -<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="https://mdn.mozillademos.org/files/12497/listener.svg" style="height: 249px; width: 720px;"></p> +<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="listener.svg"></p> <div class="note"> -<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p> +<p><strong>Note :</strong> For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p> </div> <h2 id="Fan-in_et_Fan-out">Fan-in et Fan-out</h2> <p>En audio, <strong>fan-in</strong> désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12505/fanin.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanin.svg"></p> <p><strong>Fan-out</strong> désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/12507/fanout.svg" style="height: 258px; width: 325px;"></p> +<p><img alt="" src="fanout.svg"></p> diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg new file mode 100644 index 0000000000..a223c765e0 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="719.5" height="248.722" xml:space="preserve"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m191.75 122.152 311.964 33.235M51.833 183.75l118.844-54.493"/><path fill="none" stroke="#797A7D" stroke-miterlimit="10" d="M51.542 156.042v28m-.542 0h32.667m-32.125 0 19.666-19.959"/><path fill="#010101" d="m167.161 124.414 17.678-2.262-12.638 12.413z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m192.78 118.25 116.136-60.047"/><path fill="#010101" d="m305.175 53.531 17.551-3.095-12.037 12.997z"/><path fill="#797A7D" d="m48.238 156.042 3.364-9.833 3.245 9.807zm34.916 24.696 9.833 3.364-9.807 3.245zm-14.807-18.467 9.066-5.081-4.126 9.472z"/><path fill="#010101" d="m499.591 149.274 16.157 7.522-17.312 3.753z"/><text transform="translate(45.5 197.25)" fill="#797A7D" font-family="'ArialMT'" font-size="12">0</text><path fill="none" stroke="#719FD0" d="m102.5 42 33.5 95.75M365.597 99l-148.421 20.2m105.55-60.997 85.774-8.157m-109 91.762L259 184.042"/><circle fill="#010101" stroke="#719FD0" cx="188.583" cy="120.917" r="4.667"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m198.616 115.232 11.946 2.08-9.979 5.856"/><g font-family="'ArialMT'" font-size="12"><text transform="translate(413.597 54.124)">Vecteur de direction haut</text><text transform="translate(373 101)">Les deux vecteurs forment un angle droit (90°)</text><text transform="translate(202.563 199.615)">Vecteur de direction face</text><text transform="translate(16.738 34.75)">Vecteur de positionnement plaçant la source dans l’espace</text></g></svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg new file mode 100644 index 0000000000..1c2da226ff --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="798.989" height="339.657" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="350.572" y1="166.922" x2="364.528" y2="101.264"><stop offset="0" style="stop-color:#000"/><stop offset=".047" style="stop-color:#4c4c4e;stop-opacity:.9676"/><stop offset=".119" style="stop-color:#76777a;stop-opacity:.9175"/><stop offset=".195" style="stop-color:#97999c;stop-opacity:.8649"/><stop offset=".272" style="stop-color:#b5b7b9;stop-opacity:.811"/><stop offset=".353" style="stop-color:#cfd0d2;stop-opacity:.7552"/><stop offset=".436" style="stop-color:#e2e3e4;stop-opacity:.6971"/><stop offset=".525" style="stop-color:#f1f1f2;stop-opacity:.6356"/><stop offset=".622" style="stop-color:#fafafa;stop-opacity:.5683"/><stop offset=".742" style="stop-color:#fff;stop-opacity:.4847"/><stop offset="1" style="stop-color:#828486;stop-opacity:0"/></linearGradient><path fill="url(#a)" stroke="#000" stroke-miterlimit="10" d="M191.465 132h317.667s18.667 4 9 26.333c0 0-15 28-42.667 34 0 0-8-.333-24-4 0 0-249.667-53.666-260-56.333z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m191.465 132 363.333 37.828M32.131 206l144.667-66.333M131.131 231l60.334-97.667"/><circle fill="#010101" stroke="#719FD0" cx="192.465" cy="132" r="4.667"/><path fill="none" stroke="#797A7D" stroke-miterlimit="10" d="M31.84 178.292v28m-.542 0h32.666m-32.124 0 19.666-19.959"/><path fill="#010101" d="m136.265 233.093-13.96 11.078 4.397-17.16zm32.069-96.371 17.678-2.262-12.638 12.414z"/><path fill="#797A7D" d="m28.536 178.292 3.363-9.833 3.246 9.807zm34.916 24.696 9.833 3.364-9.807 3.245zm-14.807-18.467 9.065-5.081-4.126 9.472z"/><path fill="#010101" d="m556.342 163.985 16.157 7.522-17.312 3.753z"/><text transform="translate(25.798 219.5)" fill="#797A7D" font-family="'ArialMT'" font-size="12">0</text><path fill="none" stroke="#719FD0" d="m97.798 88.5 18.5 71.5m365-101-32.906 82.5m-280.469 42.25L211.298 271m319.183-96.246 14.611 56.468"/><g font-family="'ArialMT'" font-size="12"><text transform="translate(125.512 292.167)">Vecteur de velocité indique comment la source se déplace</text><text transform="translate(420.894 45.667)">Cone dans lequel on peut écouter le son</text><text transform="translate(413.394 251.167)">Vecteur indiquant la direction vers laquelle pointe le PannerNode</text><text transform="translate(31.298 73.417)">Vecteur de positionnement plaçant la source dans l’espace </text></g></svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg new file mode 100644 index 0000000000..72f6671a53 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg @@ -0,0 +1,133 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="622.281px" height="109.5px" viewBox="0 0 622.281 109.5" enable-background="new 0 0 622.281 109.5" xml:space="preserve"> +<g id="Calque_4"> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M162.011,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 122.6196 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 112.519 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 112.519 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <g> + <path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586 c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529 h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/> + <text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text> + <text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text> + <text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text> + </g> + <text transform="matrix(1 0 0 1 19.2275 48.833)" font-family="'ArialMT'" font-size="10">canal gauche -></text> + <text transform="matrix(1 0 0 1 33.082 76.4995)" font-family="'ArialMT'" font-size="10">canal droit -></text> +</g> +<g id="Calque_3"> + <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="105.352" y1="59" x2="612.7" y2="59"/> + <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M612.7,72.27c0,9.452-5.272,17.115-11.777,17.115H117.129 c-6.504,0-11.777-7.663-11.777-17.115V48.5c0-9.452,5.273-17.115,11.777-17.115h483.794c6.505,0,11.777,7.663,11.777,17.115V72.27z "/> +</g> +</svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html index 22c996965b..087d05a380 100644 --- a/files/fr/web/api/web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/index.html @@ -4,35 +4,35 @@ slug: Web/API/Web_Audio_API translation_of: Web/API/Web_Audio_API --- <div> -<p><span style="line-height: 1.5;">La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</span></p> +<p>La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</p> </div> <h2 id="Concepts_et_usages">Concepts et usages</h2> -<p><span style="line-height: 1.5;">La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</span></p> +<p>La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</p> -<p><span style="line-height: 1.5;">Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement </span>(avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p> +<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p> <p>Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.<br> <br> Un processus de développement typique avec web audio ressemble à ceci :</p> -<ol> +<ul> <li>Création d'un contexte audio</li> <li>Dans ce contexte, création des sources — comme <code><audio></code>, oscillator, stream</li> <li>Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur</li> <li>Choix de la sortie audio (appelée destination), par exemple les enceintes du système</li> <li>Connection des sources aux effets, et des effets à la destination</li> -</ol> +</ul> -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12523/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> +<p><img alt="Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio." src="audio-context_.png"></p> <p>Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.</p> <p>La Web Audio API permet également de contrôler la <em>spatialisation</em> du son. En utilisant un système basé sur le modèle <em>émetteur - récepteur, </em>elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p> +<p><strong>Note :</strong> Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p> </div> <h2 id="Interface_de_la_Web_Audio_API">Interface de la Web Audio API</h2> @@ -58,7 +58,7 @@ translation_of: Web/API/Web_Audio_API <dl> <dt>{{domxref("OscillatorNode")}}</dt> - <dd>Un objet <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd> + <dd>Un objet <strong><code>OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd> <dt>{{domxref("AudioBuffer")}}</dt> <dd>Un objet <strong><code>AudioBuffer</code></strong> est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.</dd> <dt>{{domxref("AudioBufferSourceNode")}}</dt> @@ -66,7 +66,7 @@ translation_of: Web/API/Web_Audio_API <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> <dd>Un objet <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd> <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> - <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd> + <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd> </dl> <h3 id="Définition_des_filtres_d'effets_audio">Définition des filtres d'effets audio</h3> @@ -96,7 +96,7 @@ translation_of: Web/API/Web_Audio_API <dt>{{domxref("AudioDestinationNode")}}</dt> <dd>Un noeud <strong><code>AudioDestinationNode</code></strong> représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.</dd> <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> - <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd> + <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd> </dl> <h3 id="Analyse_des_données_et_visualisation">Analyse des données et visualisation</h3> @@ -127,7 +127,7 @@ translation_of: Web/API/Web_Audio_API <h3 id="Traitement_audio_avec_JavaScript">Traitement audio avec JavaScript</h3> <div class="note"> -<p><strong>Note</strong>: Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p> +<p><strong>Note :</strong> Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p> </div> <dl> @@ -152,7 +152,7 @@ translation_of: Web/API/Web_Audio_API <dd>The <code>OfflineAudioCompletionEvent</code> est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.</dd> </dl> -<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3> +<h3 id="Audio_Workers">Audio Workers</h3> <p>Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a>. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section <a href="#Audio_processing_via_JavaScript">Traitement audio avec JavaScript</a> ci-avant.</p> @@ -165,7 +165,7 @@ translation_of: Web/API/Web_Audio_API <dd>UN objet <code>Event</code> est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.</dd> </dl> -<h2 id="Example" name="Example">Objets obsolètes</h2> +<h2 id="Example">Objets obsolètes</h2> <p>Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.</p> @@ -176,13 +176,13 @@ translation_of: Web/API/Web_Audio_API <dd>Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.</dd> </dl> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <p>Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (voir aussi le <a href="https://github.com/mdn/voice-change-o-matic"> code source complet sur Github</a>) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !</p> <p>Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.</p> -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio +<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio // les navigateurs avec un moteur Webkit/blink demandent un préfixe var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix @@ -370,36 +370,32 @@ function muterVoix() { // allumer / éteindre le son <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> </ul> -<section id="Quick_Links"> -<h3 id="Quicklinks">Quicklinks</h3> - -<ol> - <li data-default-state="open"><strong><a href="#">Guides</a></strong> +<h3 id="guides">Guides</h3> - <ol> + <ul> <li><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></li> <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li> <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Exemples</a></strong> - <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + </ul> + +<h3 id="démos">Démos</h3> + <ul> <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Objets</a></strong> - <ol> + </ul> + +<h3 id="api">API</h3> + <ul> <li>{{domxref("AnalyserNode")}}</li> <li>{{domxref("AudioBuffer")}}</li> <li>{{domxref("AudioBufferSourceNode")}}</li> @@ -429,7 +425,5 @@ function muterVoix() { // allumer / éteindre le son <li>{{domxref("PeriodicWave")}}</li> <li>{{domxref("ScriptProcessorNode")}}</li> <li>{{domxref("WaveShaperNode")}}</li> - </ol> - </li> -</ol> -</section> + </ul> + diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html index f32d382574..26ea00da32 100644 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html @@ -3,9 +3,8 @@ title: Utiliser la Web Audio API slug: Web/API/Web_Audio_API/Using_Web_Audio_API translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API --- -<div class="summary"> -<p><span class="seoSummary">La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples..</span></p> -</div> + +<p>La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.</p> <div> <p>La Web Audio API ne vient pas remplacer l'élément <a href="/en-US/docs/Web/HTML/Element/audio"><audio></a>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <a href="/en-US/docs/Web/HTML/Element/Img"><video></a>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, <audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.</p> @@ -19,16 +18,12 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API <p>Notre premier exemple est <a href="http://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p> -<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p> - -<p>Un autre exemple pour illustrer la Web Audio API est le <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, une application simple qui permet de changer le pitch et le volume d'un son en fonction du déplacement de la souris. Elle génère également des animations psychédéliques (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p> - -<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p> +<p><img alt="Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan" src="boombox.png"></p> <h2 id="Concepts_de_base">Concepts de base</h2> <div class="note"> -<p><strong>Note</strong>: la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p> +<p><strong>Note :</strong> la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p> </div> <p>La Web Audio API impliqe de réaliser les opérations de traitement audio dans un <strong>contexte audio</strong>, et elle a été conçue pour permettre le <strong>routage modulaire</strong>. Les opérations de traitement de base sont réalisées par des <strong> noeuds audio</strong>, qui sont reliés entre eux pour former un<strong> graphe de routage audio</strong>. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.</p> @@ -51,7 +46,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API </pre> <div class="note"> -<p><strong>Note</strong>: On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p> +<p><strong>Note :</strong> On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p> </div> <p>Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :</p> @@ -60,7 +55,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API </pre> <div class="note"> -<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari risque de planter si l'objet </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> n'est pas explicitement mentionné lors de la création d'un contexte audio</span></p> +<p><strong>Note :</strong> Safari risque de planter si l'objet <code>window</code> n'est pas explicitement mentionné lors de la création d'un contexte audio</p> </div> <h3 id="Création_d'une_source_audio">Création d'une source audio</h3> @@ -71,7 +66,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API <li>générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.</li> <li>créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.</li> <li>récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.</li> - <li>prises dans un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li> + <li>prises dans un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li> </ul> <p>Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:</p> @@ -81,11 +76,11 @@ var noeudGain = contexteAudio.createGain(); </pre> <div class="note"> -<p><strong>Note</strong>: Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p> +<p><strong>Note :</strong> Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p> </div> <div class="note"> -<p><strong>Note</strong>: Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p> +<p><strong>Note :</strong> Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p> </div> <h3 id="Lien_entre_les_noeuds_source_et_destination">Lien entre les noeuds source et destination</h3> @@ -111,10 +106,12 @@ noeudGain.connect(contexteAudio.destination); <p>Ce code créerait le graphe audio suivant :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p> +<p><img alt="Un graphe audio avec un élément audio source connecté à la destination par défaut" src="graph1.jpg"></p> + +<p>Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p> <div class="note"> -<p><strong>Note</strong>: Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>, très utile pour débugger les graphes audio.</p> +<p><strong>Note :</strong> Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>, très utile pour débugger les graphes audio.</p> </div> <h3 id="Lecture_du_son_et_définition_du_pitch">Lecture du son et définition du pitch</h3> diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index 14da8cbd47..8a128b4d81 100644 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -3,12 +3,10 @@ title: Visualisations avec la Web Audio API slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API --- -<div class="summary"> <p>L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.</p> -</div> <div class="note"> -<p><strong>Note</strong>: Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p> </div> <h2 id="Concepts_de_base">Concepts de base</h2> @@ -26,13 +24,13 @@ analyseur.connect(distortion); // etc.</pre> <div class="note"> -<p><strong>Note</strong>: il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p> +<p><strong>Note :</strong> il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p> </div> <p>L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).</p> <div class="note"> -<p><strong>Note</strong>: Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p> +<p><strong>Note :</strong> Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p> </div> <p>Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.</p> @@ -122,7 +120,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre> <p>Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :</p> -<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p> +<p><img alt="Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio" src="wave.png"></p> <h2 id="Création_d'un_graphique_à_barres_représentant_la_fréquence">Création d'un graphique à barres représentant la fréquence</h2> @@ -175,10 +173,8 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre> <p>Ce code donne le résultat suivant:</p> -<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p> +<p><img alt="Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio" src="bar-graph.png"></p> <div class="note"> -<p><strong>Note</strong>: Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p> -</div> - -<p> </p> +<p><strong>Note :</strong> Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p> +</div>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html index 3c90e6ecc5..d0de8755ec 100644 --- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html +++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html @@ -3,9 +3,7 @@ title: Web audio spatialization basics slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics --- -<div class="summary"> -<p><span class="seoSummary">En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</span></p> -</div> +<p>En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</p> <p>Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.</p> @@ -18,14 +16,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics <li>L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).</li> </ol> -<p>Vous devez créer et paramétrer ces deux objects, et le navigateur fait le reste er génère le rendu audio. Le diagramme ci-dessous montre les différentes choses qui peuvent être contrôlés pour un {{ domxref("PannerNode") }}.</p> - -<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/5087/WebAudioPannerNode.png" style="display: block; height: 228px; margin: 0px auto; width: 568px;"></p> - <p>Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode <code>setPosition(). </code>Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.</p> <div class="note"> -<p><strong>Note</strong>: Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p> +<p><strong>Note :</strong> Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p> </div> <p>Les autres options disponibles, que nous ne traiterons pas ici, sont :</p> @@ -38,12 +32,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics <h2 id="A_simple_demo_Room_of_metal">A simple demo: Room of metal</h2> -<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.<br> - <br> - <img alt="a minimal UI with a portable stereo in the center of it, and buttons marked play, stop, left arrow, right arrow, zoom in and zoom out. It says Room of Metal at the top." src="https://mdn.mozillademos.org/files/8141/room-of-metal.png" style="display: block; height: 298px; margin: 0px auto; width: 640px;"></p> +<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.</p> <div class="note"> -<p><strong>Note</strong>: You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p> +<p><strong>Note :</strong> You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p> </div> <p>Let's walk through the code and see how this was actually done.</p> @@ -262,12 +254,8 @@ zoomOutButton.onmouseup = function () { window.cancelAnimationFrame(zoomOutLoop); }</pre> -<h2 id="Summary">Summary</h2> - <p>As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.</p> <div class="note"> -<p><strong>Note</strong>: You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p> -</div> - -<p> </p> +<p><strong>Note :</strong> You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p> +</div>
\ No newline at end of file diff --git a/files/fr/web/api/web_speech_api/index.html b/files/fr/web/api/web_speech_api/index.html index 5216db8c3f..f659e9f550 100644 --- a/files/fr/web/api/web_speech_api/index.html +++ b/files/fr/web/api/web_speech_api/index.html @@ -11,20 +11,18 @@ translation_of: Web/API/Web_Speech_API --- <div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div> -<div class="summary"> -<p>L'API <em lang="en">Web Speech</em> permet d'intégrer des données liées à la voix dans des applications web. L'API <em lang="en">Web Speech</em> se compose de deux parties : <em lang="en">SpeechSynthesis</em> (synthèse vocale) et <em lang="en">SpeechRecognition</em> (reconnaissance vocale asynchrone).</p> -</div> +<p>L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone).</p> <h2 id="Concepts_et_usages_de_lAPI_Web_Speech">Concepts et usages de l'API Web Speech</h2> -<p>L'API <em lang="en">Web Speech</em> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :</p> +<p>L'API <i lang="en">Web Speech</i> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :</p> <ul> - <li>La reconnaissance vocale (<em lang="en">Speech recognition</em>) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>).</li> - <li>La synthèse vocale (<em lang="en">Speech synthesis</em>) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.</li> + <li>La reconnaissance vocale (<i lang="en">Speech recognition</i>) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>).</li> + <li>La synthèse vocale (<i lang="en">Speech synthesis</i>) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.</li> </ul> -<p>Pour plus de détails concernant ces fonctionnalités, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API.</a></p> +<p>Pour plus de détails concernant ces fonctionnalités, voir <a href="/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API.</a></p> <h2 id="Les_interfaces_de_lAPI_Web_Speech">Les interfaces de l'API Web Speech</h2> @@ -92,18 +90,18 @@ translation_of: Web/API/Web_Speech_API <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<h3 id="SpeechRecognition"><em lang="en"><code>SpeechRecognition</code></em></h3> +<h3 id="SpeechRecognition"><i lang="en"><code>SpeechRecognition</code></i></h3> <p>{{Compat("api.SpeechRecognition", 0)}}</p> -<h3 id="SpeechSynthesis"><em lang="en"><code>SpeechSynthesis</code></em></h3> +<h3 id="SpeechSynthesis"><i lang="en"><code>SpeechSynthesis</code></i></h3> <p>{{Compat("api.SpeechSynthesis", 0)}}</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li> + <li><a href="/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li> <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">Article sur le site SitePoint</a></li> <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">Article HTML5Rocks</a></li> <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li> diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html index ffaa924aa3..e826557e2a 100644 --- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html +++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -12,7 +12,7 @@ tags: - vocale translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API --- -<p class="summary">L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.</p> +<p>L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.</p> <h2 id="Reconnaissance_vocale">Reconnaissance vocale</h2> @@ -21,15 +21,13 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API <p>L'API Web Speech a une interface principale de contrôle — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.</p> <div class="note"> -<p><strong>Note</strong>: Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.</p> +<p><strong>Note :</strong> Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.</p> </div> <h3 id="Demo">Demo</h3> <p>Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.</p> -<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red." src="https://mdn.mozillademos.org/files/11975/speech-color-changer.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p> - <p>Pour lancer la demo, vous pouvez cloner (ou <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directement télécharger</a>) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">l'URL de démonstration live</a>, sur un navigateur pour mobile le supportant comme Chrome.</p> <h3 id="Support_des_navigateurs">Support des navigateurs</h3> @@ -40,7 +38,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API <p>The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.</p> -<pre class="brush: html notranslate"><h1>Speech color changer</h1> +<pre class="brush: html"><h1>Speech color changer</h1> <p>Tap/click then say a color to change the background color of the app.</p> <div> <p class="output"><em>...diagnostic messages</em></p> @@ -56,7 +54,7 @@ translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API <p>As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:</p> -<pre class="brush: js notranslate">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition +<pre class="brush: js">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent</pre> @@ -64,10 +62,10 @@ var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEv <p>The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:</p> -<pre class="brush: js notranslate">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ]; +<pre class="brush: js">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ]; var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'</pre> -<p>The grammar format used is <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:</p> +<p>The grammar format used is <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:</p> <ul> <li>The lines are separated by semi-colons, just like in JavaScript.</li> @@ -80,12 +78,12 @@ var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.joi <p>The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.</p> -<pre class="brush: js notranslate">var recognition = new SpeechRecognition(); +<pre class="brush: js">var recognition = new SpeechRecognition(); var speechRecognitionList = new SpeechGrammarList();</pre> <p>We add our <code>grammar</code> to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.</p> -<pre class="brush: js notranslate">speechRecognitionList.addFromString(grammar, 1);</pre> +<pre class="brush: js">speechRecognitionList.addFromString(grammar, 1);</pre> <p>We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:</p> @@ -96,7 +94,7 @@ var speechRecognitionList = new SpeechGrammarList();</pre> <li>{{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)</li> </ul> -<pre class="brush: js notranslate">recognition.grammars = speechRecognitionList; +<pre class="brush: js">recognition.grammars = speechRecognitionList; recognition.continuous = false; recognition.lang = 'en-US'; recognition.interimResults = false; @@ -106,7 +104,7 @@ recognition.maxAlternatives = 1;</pre> <p>After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The <code>forEach()</code> method is used to output colored indicators showing what colors to try saying.</p> -<pre class="brush: js notranslate">var diagnostic = document.querySelector('.output'); +<pre class="brush: js">var diagnostic = document.querySelector('.output'); var bg = document.querySelector('html'); var hints = document.querySelector('.hints'); @@ -124,9 +122,9 @@ document.body.onclick = function() { <h4 id="Receiving_and_handling_results">Receiving and handling results</h4> -<p>Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:</p> +<p>Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the <a href="/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:</p> -<pre class="brush: js notranslate">recognition.onresult = function(event) { +<pre class="brush: js">recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textContent = 'Result received: ' + color + '.'; bg.style.backgroundColor = color; @@ -137,7 +135,7 @@ document.body.onclick = function() { <p>We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:</p> -<pre class="brush: js notranslate">recognition.onspeechend = function() { +<pre class="brush: js">recognition.onspeechend = function() { recognition.stop(); }</pre> @@ -145,13 +143,13 @@ document.body.onclick = function() { <p>The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:</p> -<pre class="brush: js notranslate">recognition.onnomatch = function(event) { +<pre class="brush: js">recognition.onnomatch = function(event) { diagnostic.textContent = 'I didnt recognise that color.'; }</pre> <p>{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:</p> -<pre class="brush: js notranslate">recognition.onerror = function(event) { +<pre class="brush: js">recognition.onerror = function(event) { diagnostic.textContent = 'Error occurred in recognition: ' + event.error; }</pre> @@ -165,8 +163,6 @@ document.body.onclick = function() { <p>To show simple usage of Web speech synthesis, we've provided a demo called <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.</p> -<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="https://mdn.mozillademos.org/files/11977/speak-easy-synthesis.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p> - <p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">live demo URL</a> in a supporting mobile browser like Chrome, or Firefox OS.</p> <h3 id="Browser_support">Browser support</h3> @@ -189,7 +185,7 @@ document.body.onclick = function() { <p>The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)</p> -<pre class="brush: html notranslate"><h1>Speech synthesiser</h1> +<pre class="brush: html"><h1>Speech synthesiser</h1> <p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p> @@ -218,7 +214,7 @@ document.body.onclick = function() { <p>First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.</p> -<pre class="brush: js notranslate">var synth = window.speechSynthesis; +<pre class="brush: js">var synth = window.speechSynthesis; var inputForm = document.querySelector('form'); var inputTxt = document.querySelector('.txt'); @@ -238,7 +234,7 @@ var voices = []; <p>We also create <code>data-</code> attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.</p> -<pre class="brush: js notranslate">function populateVoiceList() { +<pre class="brush: js">function populateVoiceList() { voices = synth.getVoices(); for(i = 0; i < voices.length ; i++) { @@ -257,7 +253,7 @@ var voices = []; <p>When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.</p> -<pre class="brush: js notranslate">populateVoiceList(); +<pre class="brush: js">populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; }</pre> @@ -270,7 +266,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) { <p>Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.</p> -<pre class="brush: js notranslate">inputForm.onsubmit = function(event) { +<pre class="brush: js">inputForm.onsubmit = function(event) { event.preventDefault(); var utterThis = new SpeechSynthesisUtterance(inputTxt.value); @@ -286,7 +282,7 @@ if (speechSynthesis.onvoiceschanged !== undefined) { <p>In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.</p> -<pre class="brush: js notranslate"> utterThis.onpause = function(event) { +<pre class="brush: js"> utterThis.onpause = function(event) { var char = event.utterance.text.charAt(event.charIndex); console.log('Speech paused at character ' + event.charIndex + ' of "' + event.utterance.text + '", which is "' + char + '".'); @@ -294,14 +290,14 @@ if (speechSynthesis.onvoiceschanged !== undefined) { <p>Finally, we call <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p> -<pre class="brush: js notranslate"> inputTxt.blur(); +<pre class="brush: js"> inputTxt.blur(); }</pre> <h4 id="Updating_the_displayed_pitch_and_rate_values">Updating the displayed pitch and rate values</h4> <p>The last part of the code simply updates the <code>pitch</code>/<code>rate</code> values displayed in the UI, each time the slider positions are moved.</p> -<pre class="brush: js notranslate">pitch.onchange = function() { +<pre class="brush: js">pitch.onchange = function() { pitchValue.textContent = pitch.value; } diff --git a/files/fr/web/api/web_storage_api/index.html b/files/fr/web/api/web_storage_api/index.html index d90c9bfd37..bae54c054c 100644 --- a/files/fr/web/api/web_storage_api/index.html +++ b/files/fr/web/api/web_storage_api/index.html @@ -26,15 +26,15 @@ translation_of: Web/API/Web_Storage_API <p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet <code>Window</code> implemente le <code>WindowLocalStorage</code> et l'object <code>WindowSessionStorage</code>, dont les propriétés <code>localStorage</code> et <code>sessionStorage</code> dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p> <div class="note"> -<p><strong>Note</strong>: À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p> +<p><strong>Note :</strong> À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p> </div> <div class="note"> -<p><strong>Note</strong>: L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p> +<p><strong>Note :</strong> L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p> </div> <div class="note"> -<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API" title="Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> utilisable par des extensions).</p> +<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM">XPCOM</a> utilisable par des extensions).</p> </div> <h2 id="Web_Storage_interfaces">Web Storage interfaces</h2> @@ -45,7 +45,7 @@ translation_of: Web/API/Web_Storage_API <dt>{{domxref("Window")}}</dt> <dd>L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.</dd> <dt>{{domxref("StorageEvent")}}</dt> - <dd>L'événement <code title="event-storage">storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd> + <dd>L'événement <code>storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd> </dl> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html index 69a8a500b6..96ce992c18 100644 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -9,9 +9,7 @@ tags: - localStorage translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API --- -<div class="summary"> <p>L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.</p> -</div> <h2 id="Concepts_de_base">Concepts de base</h2> @@ -23,7 +21,7 @@ localStorage.setItem('colorSetting', '#a4509b'); </pre> <div class="blockIndicator note"> -<p><strong>Note</strong>: Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p> +<p><strong>Note :</strong> Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p> </div> <p>Les deux principaux mécanismes internes du Stockage Web sont :</p> @@ -82,25 +80,27 @@ else { <p>Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant <code>storageAvailable('sessionStorage')</code>. </p> -<p>Vous pouvez retrouver ici <a class="external" href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p> +<p>Vous pouvez retrouver ici <a href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p> <h2 id="Un_exemple_simple">Un exemple simple</h2> -<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a class="external" href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p> +<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p> + +<p><img alt="" src="landing.png"></p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p> +<p>Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p> -<p>Nous avons aussi fournit une <a class="external" href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p> +<p>Nous avons aussi fournit une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p> +<p><img alt="" src="event-output.png"></p> <div class="note"> -<p><strong>Note</strong>: En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a class="external" href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p> +<p><strong>Note :</strong> En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p> </div> <h2 id="Tester_si_le_stockage_a_déjà_été_rempli">Tester si le stockage a déjà été rempli</h2> -<p>Pour démarrer avec <a class="external" href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p> +<p>Pour démarrer avec <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p> <pre class="brush: js">if(!localStorage.getItem('bgcolor')) { populateStorage(); @@ -158,7 +158,7 @@ imageForm.onchange = populateStorage;</pre> <p>Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.</p> -<p>Sur la page d'événement (voir <a class="external" href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p> +<p>Sur la page d'événement (voir <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p> <pre class="brush: js">window.addEventListener('storage', function(e) { document.querySelector('.my-key').textContent = e.key; @@ -206,10 +206,10 @@ imageForm.onchange = populateStorage;</pre> <p>{{Compat("api.Window.sessionStorage")}}</p> -<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p> +<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a href="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p> <div class="note"> -<p><strong>Note: </strong>depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p> +<p><strong>Note :</strong> Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html index f43d902d87..bcd5c59b3c 100644 --- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html @@ -134,12 +134,12 @@ original_slug: Web/API/Worker/Functions_and_classes_available_to_workers <td>Crée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.</td> <td>{{CompatGeckoDesktop("1.9.1")}}</td> <td>10.0</td> - <td>{{CompatNo}} Voir <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=31666" rel="external">crbug.com/31666</a></td> + <td>{{CompatNo}} Voir <a href="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td> <td>{{CompatNo}}</td> </tr> <tr> <td>{{ domxref("URL") }}</td> - <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br> + <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br> Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.</td> <td>{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL()</td> <td>{{CompatNo}}</td> @@ -236,6 +236,6 @@ original_slug: Web/API/Worker/Functions_and_classes_available_to_workers <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Utilisation_des_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Utilisation des web workers</a></li> + <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li> <li>{{ domxref("Worker") }}</li> </ul> diff --git a/files/fr/web/api/web_workers_api/index.html b/files/fr/web/api/web_workers_api/index.html index e218058f53..57afda034b 100644 --- a/files/fr/web/api/web_workers_api/index.html +++ b/files/fr/web/api/web_workers_api/index.html @@ -6,9 +6,7 @@ tags: - DOM translation_of: Web/API/Web_Workers_API --- -<article class="approved"> -<header>{{DefaultAPISidebar("Web Workers API")}}</header> -</article> +<div>{{DefaultAPISidebar("Web Workers API")}}</div> <p>Les <strong>Web Workers</strong> sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.</p> @@ -20,7 +18,7 @@ translation_of: Web/API/Web_Workers_API <p>Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode <code>postMessage()</code>, et la réponse leur parvient au moyen du gestionnaire d'événement <code>onmessage</code> (le message est contenu dans l'attribut <code>data</code> de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.</p> -<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p> +<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p> <p>En plus des workers dédiés, il y a d'autres types de worker :</p> @@ -31,8 +29,8 @@ translation_of: Web/API/Web_Workers_API <li>Les <a href="/fr/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.</li> </ul> -<div class="blockIndicator note"> -<p>Remarque: Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p> +<div class="note"> +<p><strong>Note :</strong> Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p> </div> <h2 id="Les_interfaces_Web_Worker">Les interfaces Web Worker</h2> diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html index 1fc2be25c8..ff872b99ad 100644 --- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -4,7 +4,7 @@ slug: Web/API/Web_Workers_API/Structured_clone_algorithm translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure --- -<p>L’algorithme de clonage structuré est un nouvel algorithme <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">défini par la spécification HTML5</a> pour sérialiser les objets JavaScript complexes. Il est plus puissant que <a href="/en/JSON" title="en/JSON">JSON</a> en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.</p> +<p>L’algorithme de clonage structuré est un nouvel algorithme <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">défini par la spécification HTML5</a> pour sérialiser les objets JavaScript complexes. Il est plus puissant que <a href="/en/JSON">JSON</a> en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.</p> <p>L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.</p> @@ -13,7 +13,7 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure <p>Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :</p> <ul> - <li>Le clonage structuré peut copier des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a>.</li> + <li>Le clonage structuré peut copier des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>.</li> <li>Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.</li> <li>Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.</li> <li>Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.</li> @@ -22,11 +22,11 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure <h2 id="Ce_qui_ne_marche_pas_avec_le_clonage_structuré">Ce qui ne marche pas avec le clonage structuré</h2> <ul> - <li>Les objets <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception <code>DATA_CLONE_ERR</code>.</li> + <li>Les objets <a href="/en/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception <code>DATA_CLONE_ERR</code>.</li> <li>De la même manière, toute tentative de cloner des nœuds DOM émettra une exception <code>DATA_CLONE_ERR</code>.</li> <li>Certains paramètres d’objets ne sont pas préservés : <ul> - <li>Le champ <code>lastIndex</code> des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> n’est pas préservé.</li> + <li>Le champ <code>lastIndex</code> des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> n’est pas préservé.</li> <li>Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule <em>via</em> un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.</li> <li>La chaîne de prototypes n’est ni parcourue, ni copiée.</li> </ul> @@ -141,12 +141,14 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure } </pre> -<div class="note"><strong> Note :</strong> Cet algorithme ne prend en charge que les objets spéciaux <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a>. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.</div> +<div class="note"> + <p><strong>Note :</strong> Cet algorithme ne prend en charge que les objets spéciaux <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.</p> +</div> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data">Spécification HTML5 : Passage sécurisé de données structurées</a></li> + <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data">Spécification HTML5 : Passage sécurisé de données structurées</a></li> <li>{{ domxref("window.history") }}</li> <li>{{ domxref("window.postMessage()") }}</li> <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.html b/files/fr/web/api/web_workers_api/using_web_workers/index.html index f6eb904fd1..dd63df8aa4 100644 --- a/files/fr/web/api/web_workers_api/using_web_workers/index.html +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.html @@ -11,7 +11,7 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers --- <div>{{DefaultAPISidebar("Web Workers API")}}</div> -<p><span class="seoSummary">Les <em>Web Workers</em> sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (<em>threads</em>) d'arrière-plan. Le <em>thread</em> associé au <em>worker</em> peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les <em>web workers</em> peuvent réaliser des opérations d'entrée/sortie grâce à <code><a class="internal" href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (bien que les attributs <code>responseXML</code> et <code>channel</code> soient nécessairement vides dans ces cas). Une fois créé, un <em>worker</em> peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au <em>worker</em>. Cette communication s'effectue grâce à des gestionnaires d'évènements.</span> Dans cet article, nous verrons une introduction à l'utilisation des <em>web workers</em>.</p> +<p>Les <em>Web Workers</em> sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (<em>threads</em>) d'arrière-plan. Le <em>thread</em> associé au <em>worker</em> peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les <em>web workers</em> peuvent réaliser des opérations d'entrée/sortie grâce à <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (bien que les attributs <code>responseXML</code> et <code>channel</code> soient nécessairement vides dans ces cas). Une fois créé, un <em>worker</em> peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au <em>worker</em>. Cette communication s'effectue grâce à des gestionnaires d'évènements. Dans cet article, nous verrons une introduction à l'utilisation des <em>web workers</em>.</p> <h2 id="LAPI_Web_Workers">L'API Web Workers</h2> @@ -20,14 +20,14 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers <p>Le contexte du <em>worker</em> est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les <em>workers</em> dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un <em>worker</em> dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un <em>worker</em> partagé peut être utilisé par différents scripts.</p> <div class="note"> -<p><strong>Note </strong>: Voir <a href="/fr/docs/Web/API/Web_Workers_API">la page d'entrée pour l'API Web Workers</a> pour consulter la documentation de référence sur les <em>workers</em> et d'autres guides.</p> +<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Web_Workers_API">la page d'entrée pour l'API Web Workers</a> pour consulter la documentation de référence sur les <em>workers</em> et d'autres guides.</p> </div> <p>Il est possible d'exécuter n'importe quel code JavaScript dans le <em>thread</em> du <em>worker</em>, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via <code>window</code> comme les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a>, les API de stockage de données telles que <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>. Pour plus de détails, voir <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et classes disponibles au sein des <em>workers</em></a>.</p> <p>Les données sont échangées entre le <em>thread</em> du <em>worker</em> et le <em>thread</em> principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode <code>postMessage()</code> et réagir aux messages reçus grâce au gestionnaire d'évènement <code>onmessage</code> (le message sera contenu dans l'attribut <code>data</code> de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.</p> -<p>Les <em>workers</em> peuvent également déclencher la création d'autres <em>workers</em> tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les <em>workers</em> pourront utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour effectuer des opérations réseau mais les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> renverront nécessairement <code>null</code>.</p> +<p>Les <em>workers</em> peuvent également déclencher la création d'autres <em>workers</em> tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les <em>workers</em> pourront utiliser <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour effectuer des opérations réseau mais les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> renverront nécessairement <code>null</code>.</p> <h2 id="Les_workers_dédiés">Les <em>workers</em> dédiés</h2> @@ -47,10 +47,9 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers <p>La création d'un nouveau <em>worker</em> est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le <em>thread</em> associé au <em>worker</em> (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p> -<div style="overflow: hidden;"> + <pre class="brush: js">var monWorker = new Worker('worker.js'); </pre> -</div> <h3 id="Envoyer_des_messages_au_worker_et_y_réagir">Envoyer des messages au <em>worker</em> et y réagir</h3> @@ -88,9 +87,13 @@ deuxiemeNombre.onchange = function() { <p>Ici, nous récupérons les données grâce à l'attribut <code>data</code> de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut <code>textContent</code> de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.</p> -<div class="note"><strong>Note :</strong> On notera que <code>onmessage</code> et <code>postMessage()</code> doivent être rattachés à un objet <code>Worker</code> lorsqu'ils sont utilisés depuis le <em>thread</em> principal (ici, c'était <code>monWorker</code>) mais pas lorsqu'ils sont employés depuis le <em>worker</em>. En effet, dans le <em>worker</em>, c'est le <em>worker</em> qui constitue la portée globale et qui met à disposition ces méthodes.</div> +<div class="note"> + <p><strong>Note :</strong> On notera que <code>onmessage</code> et <code>postMessage()</code> doivent être rattachés à un objet <code>Worker</code> lorsqu'ils sont utilisés depuis le <em>thread</em> principal (ici, c'était <code>monWorker</code>) mais pas lorsqu'ils sont employés depuis le <em>worker</em>. En effet, dans le <em>worker</em>, c'est le <em>worker</em> qui constitue la portée globale et qui met à disposition ces méthodes.</p> +</div> -<div class="note"><strong>Note :</strong> Lorsqu'un message est envoyé d'un <em>thread</em> à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir <a href="#échange">ci-après</a> pour plus d'explications à ce sujet.</div> +<div class="note"> + <p><strong>Note :</strong> Lorsqu'un message est envoyé d'un <em>thread</em> à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir <a href="#échange">ci-après</a> pour plus d'explications à ce sujet.</p> +</div> <h3 id="Clôturer_un_worker">Clôturer un <em>worker</em></h3> @@ -104,7 +107,7 @@ deuxiemeNombre.onchange = function() { <p>Lorsqu'une erreur d'exécution se produit avec le <em>worker</em>, son gestionnaire d'évènement <code>onerror</code> est appelé et reçoit un évènement <code>error</code> qui implémente l'interface <code>ErrorEvent</code>.</p> -<p>Cet évènement ne bouillonne (<em>bubble</em>) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode <a class="internal" href="/fr/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code></a> rattachée à l'évènement d'erreur.</p> +<p>Cet évènement ne bouillonne (<em>bubble</em>) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode <a href="/fr/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code></a> rattachée à l'évènement d'erreur.</p> <p>L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :</p> @@ -132,7 +135,9 @@ importScripts('//example.com/hello.js'); /* importe un script d'une autre origin <p>Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le <em>worker</em>. Si le script ne peut pas être chargé, une exception <code>NETWORK_ERROR</code> sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées <strong>après</strong> <code>importScripts()</code> sont également exécutées car évaluées avant le reste du code.</p> -<div class="note"><strong>Note :</strong> Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à <code>importScripts()</code> . Cet exécution est effectuée de façon synchrone et <code>importScripts()</code> ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.</div> +<div class="note"> + <p><strong>Note :</strong> Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à <code>importScripts()</code> . Cet exécution est effectuée de façon synchrone et <code>importScripts()</code> ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.</p> +</div> <h2 id="Les_workers_partagés">Les <em>workers</em> partagés</h2> @@ -215,9 +220,7 @@ Pour appliquer une règle de sécurité au <em>worker</em>, il faudra fournir un <br> Si l'origine du script du <em>worker</em> est un identifiant global unique (si son URL utilise le schéma <code>data://</code> ou <code>blob://</code> par exemple), le <em>worker</em> héritera du CSP associé au document responsable de sa création.</div> -<div></div> - -<h2 id="Échanger_des_données_avec_les_workers_plus_de_détails"><a id="échange" name="échange">Échanger des données avec les <em>workers</em> : plus de détails</a></h2> +<h2 id="Échanger_des_données_avec_les_workers_plus_de_détails">Échanger des données avec les <em>workers</em> : plus de détails</h2> <p>Les données échangées entre le document principal et les <em>workers</em> sont <strong>copiées</strong> et non partagées. Lorsqu'ils sont envoyés au <em>worker</em>, les objets sont sérialisés (puis désérialisés à leur réception). La page et le <em>worker</em> <strong>ne partagent pas le même exemplaire </strong>et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">une clonage structurel</a>.</p> diff --git a/files/fr/web/api/webgl2renderingcontext/index.html b/files/fr/web/api/webgl2renderingcontext/index.html index d9e2e4959e..f1233fd66f 100644 --- a/files/fr/web/api/webgl2renderingcontext/index.html +++ b/files/fr/web/api/webgl2renderingcontext/index.html @@ -20,7 +20,7 @@ var gl = canevas.getContext('webgl2'); </pre> <div class="note"> -<p>WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p> +<p><strong>Note :</strong> WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p> </div> <p>Le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">didacticiel WebGL</a> contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.</p> diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html index 8a3bee2e08..2fa7a52da1 100644 --- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p> -<p class="summary">Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p> +<p>Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p> <p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p> @@ -52,7 +52,7 @@ canvas { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupWebGL (evt) { +<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) { "use strict" window.removeEventListener(evt.type, setupWebGL, false); var paragraph = document.querySelector("p"); diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html index 134457e0fe..406d868fbd 100644 --- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html @@ -14,7 +14,7 @@ original_slug: Web/API/WebGL_API/By_example/Modèle_1 <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p> -<p class="summary">Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p> +<p>Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p> <p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html index 9cb1d89359..99c382c0ac 100644 --- a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html +++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html @@ -16,7 +16,7 @@ original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL <p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p> -<p class="summary">Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p> +<p>Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p> <h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3> diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html index eaf21ce19a..91c858dcec 100644 --- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p> -<p class="summary">Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p> +<p>Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p> <p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html index c5a6013ed9..fd92c8ce1c 100644 --- a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html +++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p> -<p class="summary">Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p> +<p>Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p> <p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.html b/files/fr/web/api/webgl_api/by_example/color_masking/index.html index 250b7927a5..f5ef6779ef 100644 --- a/files/fr/web/api/webgl_api/by_example/color_masking/index.html +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.html @@ -15,14 +15,10 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p> -<div id="color-masking"> -<div class="summary"> <p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p> -</div> <p>{{EmbedLiveSample("color-masking-source",660,425)}}</p> -<div id="color-masking-intro"> <h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3> <p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p> @@ -34,9 +30,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur <p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p> <p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p> -</div> -<div id="color-masking-source"> <pre class="brush: html"><p>Tinting the displayed colors with color masking.</p> <canvas>Il semblerait que votre navigateur ne supporte pas l'élément HTML5 canvas.</canvas> @@ -77,7 +71,7 @@ button { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) { +<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) { "use strict" window.removeEventListener(evt.type, setupAnimation, false); @@ -131,7 +125,5 @@ button { </pre> <p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p> -</div> -</div> <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html index 449d08fa57..b3083ba274 100644 --- a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html +++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Détecter_WebGL <div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div> -<p class="summary">Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p> +<p>Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p> <p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html index b26df25f0f..c30e81f2f3 100644 --- a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html +++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WebGL_API/By_example/Hello_GLSL <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p> -<p class="summary">Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p> +<p>Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p> <div class="note"> <p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p> diff --git a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html index c829a9b4f9..f00e3a7ea1 100644 --- a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html +++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p> -<p class="summary">Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p> +<p>Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p> <p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html index b7741c417f..037ed0d183 100644 --- a/files/fr/web/api/webgl_api/by_example/index.html +++ b/files/fr/web/api/webgl_api/by_example/index.html @@ -12,9 +12,7 @@ translation_of: Web/API/WebGL_API/By_example <p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p> -<div class="summary"> -<p id="webgl-by-example-summary"><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p> -</div> +<p><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p> <h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2> diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html index 15fae85fc7..de42151f5c 100644 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p> -<p class="summary">Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p> +<p>Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p> <p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p> @@ -59,7 +59,7 @@ button { <pre class="brush: js hidden">;(function(){ </pre> -<pre class="brush: js" id="livesample-js">"use strict" +<pre class="brush: js">"use strict" window.addEventListener("load", setupAnimation, false); var gl, timer, diff --git a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html index 76dfac1def..e151ad4c95 100644 --- a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html +++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_e <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p> -<p class="summary">Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p> +<p>Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p> <p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html index cf2677db28..03897206ae 100644 --- a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html +++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p> -<p class="summary">Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p> +<p>Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p> <p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p> @@ -56,7 +56,7 @@ canvas { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) { +<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) { "use strict" window.removeEventListener(evt.type, setupAnimation, false); diff --git a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html index 82d47f2008..f88812a7d3 100644 --- a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html +++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p> -<p class="summary">Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p> +<p>Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p> <p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p> @@ -153,13 +153,9 @@ if (program) gl.clear(gl.COLOR_BUFFER_BIT); return gl; } +})(); </pre> -<div class="hidden"> -<pre class="brush: js">})(); -</pre> -</div> - <p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p> <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html index 00f4feda91..9f5c93f1f9 100644 --- a/files/fr/web/api/webgl_api/by_example/video_textures/index.html +++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.html @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos <p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p> -<p class="summary">Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p> +<p>Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p> <h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3> diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html index 8117eff285..cd73e5b62b 100644 --- a/files/fr/web/api/webgl_api/index.html +++ b/files/fr/web/api/webgl_api/index.html @@ -14,19 +14,16 @@ translation_of: Web/API/WebGL_API --- <div>{{WebGLSidebar}}</div> -<div class="summary"> -<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p> -</div> +<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p> -<p>Le support pour WebGL est présent dans <a href="https://developer.mozilla.org/fr-FR/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p> +<p>Le support pour WebGL est présent dans <a href="/fr-FR/Firefox">Firefox</a> 4+, <a href="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p> -<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p> +<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p> <h2 id="Référence">Référence</h2> <h3 id="Interfaces_standard">Interfaces standard</h3> -<div class="index"> <ul> <li>{{domxref("WebGLRenderingContext")}}</li> <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> @@ -46,11 +43,9 @@ translation_of: Web/API/WebGL_API <li>{{domxref("WebGLUniformLocation")}}</li> <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> </ul> -</div> <h3 id="Extensions">Extensions</h3> -<div class="index"> <ul> <li>{{domxref("ANGLE_instanced_arrays")}}</li> <li>{{domxref("EXT_blend_minmax")}}</li> @@ -82,7 +77,6 @@ translation_of: Web/API/WebGL_API <li>{{domxref("WEBGL_draw_buffers")}}</li> <li>{{domxref("WEBGL_lose_context")}}</li> </ul> -</div> <h3 id="Evènements">Evènements</h3> @@ -95,8 +89,8 @@ translation_of: Web/API/WebGL_API <h3 id="Constantes_et_types">Constantes et types</h3> <ul> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li> </ul> <h3 id="WebGL_2">WebGL 2</h3> @@ -104,13 +98,13 @@ translation_of: Web/API/WebGL_API <p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p> <ul> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li> - <li>les <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li> - <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li> + <li>les <a href="/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li> + <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li> </ul> <p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p> @@ -122,34 +116,34 @@ translation_of: Web/API/WebGL_API <h3 id="Guides">Guides</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt> <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt> <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt> <dd>Un guide pour l'utilisation des extensions WebGL.</dd> </dl> <h3 id="Tutoriels">Tutoriels</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt> <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd> </dl> <h3 id="Exemples">Exemples</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt> <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd> </dl> <h3 id="Tutoriels_avancés">Tutoriels avancés</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt> <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt> <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd> </dl> @@ -218,7 +212,7 @@ translation_of: Web/API/WebGL_API <h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> -<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p> +<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p> <h3 id="Notes_Gecko">Notes Gecko</h3> @@ -236,6 +230,6 @@ translation_of: Web/API/WebGL_API <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li> </ul> diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 7c731ca050..2369abb5e4 100644 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -17,7 +17,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p> -<p>Une fois que vous avez correctement <a title="Commencer avec le WebGL">créé un contexte WebGL</a>, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p> +<p>Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p> <h2 id="Dessiner_la_scène">Dessiner la scène</h2> @@ -25,7 +25,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL <h3 id="Les_shaders">Les shaders</h3> -<p>Un shader est un programme, écrit en utilisant le <a class="external" href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p> +<p>Un shader est un programme, écrit en utilisant le <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p> <p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p> @@ -196,8 +196,8 @@ function loadShader(gl, type, source) { <p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p> -<div class="blockIndicator note"> -<p>Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p> </div> <pre><code>function drawScene(gl, programInfo, buffers) { diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html index dcf9a4285f..df7fcb4658 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -139,7 +139,7 @@ function configurerVideo(url) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Utilisation de l'audio et de la video dans Firefox</a></li> + <li><a href="/fr/Using_HTML5_audio_and_video">Utilisation de l'audio et de la video dans Firefox</a></li> </ul> <p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p> diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 20d4223182..10adde485e 100644 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -7,23 +7,22 @@ tags: translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL --- -<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a class="external" href="http://www.khronos.org/webgl/" rel="external" title="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a class="external" href="http://www.khronos.org/opengles/" rel="external">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a class="internal" href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p> +<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a href="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a href="/fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p> <p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p> <p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p> -<h2 class="editable" id="Préparation_au_rendu_3D"><span>Préparation au rendu 3D</span></h2> +<h2 id="Préparation_au_rendu_3D">Préparation au rendu 3D</h2> <p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p> -<pre class="brush: html"><span class="plain"><code><body> +<pre class="brush: html"><code><body> <canvas id="glCanvas" width="640" height="480"></canvas> -</body></code></span> +</body></code> </pre> -<div id="section_2"> -<h3 class="editable" id="Préparation_du_contexte_WebGL"><span>Préparation du contexte WebGL</span></h3> +<h3 id="Préparation_du_contexte_WebGL">Préparation du contexte WebGL</h3> <p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p> @@ -52,7 +51,7 @@ function main() { <p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p> -<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p> +<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p> <p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p> @@ -70,5 +69,4 @@ function main() { <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li> </ul> -<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p> -</div> +<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html index 28c6e1c8b3..671b448a9d 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.html +++ b/files/fr/web/api/webgl_api/tutorial/index.html @@ -10,15 +10,13 @@ translation_of: Web/API/WebGL_API/Tutorial --- <div>{{WebGLSidebar}}</div> -<div class="summary"> -<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p> -</div> +<p><a href="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p> -<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p> +<p>Ce tutoriel décrit comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</p> <h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2> -<p>L'utilisation de l'élément <code><canvas></code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code><canvas></code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p> +<p>L'utilisation de l'élément <code><canvas></code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. L'élément <code><canvas></code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p> <h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2> diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 37d48469cd..0bd4a47c5d 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -9,7 +9,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p> -<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p> +<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p> <h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2> diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index c28419742e..002be155c6 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -15,7 +15,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL <p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p> -<div class="note"><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS" title="en/HTTP access control">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</p> +</div> <p>Le code qui charge la texture ressemble à ce qui suit : </p> @@ -258,7 +260,7 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre> <h2 id="Textures_inter-domaines">Textures inter-domaines</h2> -<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p> +<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p> <p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p> diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html index 9c2d5149ca..3a4a7633b1 100644 --- a/files/fr/web/api/webglrenderingcontext/enable/index.html +++ b/files/fr/web/api/webglrenderingcontext/enable/index.html @@ -23,8 +23,7 @@ original_slug: Web/API/WebGLRenderingContext/activer <dl> <dt><code>fon</code></dt> - <dd>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</dd> - <dd> + <dd><p>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</p> <table class="standard-table"> <thead> <tr> @@ -71,8 +70,7 @@ original_slug: Web/API/WebGLRenderingContext/activer </tr> </tbody> </table> - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - + <p>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :</p> <table class="standard-table"> <thead> <tr> diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html index 7107acc1c5..a573a50f6c 100644 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html @@ -22,7 +22,7 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray <p>La méthode {{domxref ("WebGLRenderingContext")}} <strong><code>enableVertexAttribArray()</code> -</strong> qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.</p> <div class="note"> -<p>Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p> +<p><strong>Note :</strong> Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p> </div> <p>Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.</p> @@ -58,7 +58,7 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray <p>Ce code — un extrait de l'exemple complet <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation 2D WebGL de base</a> — montre l'utilisation de <code>enableVertexArray()</code> pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.</p> -<pre class="brush: js highlight[6]">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); +<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); aVertexPosition = gl.getAttribLocation(programmeShader, "aVertexPosition"); @@ -69,9 +69,9 @@ gl.vertexAttribPointer(aVertexPosition, vertexNumComponents, gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre> -<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div> - -<p> </p> +<div class="note"> + <p><strong>Note :</strong> Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</p> +</div> <p>Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</p> @@ -81,8 +81,6 @@ gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre> <p>Avec l'association définie entre le tampon des sommets de notre forme et l'attribut <code>aVertexPosition</code> utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.</p> -<p> </p> - <h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html index ee31458f04..89393bd4f7 100644 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html @@ -25,18 +25,18 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation <div> </div> <dl> - <dt><span class="seoSummary">{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</span></dt> - <dd><span class="seoSummary">Retourne la valeur de l'uniform à l'emplacement indiqué.</span></dd> + <dt>{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</dt> + <dd>Retourne la valeur de l'uniform à l'emplacement indiqué.</dd> <dt><br> - <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</span></dt> - <dd><span class="seoSummary">Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</span></dd> + {{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</dt> + <dd>Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</dd> <dt><br> - <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</span></dt> - <dd><span class="seoSummary">Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</span></dd> + {{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</dt> + <dd>Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</dd> </dl> <p><br> - <span class="seoSummary">L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</span></p> + L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -59,7 +59,7 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation <p><code>WebGLUniformLocation</code> est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.</p> <div class="note"> -<p>Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p> +<p><strong>Note :</strong> Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p> </div> <h3 id="Erreurs">Erreurs</h3> @@ -77,7 +77,7 @@ translation_of: Web/API/WebGLRenderingContext/getUniformLocation <p>Dans cet exemple, extrait de la méthode <code>animateScene()</code> dans l'article <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">Un exemple d'animation 2D WebGL de base</a>, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.</p> -<pre class="brush: js highlight[3-8]">gl.useProgram(programmeShader); +<pre class="brush: js">gl.useProgram(programmeShader); uScalingFactor = gl.getUniformLocation(programmeShader, "uScalingFactor"); @@ -90,7 +90,9 @@ gl.uniform2fv(uScalingFactor, currentScale); gl.uniform2fv(uRotationVector, currentRotation); gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);</pre> -<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div> +<div class="note"> + <p><strong>Note :</strong> Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</p> +</div> <p>Après avoir défini le programme d'ombrage en cours comme <code>programmeShader</code>, ce code récupère les trois uniforms <code>"uScalingFactor"</code>, <code>"uGlobalColor"</code> et <code>"uRotationVector"</code>, en appelant <code>getUniformLocation()</code> une fois pour chaque uniform.</p> diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html index 25ba243a43..437dbe6f19 100644 --- a/files/fr/web/api/webglrenderingcontext/index.html +++ b/files/fr/web/api/webglrenderingcontext/index.html @@ -22,7 +22,7 @@ var gl = canvas.getContext('webgl'); <p>Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.</p> -<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial" title="Tutoriel WebGL">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p> +<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p> <h2 id="Constants">Constants</h2> diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html index 75ac660bbf..af95e8f3c8 100644 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html @@ -38,7 +38,7 @@ void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var> <dl> <dt><code>cible</code></dt> - <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : + <dd><p>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :</p> <ul> <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li> <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li> @@ -49,13 +49,10 @@ void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var> <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li> </ul> </dd> -</dl> - -<dl> <dt><code>niveau</code></dt> <dd>Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.</dd> <dt><code>formatinterne</code></dt> - <dd>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles : + <dd><p>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :</p> <ul> <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li> <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li> @@ -115,7 +112,7 @@ void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var> <dt><code>format</code></dt> <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd> <dt><code>type</code></dt> - <dd>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles : + <dd><p>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :</p> <ul> <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li> <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li> @@ -157,7 +154,7 @@ void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var> </ul> </dd> <dt><code>pixels</code></dt> - <dd>L'un des objets suivants peut être utilisé comme source de pixels pour la texture : + <dd><p>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :</p> <ul> <li>{{domxref("ArrayBufferView")}}, <ul> @@ -176,10 +173,6 @@ void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var> </dd> <dt><code><strong>decalage</strong></code></dt> <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd> - <dd> - <ul> - </ul> - </dd> </dl> <h3 id="Valeur_retournée">Valeur retournée</h3> diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html index c2247c102f..cb27eaeb2c 100644 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.html +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WebGLRenderingContext/uniform <p>Les méthodes <strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indiquent les valeurs des variables uniform.</p> <div class="note"> -<p>Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p> +<p><strong>Note :</strong> Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html index b40c03e607..93961c4fda 100644 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer --- <div>{{APIRef("WebGL")}}</div> -<p class="summary">La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p> +<p>La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -124,18 +124,18 @@ translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer <p>sera stocké dans le tampon des tableaux comme suit :</p> -<table style="width: auto;"> +<table> <tbody> <tr> - <td style="background-color: #ccf;">00 00 80 3F</td> - <td style="background-color: #ddf;">00 00 00 40</td> - <td style="background-color: #ccf;">00 00 0C 3F</td> - <td style="background-color: #cfc;">7F</td> - <td style="background-color: #dfd;">00</td> - <td style="background-color: #cfc;">00</td> - <td style="background-color: #dfd;">00</td> - <td style="background-color: #fcc;">7F FF</td> - <td style="background-color: #fdd;">3F FF</td> + <td>00 00 80 3F</td> + <td>00 00 00 40</td> + <td>00 00 0C 3F</td> + <td>7F</td> + <td>00</td> + <td>00</td> + <td>00</td> + <td>7F FF</td> + <td>3F FF</td> </tr> </tbody> </table> @@ -182,7 +182,7 @@ gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); <p>Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :</p> -<pre class="brush: js, highlight:[3, 6, 9]">// Décrire la disposition du tampon : +<pre class="brush: js">// Décrire la disposition du tampon : //1. position, non normalisé gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0); gl.enableVertexAttribArray(0); @@ -204,7 +204,7 @@ gl.linkProgram(shaderProgram); <p>soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.</p> -<pre class="brush: js, highlight:[2, 6, 10]">const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); +<pre class="brush: js">const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0); gl.enableVertexAttribArray(positionLoc); diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html index 661cafcb1f..119cf898ff 100644 --- a/files/fr/web/api/webrtc_api/connectivity/index.html +++ b/files/fr/web/api/webrtc_api/connectivity/index.html @@ -6,7 +6,7 @@ tags: translation_of: Web/API/WebRTC_API/Connectivity original_slug: Web/Guide/API/WebRTC/WebRTC_architecture --- -<p class="summary">(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p> +<p>(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p> <h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2> @@ -18,8 +18,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <p>Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.</p> -<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p> - <h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2> <p><a href="http://fr.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.</p> @@ -32,8 +30,6 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.</p> -<p><img alt="Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p> - <h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2> <p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.</p> @@ -52,4 +48,4 @@ original_slug: Web/Guide/API/WebRTC/WebRTC_architecture <h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2> -<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p> +<p><a href="https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="webrtc-complete-diagram.png"></a></p>
\ No newline at end of file diff --git a/files/fr/web/api/webrtc_api/index.html b/files/fr/web/api/webrtc_api/index.html index a03e5682bc..3409541610 100644 --- a/files/fr/web/api/webrtc_api/index.html +++ b/files/fr/web/api/webrtc_api/index.html @@ -16,7 +16,8 @@ translation_of: Web/API/WebRTC_API --- <div>{{APIRef("WebRTC")}}</div> -<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</span> L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p> +<p><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</p> +<p>L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p> <p>WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenri. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.</p> @@ -70,12 +71,12 @@ translation_of: Web/API/WebRTC_API <dt>{{domxref("RTCTrackEvent")}}</dt> <dd>Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.</dd> <dt>{{domxref("RTCConfiguration")}}</dt> - <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>.</dd> + <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>.</dd> </dl> <dl> <dt>{{domxref("RTCSctpTransport")}}</dt> - <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd> + <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd> </dl> <h3 id="Identité_et_sécurité">Identité et sécurité</h3> @@ -143,24 +144,24 @@ translation_of: Web/API/WebRTC_API <h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4> <ul> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Négociation de protocole de couche application pour les communications Web en temps réel</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>Codec audio WebRTC et exigences de traitement</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>Canaux de données RTCWeb</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>Protocole de canal de données RTCWeb</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>Architecture de sécurité WebRTC</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports pour RTCWEB</cite></a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/">Négociation de protocole de couche application pour les communications Web en temps réel</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/">Codec audio WebRTC et exigences de traitement</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/">Canaux de données RTCWeb</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/">Protocole de canal de données RTCWeb</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/">Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/">Architecture de sécurité WebRTC</a></li> + <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/">Transports pour RTCWEB</a></li> </ul> <h4 id="Protocoles_de_support_associés">Protocoles de support associés</h4> <ul> <li><a href="https://tools.ietf.org/html/rfc5245">Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse</a></li> - <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Utilitaires de traversée de session pour NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc3264"><cite>Un modèle d'offre / réponse avec protocole de description de session (SDP)</cite></a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</cite></a></li> + <li><a href="https://tools.ietf.org/html/rfc5389">Utilitaires de traversée de session pour NAT (STUN)</a></li> + <li><a href="https://tools.ietf.org/html/rfc7064">Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</a></li> + <li><a href="https://tools.ietf.org/html/rfc7065">Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</a></li> + <li><a href="https://tools.ietf.org/html/rfc3264">Un modèle d'offre / réponse avec protocole de description de session (SDP)</a></li> + <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/">Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</a></li> </ul> <h2 id="Spécifications">Spécifications</h2> @@ -194,7 +195,7 @@ translation_of: Web/API/WebRTC_API <p>En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous <a href="#Protocols">ressources</a>.</p> -<h2 class="Related_Topics" id="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li>{{domxref("MediaDevices")}}</li> diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html index 72f7cfcdb6..7bc9c98dab 100644 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.html +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html @@ -5,18 +5,27 @@ translation_of: Web/API/WebRTC_API/Session_lifetime original_slug: WebRTC/Introduction --- <div class="note"> - <p>WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> + <p><strong>Note :</strong> WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p> </div> + <h2 id="Etablir_la_connexion">Etablir la connexion</h2> + <p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p> + <h3 id="Signalisation">Signalisation</h3> + <p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p> + <h2 id="Transmission">Transmission</h2> + <h3 id="getUserMedia">getUserMedia</h3> + <p>Objet LocalMediaStream</p> + <h2 id="Reception">Reception</h2> -<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à <a title="about:config">about:config</a> et positionnez 'media.navigator.enabled' à 'true'.</p> + +<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.</p> + <div class="note"> - <p>Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p> + <p><strong>Note :</strong> Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p> </div> -<p> </p> diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html index 65bba15124..a4b67ab853 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -7,9 +7,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling translation_of_original: Web/API/WebRTC_API/WebRTC_basics original_slug: Web/Guide/API/WebRTC/WebRTC_basics --- -<div class="summary"> -<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="Introduction à l'architecture WebRTC">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne</p> -</div> +<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne</p> <h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2> @@ -94,7 +92,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) <p>Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.</p> <div class="note"> -<p>Ne pas utiliser les examples de cette page. Voir l'article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p> +<p><strong>Note :</strong> Ne pas utiliser les examples de cette page. Voir l'article <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p> </div> <h2 id="Note">Note</h2> @@ -109,7 +107,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) <p>Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.</p> -<pre class="brush: js notranslate">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +<pre class="brush: js">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> @@ -118,13 +116,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.</p> -<pre class="brush: js notranslate">var pc = new PeerConnection(configuration, options);</pre> +<pre class="brush: js">var pc = new PeerConnection(configuration, options);</pre> <h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> <p>L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.</p> -<pre class="brush: js notranslate">var configuration = { +<pre class="brush: js">var configuration = { iceServers: [ {url: "stun:23.21.150.121"}, {url: "stun:stun.l.google.com:19302"}, @@ -138,7 +136,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Selon le type de connexion, vous devez passer des options.</p> -<pre class="brush: js notranslate" lang="javascript">var options = { +<pre class="brush: js">var options = { optional: [ {DtlsSrtpKeyAgreement: true}, {RtpDataChannels: true} @@ -153,7 +151,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.</p> -<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) { +<pre class="brush: js">pc.onicecandidate = function (e) { // candidate exists in e.candidate if (e.candidate == null) { return } send("icecandidate", JSON.stringify(e.candidate)); @@ -172,7 +170,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>La structure de la base de données ressemble à ceci :</p> -<pre class="brush: js notranslate" lang="json">{ +<pre class="brush: js">{ "": { "candidate:": … "offer": … @@ -188,7 +186,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.</p> -<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) { +<pre class="brush: js">pc.createOffer(function (offer) { pc.setLocalDescription(offer); send("offer", JSON.stringify(offer)); @@ -198,7 +196,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.</p> -<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) { +<pre class="brush: js">var errorHandler = function (err) { console.error(err); };</pre> @@ -206,7 +204,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Options pour l'offre SDP.</p> -<pre class="brush: js notranslate" lang="javascript">var constraints = { +<pre class="brush: js">var constraints = { mandatory: { OfferToReceiveAudio: true, OfferToReceiveVideo: true @@ -221,7 +219,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.</p> -<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) { +<pre class="brush: js">recv("offer", function (offer) { offer = new SessionDescription(JSON.parse(offer)) pc.setRemoteDescription(offer); @@ -238,7 +236,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p><em>Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.</em></p> -<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> +<pre class="brush: js">var channel = pc.createDataChannel(channelName, channelOptions);</pre> <p>L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) <code>ondatachannel</code> dans le PeerConnection. Vous devez appeler <code>createDataChannel()</code> une fois avant de créer l'offre.</p> @@ -248,7 +246,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> -<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre> +<pre class="brush: js">var channelOptions = {};</pre> <p>Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> pour plus d'informations sur les options.</p> @@ -262,13 +260,13 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p> -<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) { +<pre class="brush: js">channel.onerror = function (err) { console.error("Channel Error:", err); };</pre> <h4 id="onmessage"><strong><code>onmessage</code></strong></h4> -<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) { +<pre class="brush: js">channel.onmessage = function (e) { console.log("Got message:", e.data); }</pre> @@ -282,7 +280,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <p>Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec <code>createChannel</code>. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback <code>ondatachannel</code> dans le PeerConnection afin d'accéder au même canal.</p> -<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) { +<pre class="brush: js">pc.ondatachannel = function (e) { e.channel.onmessage = function () { … }; };</pre> @@ -290,7 +288,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h4 id="send"><strong><code>send()</code></strong></h4> -<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre> +<pre class="brush: js">channel.send("Hi Peer!");</pre> <p>Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.</p> @@ -304,7 +302,7 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || <h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3> -<pre class="brush: js notranslate"><video id="preview" autoplay></video> +<pre class="brush: js"><video id="preview" autoplay></video> var video = document.getElementById("preview"); navigator.getUserMedia(mediaOptions, function (stream) { @@ -315,7 +313,7 @@ navigator.getUserMedia(mediaOptions, function (stream) { <p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p> -<pre class="brush: js notranslate" lang="javascript">var mediaOptions = { +<pre class="brush: js">var mediaOptions = { video: true, audio: true };</pre> @@ -332,11 +330,11 @@ navigator.getUserMedia(mediaOptions, function (stream) { <p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p> -<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre> +<pre class="brush: js">pc.addStream(stream);</pre> <h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> -<pre class="brush: js notranslate"><video id="otherPeer" autoplay></video> +<pre class="brush: js"><video id="otherPeer" autoplay></video> var otherPeer = document.getElementById("otherPeer"); pc.onaddstream = function (e) { diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.html b/files/fr/web/api/webrtc_api/taking_still_photos/index.html index 2cb9e54c38..26e4bde58c 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.html +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/WebRTC_API/Taking_still_photos original_slug: WebRTC/Prendre_des_photos_avec_la_webcam --- <h2 id="Introduction_et_demo">Introduction et demo</h2> -<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/">en demo</a>.</p> +<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/">en demo</a>.</p> <h2 id="Les_balises_HTML">Les balises HTML</h2> <p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p> <pre class="brush:html;"><video id="video"></video> @@ -95,7 +95,7 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam height = 0;</pre> <p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p> <div class="warning"> - <p>À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p> + <p><strong>Attention :</strong> À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p> </div> <h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3> <p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p> diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html index 45acf344a3..2ae740ebe7 100644 --- a/files/fr/web/api/websocket/index.html +++ b/files/fr/web/api/websocket/index.html @@ -82,7 +82,6 @@ translation_of: Web/API/WebSocket <h2 id="events">Évènements</h2> -<p>Vous pouvez é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/WebSocket/close_event"><code>close</code></a></dt> diff --git a/files/fr/web/api/websocket/websocket/index.html b/files/fr/web/api/websocket/websocket/index.html index 955611fa20..94ff66e828 100644 --- a/files/fr/web/api/websocket/websocket/index.html +++ b/files/fr/web/api/websocket/websocket/index.html @@ -19,9 +19,7 @@ var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]); <dt><code>url</code></dt> <dd>L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.</dd> <dt><code>protocols</code> {{optional_inline}}</dt> - <dd>Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le <code>protocol</code> indiqué). - </dd> - <dd>Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : <code>[]</code>.</dd> + <dd>Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le <code>protocol</code> indiqué). Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : <code>[]</code>.</dd> </dl> <h3 id="exceptions_thrown">Exceptions levées</h3> diff --git a/files/fr/web/api/websockets_api/index.html b/files/fr/web/api/websockets_api/index.html index 7ba0b6b22b..3a1f82be97 100644 --- a/files/fr/web/api/websockets_api/index.html +++ b/files/fr/web/api/websockets_api/index.html @@ -19,14 +19,14 @@ translation_of: Web/API/WebSockets_API <p>L'<strong>API WebSocket</strong> est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.</p> -<div class="blockIndicator note"> -<p><strong>Note: </strong> Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.</p> +<div class="note"> +<p><strong>Note :</strong> Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.</p> </div> <h2 id="Interfaces">Interfaces </h2> <dl> - <dt><code><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">WebSocket</a></code></dt> + <dt><code><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications">WebSocket</a></code></dt> <dd>Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.</dd> <dt><code><a href="/fr/docs/Web/API/CloseEvent">CloseEvent</a></code></dt> <dd>Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.</dd> @@ -45,29 +45,27 @@ translation_of: Web/API/WebSockets_API <h2 id="Outils">Outils</h2> -<div class="cleared row topicpage-table"> <ul> - <li> <a href="https://humblenet.github.io/">HumbleNet</a><span> :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications.</span></li> + <li> <a href="https://humblenet.github.io/">HumbleNet</a> :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications.</li> <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Déclinaison plus légère et plus performante de WebSocket et écrite en <a href="https://isocpp.org/">C++11</a> et en <a href="https://nodejs.org/fr/">Node.js</a>.</li> <li><a href="https://github.com/ClusterWS/ClusterWS">ClusteWS</a>: Framework léger, rapide et puissant qui permet de construire des application en <a href="https://nodejs.org/fr/">Node.js</a>.</li> - <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: API WebSocket puissante et multiplateformes en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="https://socketcluster.io/#!/">SocketCluster</a>: Framework open source en temps réel en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.</li> - <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: API WebSocket coté serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="https://www.totaljs.com/">Total.js</a>: FrameWork pour web application en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://socket.io">Socket.IO</a>: API WebSocket puissante et multiplateformes en <a href="http://nodejs.org">Node.js</a>.</li> + <li><a href="https://socketcluster.io/#!/">SocketCluster</a>: Framework open source en temps réel en <a href="http://nodejs.org">Node.js</a>. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.</li> + <li><a href="http://nodejs.org">Node.js</a>.</li> + <li><a href="https://www.totaljs.com/">Total.js</a>: FrameWork pour web application en <a href="http://nodejs.org">Node.js</a>.</li> + <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en <a href="http://nodejs.org">Node.js</a>.</li> <li><a href="http://signalr.net/">SignalR</a>: SignalR est une nouvelle bibliothèque pour les développeurs <a href="https://dotnet.microsoft.com/apps/aspnet">ASP.NET</a>. Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux de WebSockets lorsqu'elles sont disponibles, dans le cas contraire elle utilise d'autres technos, sans modifier votre application.</li> <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).</li> - <li><a href="https://github.com/websockets/ws">ws</a>: La plus populaire des WebSockets pour client & serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="https://github.com/websockets/ws">ws</a>: La plus populaire des WebSockets pour client & serveur en <a href="http://nodejs.org">Node.js</a>.</li> <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).</li> <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.</li> </ul> -</div> <h2 id="Ressources_liées">Ressources liées</h2> <ul> - <li><a href="/fr/docs/AJAX" title="AJAX">AJAX</a></li> - <li><a href="/fr/docs/Web/JavaScript" title="JavaScript">JavaScript</a></li> + <li><a href="/fr/docs/AJAX">AJAX</a></li> + <li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li> </ul> <h2 id="Spécifications">Spécifications</h2> @@ -89,13 +87,13 @@ translation_of: Web/API/WebSockets_API <tr> <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td> <td> - <p><span class="spec-CR">Candidat au statut de Recommendation</span></p> + <p>Candidat au statut de Recommendation</p> </td> <td></td> </tr> <tr> <td>{{RFC(6455, "The WebSocket Protocol")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> + <td>IETF RFC</td> <td></td> </tr> </tbody> @@ -110,7 +108,7 @@ translation_of: Web/API/WebSockets_API <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Le protocole WebSocket</a></li> - <li><a class="external" href="http://www.w3.org/TR/websockets/">Les spécifications de l'API WebSocket</a></li> - <li><a href="/fr/docs/Web/API/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> + <li><a href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Le protocole WebSocket</a></li> + <li><a href="http://www.w3.org/TR/websockets/">Les spécifications de l'API WebSocket</a></li> + <li><a href="/fr/docs/Web/API/Server-sent_events">Server-Sent Events</a></li> </ul> diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html index c8cb6ccca9..bf8ac63d44 100644 --- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html +++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html @@ -9,21 +9,21 @@ translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java <p>Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.</p> -<p>Ce seveur respecte la <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.</p> +<p>Ce seveur respecte la <a href="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.</p> <h2 id="Premiers_pas">Premiers pas</h2> -<p>WebSockets communique via une connexion <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol" title="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>. La classe Java <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> est située dans le paquet <em>java.net</em>.</p> +<p>WebSockets communique via une connexion <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>. La classe Java <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> est située dans le paquet <em>java.net</em>.</p> <h3 id="ServerSocket">ServerSocket</h3> <p>Constructeur :</p> -<pre class="brush: java"><code><span class="memberNameLink">ServerSocket</span>(int port)</code></pre> +<pre class="brush: java"><code>ServerSocket(int port)</code></pre> <p>Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre <em>port</em>.</p> -<p><span style="line-height: 1.572;">Voici comment implémenter ce que nous venons d'apprendre :</span></p> +<p>Voici comment implémenter ce que nous venons d'apprendre :</p> <pre class="brush: java">import java.net.ServerSocket; import java.net.Socket; @@ -45,9 +45,9 @@ public class Server{ <p>Méthodes :</p> <ul> - <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a></span>()</code><br> + <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html">Socket</a><code> <a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a>()</code><br> Renvoie un flux d’entrée pour ce socket.</li> - <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a></span>()</code><br> + <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html">Socket</a><code> <a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a>()</code><br> Renvoie un flux sortant pour ce socket.</li> </ul> @@ -63,7 +63,7 @@ public class Server{ <p>Méthodes :</p> -<pre class="brush: java"><span class="brush: cpp" style="line-height: 1.572;">read</span><code>(byte[] b, int off, int len)</code></pre> +<pre class="brush: java">read<code>(byte[] b, int off, int len)</code></pre> <p>Reads up to <em>len</em> bytes of data from the input stream into an array of bytes.<em> </em></p> @@ -180,7 +180,7 @@ if (get.find()) { </table> <p>FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.<br> - <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> signifie que ceci est un texte. </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">Liste exhaustive des Opcodes</a></p> + Opcode <em>0x1</em> signifie que ceci est un texte. <a href="http://tools.ietf.org/html/rfc6455#section-5.2">Liste exhaustive des Opcodes</a></p> <p>- 134:</p> @@ -189,7 +189,7 @@ if (get.find()) { <p>Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.</p> <div class="note"> -<p>Je peux prendre 128 car le premier bit est toujours 1.</p> +<p><strong>Note :</strong> Je peux prendre 128 car le premier bit est toujours 1.</p> </div> <p>- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.</p> diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html index 9e16a43e45..d2cf5fccbf 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html +++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -5,13 +5,15 @@ translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications --- <p>Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est dépendant d'aucune plateforme.</p> -<div class="note"><strong>Note:</strong> Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.</div> +<div class="note"> + <p><strong>Note :</strong> Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.</p> +</div> <p>{{AvailableInWorkers}}</p> <h2 id="Création_d'un_objet_WebSocket">Création d'un objet WebSocket</h2> -<p>Pour utiliser le protocole WebSocket, il faut créer un objet <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.</p> +<p>Pour utiliser le protocole WebSocket, il faut créer un objet <a href="/en/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a> ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.</p> <p>Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :</p> @@ -45,13 +47,13 @@ WebSocket WebSocket( <h3 id="Erreurs_de_connexion">Erreurs de connexion</h3> -<p>Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invoquant ainsi son gestionnaire d'évènement <code>onerror</code>) suivi d'un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> (qui invoque alors son gestionnaire d'évènement <code>onclose</code>) indiquant la raison de la clôture.</p> +<p>Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet <a href="/en/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a> (invoquant ainsi son gestionnaire d'évènement <code>onerror</code>) suivi d'un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a> (qui invoque alors son gestionnaire d'évènement <code>onclose</code>) indiquant la raison de la clôture.</p> -<p>A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> est envoyé à travers l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p> +<p>A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la <a href="http://tools.ietf.org/html/rfc6455#section-7.4">RFC 6455, Section 7.4</a> est envoyé à travers l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a>.</p> <h3 id="Exemples">Exemples</h3> -<p>Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.</p> +<p>Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse <code>ws://www.example.com/socketserver</code>. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.</p> <pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); </pre> @@ -65,15 +67,17 @@ WebSocket WebSocket( <p>Une fois la connexion établie (c'est-à-dire quand <code>readyState</code> a la valeur <code>OPEN</code>), la propriété <code>protocol</code> indique quel protocole le server a sélectionné.</p> -<p>Dans les exemples ci-dessus on a remplacé <code>http</code> par <code>ws</code>, et de la même façon on peut remplacer <code>https</code> par <code>wss</code> . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec <code><span class="nowiki">ws://www.example.com</span></code> ou <code><span class="nowiki">wss://www.example.com</span></code>.</p> +<p>Dans les exemples ci-dessus on a remplacé <code>http</code> par <code>ws</code>, et de la même façon on peut remplacer <code>https</code> par <code>wss</code> . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec <code>ws://www.example.com</code> ou <code>wss://www.example.com</code>.</p> <h2 id="Envoi_de_données_vers_le_serveur">Envoi de données vers le serveur</h2> -<p>Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> de l'objet <code>WebSocket</code> pour chaque message que l'on veut envoyer :</p> +<p>Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()"><code>send()</code></a> de l'objet <code>WebSocket</code> pour chaque message que l'on veut envoyer :</p> -<p>Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p> +<p>Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de <a href="/en/JavaScript_typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p> -<div class="note"><strong>Note:</strong> Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.</div> +<div class="note"> + <p><strong>Note :</strong> Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.</p> +</div> <p>Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode <code>send()</code> juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement <code>onopen</code>, et de n'essayer d'envoyer des données que lorsqu'il est appelé.</p> @@ -84,7 +88,7 @@ WebSocket WebSocket( <h3 id="Utilisation_de_JSON_pour_transmettre_des_objets">Utilisation de JSON pour transmettre des objets</h3> -<p>Il peut être utile d'utiliser <a href="/en/JSON" title="en/JSON">JSON</a> pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:</p> +<p>Il peut être utile d'utiliser <a href="/en/JSON">JSON</a> pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:</p> <pre class="brush: js">// Envoi d'un texte à tous les utilisateurs à travers le serveur function sendText() { @@ -165,7 +169,7 @@ function sendText() { }; </pre> -<p>Ici nous utilisons <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.</p> +<p>Ici nous utilisons <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse"><code>JSON.parse()</code></a> pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.</p> <h3 id="Encodage_du_texte">Encodage du texte</h3> @@ -175,7 +179,7 @@ function sendText() { <h2 id="Fermeture_de_la_connexion">Fermeture de la connexion</h2> -<p>Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a> de l'objet WebSocket:</p> +<p>Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()"><code>close()</code></a> de l'objet WebSocket:</p> <pre class="brush: js">exampleSocket.close(); </pre> diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html index d3797e4f46..5cc97ce8b0 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html @@ -7,20 +7,20 @@ translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers <p>Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "<a href="https://fr.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.</p> -<p>Avant de débuter, vous <strong>devez</strong> connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le <u><em>minimum</em></u><em> </em>des connaissances requises et non un guide ultime.</p> +<p>Avant de débuter, vous <strong>devez</strong> connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le <em>minimum</em> des connaissances requises et non un guide ultime.</p> <div class="note"> -<p>Lire la dernière spécification officielle sur les WebSockets <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. </p> +<p><strong>Note :</strong> Lire la dernière spécification officielle sur les WebSockets <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production.</p> </div> <p>Un serveur WebSocket est compris ici en "bas niveau" (<em>c'est-à-dire plus proche du langage machine que du langage humain</em>. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un <a href="https://fr.wikipedia.org/wiki/Proxy_inverse">proxy inverse</a> (<em>c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique</em>) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des <em>cookies</em> et d'autres méthodes d'authentification. </p> -<h2 id="La_poignée_de_mains_du_WebSocket"><a id="PoignéeDeMain" name="PoignéeDeMain">La "poignée de mains" du WebSocket</a></h2> +<h2 id="La_poignée_de_mains_du_WebSocket">La "poignée de mains" du WebSocket</h2> <p>En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine <em>exemple.com</em> sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin <em>/chat</em>. </p> <div class="warning"> -<p><strong>Attention:</strong> Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. </p> +<p><strong>Attention :</strong> Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. </p> </div> <p>La <em>poignée de mains</em> est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. </p> @@ -40,18 +40,18 @@ Sec-WebSocket-Version: 13 <p>Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. En outre, des en-têtes communs tel que <em>User-Agent</em>, <em>Referer</em>, <em>Cookie</em> ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. </p> -<p>Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" (<em>erreur 400 : la requête est incorrecte</em>) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (<em>en somme, tout dépend du comportement du client</em>). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête <em>Sec-WebSocket-Version</em> correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (<em>voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction</em>). Maintenant, nous allons passer à l'entête attendu : <em>Sec-WebSocket-Key</em>.</p> +<p>Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "<a href="/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" (<em>erreur 400 : la requête est incorrecte</em>) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (<em>en somme, tout dépend du comportement du client</em>). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête <em>Sec-WebSocket-Version</em> correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (<em>voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction</em>). Maintenant, nous allons passer à l'entête attendu : <em>Sec-WebSocket-Key</em>.</p> <div class="note"> -<p><strong>Astuce:</strong> Un grand nombre de navigateurs enverront un <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Entête d'origine</code></a>. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. </p> +<p><strong>Note :</strong> Un grand nombre de navigateurs enverront un <a href="/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Entête d'origine</code></a>. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse <a href="/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. </p> </div> <div class="note"> -<p><strong>Astuce:</strong> L'URI de la requête (<code>/chat </code>dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple <code>exemple.com/chat</code> peut être associée à une API/une application de dialogue multiutilisateurs lorsque <code>/game</code> invoquera son homologue pour un jeu. </p> +<p><strong>Note :</strong> L'URI de la requête (<code>/chat </code>dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple <code>exemple.com/chat</code> peut être associée à une API/une application de dialogue multiutilisateurs lorsque <code>/game</code> invoquera son homologue pour un jeu. </p> </div> <div class="note"> -<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Les codes réguliers (<em>c-à-d défini par le protocole standard</em>) HTTP</a> ne peuvent être utilisés qu'<strong><em>avant</em></strong> la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. </p> +<p><strong>Note:</strong> <a href="/en-US/docs/HTTP/Response_codes">Les codes réguliers (<em>c-à-d défini par le protocole standard</em>) HTTP</a> ne peuvent être utilisés qu'<strong><em>avant</em></strong> la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. </p> </div> <h3 id="La_réponse_du_serveur_lors_de_la_poignée_de_mains">La réponse du serveur lors de la poignée de mains </h3> @@ -65,16 +65,16 @@ Connection: Upgrade </strong></pre> -<p>En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (<em>rassembler</em>) la valeur de <em>Sec-WebSocket-Key</em> et "<em>258EAFA5-E914-47DA-95CA-C5AB0DC85B11</em>" (valeur fixée par défaut : c'est une "<a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a>") puis procéder au hash par la méthode <a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1</a> du résultat et retourner le format au format <a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a>. </p> +<p>En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (<em>rassembler</em>) la valeur de <em>Sec-WebSocket-Key</em> et "<em>258EAFA5-E914-47DA-95CA-C5AB0DC85B11</em>" (valeur fixée par défaut : c'est une "<a href="https://en.wikipedia.org/wiki/Magic_string">magic string</a>") puis procéder au hash par la méthode <a href="https://en.wikipedia.org/wiki/SHA-1">SHA-1</a> du résultat et retourner le format au format <a href="https://en.wikipedia.org/wiki/Base64">base64</a>. </p> <div class="note"> -<p><strong>Pour information / pour mémoire :</strong> Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). </p> +<p><strong>Note :</strong> Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). </p> </div> -<p>Ainsi si la clé (la valeur de l'entête du client) était "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", le retour (<em><u>Accept</u> * dans la version d'origine du tutoriel</em>) sera : "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! </p> +<p>Ainsi si la clé (la valeur de l'entête du client) était "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", le retour (<em>Accept * dans la version d'origine du tutoriel</em>) sera : "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! </p> <div class="note"> -<p>Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce <em><strong>avant </strong></em>la fin du processus de poignée de main. </p> +<p><strong>Note :</strong> Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce <em><strong>avant </strong></em>la fin du processus de poignée de main. </p> </div> <h3 id="Suivre_les_clients_confirmés">Suivre les clients confirmés </h3> @@ -88,12 +88,12 @@ Connection: Upgrade <h3 id="Format">Format</h3> <div class="warning"> -<p><strong>Note du traducteur</strong> : Dans cette partie, <code>payload </code>équivaut en bon français à <em>charge utile</em>. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit <code>payload data comme des <em>données utiles. </em></code></p> +<p><strong>Attention :</strong> Dans cette partie, <code>payload </code>équivaut en bon français à <em>charge utile</em>. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit <code>payload data comme des <em>données utiles. </em></code></p> </div> <p>Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : </p> -<pre style="float: left; margin-right: 20px;"> <strong>0</strong> <strong>1</strong> <strong>2</strong> 3 +<pre> <strong>0</strong> <strong>1</strong> <strong>2</strong> 3 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 +-+-+-+-+-------+-+-------------+-------------------------------+ |F|R|R|R| opcode|M| Payload len | Extended payload length | @@ -146,10 +146,10 @@ Connection: Upgrade <pre>var DECODED = ""; for (var i = 0; i < ENCODED.length; i++) { DECODED[i] = ENCODED[i] ^ MASK[i % 4]; -<span style="line-height: 1.5;">}</span></pre> +}</pre> <div class="note"> -<p>Ici la variable <code>DECODED</code> correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (<em>si c'est <code>json</code>, vous devez encore décoder les données utiles reçues avec le parseur JSON</em>). </p> +<p><strong>Note :</strong> Ici la variable <code>DECODED</code> correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (<em>si c'est <code>json</code>, vous devez encore décoder les données utiles reçues avec le parseur JSON</em>). </p> </div> <h3 id="La_fragmentation_des_messages">La fragmentation des messages </h3> @@ -158,7 +158,7 @@ for (var i = 0; i < ENCODED.length; i++) { <p>Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour <em>0x1 </em>c'est du texte, pour <em>0x2 </em>des données binaires, etc. Toutefois pour <em>0x0</em>, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : </p> -<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" +<pre><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" <strong>Server:</strong> <em>(process complete message immediately) </em>Hi. <strong>Client:</strong> FIN=0, opcode=0x1, msg="and a" <strong>Server:</strong> <em>(listening, new message containing text started)</em> @@ -177,35 +177,31 @@ for (var i = 0; i < ENCODED.length; i++) { <p>Le <em>ping </em>ou le <em>pong </em>sont des trames classiques dites <strong>de contrôle</strong>. Les <em>pings </em>disposent d'un opcode à <code>0x9</code> et les <em>pongs </em>à <code>0xA</code>. Lorsqu'un <em>ping </em>est envoyé, le <em>pong </em>doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le <em>pong </em>seul (c-à-d sans <em>ping</em>) est ignoré. </p> <div class="note"> -<p>Lorsque plusieurs pings sont envoyés à la suite, un <strong>seul </strong>pong suffit en réponse (<em>le plus récent pour la donnée utile renvoyée</em>). </p> +<p><strong>Note :</strong> Lorsque plusieurs pings sont envoyés à la suite, un <strong>seul </strong>pong suffit en réponse (<em>le plus récent pour la donnée utile renvoyée</em>). </p> </div> <h2 id="Clore_la_connexion">Clore la connexion </h2> <p>La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">section 5.5.1</a>). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. </p> -<h2 id="Diverses_informations_utiles"><a id="Miscellaneous" name="Miscellaneous">Diverses informations utiles</a></h2> +<h2 id="Diverses_informations_utiles">Diverses informations utiles</h2> <div class="note"> -<p>L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> +<p><strong>Note :</strong> L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> </div> <p>Les extensions et sous-protocoles des WebSockets sont négociés durant <a href="#PoignéeDeMain">l'échange des entêtes de la poignée de mains</a>. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : <strong>le contrôle des extensions agit sur les trames</strong> ce qui modifie la charge utile ; <strong>alors que les sous-protocoles modifient uniquement la charge utile,</strong> et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). </p> <div class="warning"> -<p><strong>NDT : </strong>Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). </p> +<p><strong>Attention :</strong> Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). </p> </div> <h3 id="Les_extensions">Les extensions</h3> -<div class="note"> -<p><strong>Cette section mériterait d'être étendue et complétée. Merci de le faire si vous disposez des moyens pour le faire. </strong></p> -</div> - <p>L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. </p> <div class="note"> -<p>Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. </p> +<p><strong>Note :</strong> Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées.</p> </div> <h3 id="Les_sous-protocoles">Les sous-protocoles </h3> @@ -213,7 +209,7 @@ for (var i = 0; i < ENCODED.length; i++) { <p>Les sous-protocoles sont à comparer à <a href="https://en.wikipedia.org/wiki/XML_schema">un schéma XML</a> ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">une déclaration de DocType</a>. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (<em>et intangible : le client se voit imposer la mise en oeuvre par le serveur</em>), bien que les deux doivent l'accepter pour communiquer ensemble. </p> <div class="note"> -<p>Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. </p> +<p><strong>Note :</strong> Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. </p> </div> <p>Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : </p> @@ -236,19 +232,19 @@ Sec-WebSocket-Protocol: wamp </pre> <div class="warning"> -<p>Le serveur ne peut (ne doit) envoyer plus d'un entête <code>Sec-Websocket-Protocol</code>. <strong>S'il n'en supporte aucun, il ne doit pas renvoyer l'entête <code>Sec-WebSocket-Protocol</code> (l'entête vide n'est pas correct). </strong>Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). </p> +<p><strong>Attention :</strong> Le serveur ne peut (ne doit) envoyer plus d'un entête <code>Sec-Websocket-Protocol</code>. <strong>S'il n'en supporte aucun, il ne doit pas renvoyer l'entête <code>Sec-WebSocket-Protocol</code> (l'entête vide n'est pas correct). </strong>Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). </p> </div> -<p>Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format <a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous <u><strong>devez disposer</strong></u> d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. </p> +<p>Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format <a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous <strong>devez disposer</strong> d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. </p> <div class="note"> -<p><strong>Astuce:</strong> Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de <em>chat </em>sur le domaine <em>exemple.com</em>, vous devrirez utiliser : <code>Sec-WebSocket-Protocol: chat.exemple.com</code>. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : <code>chat.exemple.com/2.0</code>. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. </p> +<p><strong>Note :</strong> Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de <em>chat </em>sur le domaine <em>exemple.com</em>, vous devrirez utiliser : <code>Sec-WebSocket-Protocol: chat.exemple.com</code>. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : <code>chat.exemple.com/2.0</code>. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon.</p> </div> <h2 id="Contenus_associés">Contenus associés</h2> <ul> - <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> </ul> diff --git a/files/fr/web/api/webvr_api/index.html b/files/fr/web/api/webvr_api/index.html index 148a80907d..4d41a433a3 100644 --- a/files/fr/web/api/webvr_api/index.html +++ b/files/fr/web/api/webvr_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebVR_API --- <div>{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}</div> -<p class="summary">WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.</p> +<p>WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.</p> <h2 id="Concepts_and_usage">Concepts et usage</h2> diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html index 309fd3ff58..ac6babdad9 100644 --- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html @@ -6,7 +6,7 @@ original_slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_ --- <div>{{APIRef("WebVR API")}}</div> -<p class="summary">La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">API Gamepad</a>, et plus spécifiquement avec l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">API Gamepad Extensions</a> qui ajoute des API pour accéder, entre autres, à la <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">position du controller</a>, au <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">retour haptique</a>, etc.. Cet article fournit les bases pour utiliser ces API.</p> +<p>La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'<a href="/en-US/docs/Web/API/Gamepad_API">API Gamepad</a>, et plus spécifiquement avec l'<a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">API Gamepad Extensions</a> qui ajoute des API pour accéder, entre autres, à la <a href="/en-US/docs/Web/API/GamepadPose">position du controller</a>, au <a href="/en-US/docs/Web/API/GamepadHapticActuator">retour haptique</a>, etc.. Cet article fournit les bases pour utiliser ces API.</p> <h2 id="L'API_WebVR">L'API WebVR</h2> @@ -244,8 +244,6 @@ if(gp) { } }</pre> -<h2 id="Summary">Summary</h2> - <p>This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.</p> <h2 id="See_also">See also</h2> diff --git a/files/fr/web/api/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html index e450f04863..eaca4fd78c 100644 --- a/files/fr/web/api/webvtt_api/index.html +++ b/files/fr/web/api/webvtt_api/index.html @@ -5,7 +5,9 @@ translation_of: Web/API/WebVTT_API --- <div>{{DefaultAPISidebar("WebVTT")}}</div> -<p><span class="seoSummary"><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur </span>{{HTMLElement("video")}}. WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p> +<p><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.</p> + +<p> WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p> <h2 id="Les_fichiers_WebVTT">Les fichiers WebVTT</h2> @@ -44,16 +46,16 @@ Ne jamais boire de l'azote liquide. <h5 id="Exemple_1_-_Plus_petit_fichier_WebVTT">Exemple 1 - Plus petit fichier WebVTT</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT </pre> <h5 id="Exemple_2_-_Simple_fichier_WebVTT_contenant_un_entête">Exemple 2 - Simple fichier WebVTT contenant un entête</h5> -<pre class="eval notranslate">WEBVTT - Ce fichier ne possède pas de réplique.</pre> +<pre class="eval">WEBVTT - Ce fichier ne possède pas de réplique.</pre> <h5 id="Exemple_3_-_Fichier_WebVTT_courant_avec_un_entête_et_des_répliques">Exemple 3 - Fichier WebVTT courant avec un entête et des répliques</h5> -<pre class="eval notranslate">WEBVTT - Ce fichier possède des répliques. +<pre class="eval">WEBVTT - Ce fichier possède des répliques. 14 00:01:14.815 --> 00:01:18.114 @@ -115,11 +117,11 @@ NOTE Cette ligne est la dernière ligne du fichier <h5 id="Exemple_4_-_Simple_commentaire_WebVTT">Exemple 4 - Simple commentaire WebVTT</h5> -<pre class="eval notranslate">NOTE Ceci est un simple commentaire</pre> +<pre class="eval">NOTE Ceci est un simple commentaire</pre> <h5 id="Exemple_5_-_Multi-line_comment">Exemple 5 - Multi-line comment</h5> -<pre class="eval notranslate">NOTE +<pre class="eval">NOTE Un autre commentaire qui est coupé sur plusieurs lignes. @@ -129,7 +131,7 @@ sur plusieurs lignes de cette façon. <h5 id="Exemple_6_-_Usage_commun_des_commentaires">Exemple 6 - Usage commun des commentaires</h5> -<pre class="eval notranslate">WEBVTT - Traduction de ce film que j'aime +<pre class="eval">WEBVTT - Traduction de ce film que j'aime NOTE Cette traduction a été faite par Kyle pour que @@ -158,7 +160,7 @@ NOTE Cette dernière ligne n'est pas forcément bien traduite. <h3 id="Avec_du_CSS">Avec du CSS</h3> -<pre class="brush: css notranslate">video::cue { +<pre class="brush: css">video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } @@ -172,16 +174,16 @@ video::cue(b) { <p>The HTML snippet below actually handles displaying the media itself.</p> -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> +<pre class="brush: html"><video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> </pre> -<h3 id="Dans_le_fichier_WebVTT">Dans le fichier WebVTT</h3> +<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3> <p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT STYLE ::cue { @@ -204,7 +206,7 @@ NOTE style blocks cannot appear after the first cue.</pre> <p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 1 00:00.000 --> 00:02.000 @@ -215,12 +217,12 @@ crédit de transcription Transcrit par Célestes™ </pre> -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } +<pre class="brush: css">::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; }</pre> <p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% Where did he go? @@ -231,7 +233,7 @@ I think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% What are you waiting for?</pre> -<h2 id="Les_répliques_WebVTT">Les répliques WebVTT</h2> +<h2 id="WebVTT_cues">WebVTT cues</h2> <p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p> @@ -239,13 +241,13 @@ What are you waiting for?</pre> <li>An optional cue identifier followed by a newline.</li> <li>Cue timings.</li> <li>Optional cue settings with at least one space before the first and between each setting.</li> - <li>One or more newlines.</li> + <li>A single newline.</li> <li>The cue payload text.</li> </ul> -<h5 id="Exemple_7_-_Exemple_de_réplique">Exemple 7 - Exemple de réplique</h5> +<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> -<pre class="eval notranslate">1 - Title Crawl +<pre class="brush: plain">1 - Title Crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start Some time ago in a place rather distant....</pre> @@ -255,11 +257,11 @@ Some time ago in a place rather distant....</pre> <h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> -<pre class="eval notranslate">1 - Title Crawl</pre> +<pre class="brush: plain">1 - Title Crawl</pre> <h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> -<pre class="eval notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -321,7 +323,7 @@ Third <li>Must be between 00 and 59 inclusive.</li> </ul> </li> - <li><code>ttt</code> is miliseconds. + <li><code>ttt</code> is milliseconds. <ul> <li>Must be between 000 and 999 inclusive.</li> </ul> @@ -330,20 +332,20 @@ Third <h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> -<pre class="eval notranslate">00:22.230 --> 00:24.606 -00:30.739 --> 00:00:34.074 -00:00:34.159 --> 00:35.743 +<pre class="brush: plain">00:00:22.230 --> 00:00:24.606 +00:00:30.739 --> 00:00:34.074 +00:00:34.159 --> 00:00:35.743 00:00:35.827 --> 00:00:40.122</pre> <h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000</pre> <h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000</pre> @@ -534,7 +536,7 @@ Third <td>top</td> </tr> <tr> - <th><code>align:middle</code></th> + <th><code>align:center</code></th> <td>centred horizontally</td> <td>centred vertically</td> <td>centred vertically</td> @@ -554,7 +556,7 @@ Third <p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end @@ -562,7 +564,7 @@ Third <h3 id="Cue_payload">Cue payload</h3> -<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> +<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> <p>A cue text payload cannot contain the string "<code>-->"</code>, the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p> @@ -607,7 +609,7 @@ Third </tr> <tr> <td>Non-breaking space</td> - <td><code> </code></td> + <td><code> </code></td> <td><code>&nbsp;</code></td> </tr> </tbody> @@ -621,13 +623,13 @@ Third <li><strong>Timestamp tag</strong> <ul> - <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> + <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> </ul> <div> <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - <pre class="eval notranslate">1 + <pre class="brush: plain">1 00:16.500 --> 00:18.500 When the moon <00:17.500>hits your eye @@ -643,7 +645,7 @@ That's <00:00:21.000>amore </li> </ul> -<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> +<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> <ul> <li><strong>Class tag</strong> (<code><c></c></code>) @@ -655,7 +657,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - <pre class="notranslate"><c.classname>text</c></pre> + <pre class="brush: html"><c.classname>text</c></pre> </div> </li> <li><strong>Italics tag</strong> (<code><i></i></code>) @@ -666,7 +668,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - <pre class="notranslate"><i>text</i></pre> + <pre class="brush: html"><i>text</i></pre> </div> </li> <li><strong>Bold tag</strong> (<code><b></b></code>) @@ -677,7 +679,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - <pre class="notranslate"><b>text</b></pre> + <pre class="brush: html"><b>text</b></pre> </div> </li> <li><strong>Underline tag</strong> (<code><u></u></code>) @@ -688,29 +690,29 @@ That's <00:00:21.000>amore <div> <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - <pre class="notranslate"><u>text</u></pre> + <pre class="brush: html"><u>text</u></pre> </div> </li> <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) <ul> - <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> + <li>Used with ruby text tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> </ul> <div> <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre class="brush: html"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) <ul> - <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> + <li>Used with ruby tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> </ul> <div> <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre class="brush: html"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Voice tag</strong> (<code><v></v></code>) @@ -721,70 +723,22 @@ That's <00:00:21.000>amore <div> <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - <pre class="notranslate"><v Bob>text</v></pre> + <pre class="brush: html"><v Bob>text</v></pre> </div> </li> </ul> -<h2 id="Interfaces">Interfaces</h2> - -<p>There are two interfaces or APIs used in WebVTT which are:</p> - -<h3 id="VTTCue_interface">VTTCue interface</h3> - -<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p> - -<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; -enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; -enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; -enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; -enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)] -interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> { - attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>; - attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>; - attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>; - <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>(); -};</pre> - -<h3 id="VTTRegion_interface">VTTRegion interface</h3> - -<p>This is the second interface in WebVTT API.</p> - -<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] -interface <dfn>VTTRegion</dfn> { - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; - attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>; -};</pre> - <h2 id="Methods_and_properties">Methods and properties</h2> <p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p> -<ul style="list-style-type: circle;"> +<ul> <li> <h3 id="VTTCue">VTTCue</h3> <ul> <li>The methods which are available in this interface are: - <ul style="list-style-type: circle;"> + <ul> <li>GetCueAsHTML to get the HTML of that Cue.</li> <li>VTT Constructor for creating new objects of Cues.</li> <li>Autokeyword.</li> @@ -800,7 +754,7 @@ interface <dfn>VTTRegion</dfn> { <ul> <li>The methods used for region are listed below along with description of their functionality: - <ul style="list-style-type: circle;"> + <ul> <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li> <li>VTT Region Constructor: for construction of new VTT Regions.</li> </ul> @@ -815,17 +769,17 @@ interface <dfn>VTTRegion</dfn> { <ol> <li>Open a notepad.</li> - <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li> + <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li> </ol> -<pre class="notranslate">WEBVTT</pre> +<pre class="brush: plain">WEBVTT</pre> -<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> +<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> -<pre class="notranslate">00:01.000 --> 00:05.000</pre> +<pre class="brush: plain">00:01.000 --> 00:05.000</pre> <ol> - <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> + <li>On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.</li> <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li> </ol> @@ -835,7 +789,7 @@ interface <dfn>VTTRegion</dfn> { <p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 04:02.500 --> 04:05.000 J’ai commencé le basket à l'âge de 13, 14 ans @@ -856,24 +810,20 @@ Sur les <i.foreignphrase><lang en>playground</lang></i>, <p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> +<table> <tbody> <tr> <th>Specification</th> - <th>Status</th> - <th>Comment</th> </tr> <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td>Définition initiales</td> + <td><a href="https://w3c.github.io/webvtt/">WebVTT: The Web Video Text Tracks Format</a></td> </tr> </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3> diff --git a/files/fr/web/api/webxr_device_api/index.html b/files/fr/web/api/webxr_device_api/index.html index ee041f0429..86781da1b7 100644 --- a/files/fr/web/api/webxr_device_api/index.html +++ b/files/fr/web/api/webxr_device_api/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/WebXR_Device_API --- <p>{{DefaultAPISidebar("WebXR Device API")}}</p> -<p><span class="seoSummary"><strong>WebXR</strong> est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (<strong>Réalité Virtuelle</strong>, ou <strong>VR</strong>), ou pour ajouter des contenus graphiques dans le monde réel, (<strong>Réalité Augmentée</strong>, ou <strong>AR</strong>).</span> L'<strong>API de périphérique WebXR </strong>implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.</p> +<p><strong>WebXR</strong> est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (<strong>Réalité Virtuelle</strong>, ou <strong>VR</strong>), ou pour ajouter des contenus graphiques dans le monde réel, (<strong>Réalité Augmentée</strong>, ou <strong>AR</strong>).</p> + +<p>L'<strong>API de périphérique WebXR </strong>implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.</p> <p>Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.</p> @@ -30,10 +32,6 @@ translation_of: Web/API/WebXR_Device_API <h2 id="Les_concepts_et_lutilisation_des_périphériques_WebXR">Les concepts et l'utilisation des périphériques WebXR</h2> -<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;"> -<figcaption><strong>Exemple de configuration matérielle WebXR</strong></figcaption> -<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure> - <p>Alors que l'ancienne <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.</p> <p>Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.</p> @@ -94,7 +92,7 @@ translation_of: Web/API/WebXR_Device_API <dt>{{domxref("XRReferenceSpaceEvent")}}</dt> <dd>Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.</dd> <dt>{{domxref("XRSessionEvent")}}</dt> - <dd>Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. <s>Par exemple, si la position et/ou l'orientation </s></dd> + <dd>Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation</dd> </dl> <h2 id="Extensions_de_lAPI_WebGL">Extensions de l'API WebGL</h2> diff --git a/files/fr/web/api/wheelevent/deltax/index.html b/files/fr/web/api/wheelevent/deltax/index.html index f98967d589..05a9e41e39 100644 --- a/files/fr/web/api/wheelevent/deltax/index.html +++ b/files/fr/web/api/wheelevent/deltax/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/WheelEvent/deltaX <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <code><em>dX</em> = <em>event</em>.deltaX;</code></pre> +<pre class="syntaxbox">var <code><em>dX</em> = <em>event</em>.deltaX;</code></pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0}); +<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0}); console.log(syntheticEvent.deltaX); </pre> diff --git a/files/fr/web/api/wheelevent/deltay/index.html b/files/fr/web/api/wheelevent/deltay/index.html index f1a0508f25..49eeb736f5 100644 --- a/files/fr/web/api/wheelevent/deltay/index.html +++ b/files/fr/web/api/wheelevent/deltay/index.html @@ -17,11 +17,11 @@ translation_of: Web/API/WheelEvent/deltaY <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre> +<pre class="syntaxbox">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0}); +<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0}); console.log(syntheticEvent.deltaY); </pre> diff --git a/files/fr/web/api/wheelevent/deltaz/index.html b/files/fr/web/api/wheelevent/deltaz/index.html index 608cc4349b..8ab33605b0 100644 --- a/files/fr/web/api/wheelevent/deltaz/index.html +++ b/files/fr/web/api/wheelevent/deltaz/index.html @@ -18,11 +18,11 @@ translation_of: Web/API/WheelEvent/deltaZ <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <code><em>dZ</em> = <em>event</em>.deltaZ;</code></pre> +<pre class="syntaxbox">var <code><em>dZ</em> = <em>event</em>.deltaZ;</code></pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0}); +<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0}); console.log(syntheticEvent.deltaZ); </pre> diff --git a/files/fr/web/api/wheelevent/index.html b/files/fr/web/api/wheelevent/index.html index ef8e0f5c4c..fcd871b623 100644 --- a/files/fr/web/api/wheelevent/index.html +++ b/files/fr/web/api/wheelevent/index.html @@ -13,12 +13,12 @@ translation_of: Web/API/WheelEvent <p>L'interface <strong><code>WheelEvent</code></strong> représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.</p> -<div class="blockIndicator warning"> -<p><strong>Important: Il s'agit de l'interface d'évènement de roue standard à utiliser.</strong> Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.</p> +<div class="warning"> +<p><strong>Attention :</strong> Il s'agit de l'interface d'évènement de roue standard à utiliser. Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.</p> </div> -<div class="blockIndicator note"> -<p><strong>Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} :</strong> L'action par défaut d'un évènement <code>wheel</code> est définie par l'implantation. Ainsi, un évènement <code>wheel</code> ne distribue pas nécessairement un évènement <code>scroll</code>. Même lorsque c'est le cas, cela ne signifie pas que les valeurs <code>delta*</code> dans l'évènement <code>wheel</code> reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés <code>delta*</code> pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement <code>scroll</code>.</p> +<div class="note"> +<p><strong>Note :</strong> Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} :</strong> L'action par défaut d'un évènement <code>wheel</code> est définie par l'implantation. Ainsi, un évènement <code>wheel</code> ne distribue pas nécessairement un évènement <code>scroll</code>. Même lorsque c'est le cas, cela ne signifie pas que les valeurs <code>delta*</code> dans l'évènement <code>wheel</code> reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés <code>delta*</code> pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement <code>scroll</code>.</p> </div> <p>{{InheritanceDiagram}}</p> @@ -34,7 +34,7 @@ translation_of: Web/API/WheelEvent <p><em>Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p> -<dl id="raw_prop"> +<dl> <dt>{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}</dt> <dd>Renvoie un <code>double</code> représentant le montant du défilement horizontal.</dd> <dt>{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}</dt> diff --git a/files/fr/web/api/window/afterprint_event/index.html b/files/fr/web/api/window/afterprint_event/index.html index 2346683665..c63ed6bc56 100644 --- a/files/fr/web/api/window/afterprint_event/index.html +++ b/files/fr/web/api/window/afterprint_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/afterprint <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">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;">Propagation</dt> @@ -60,5 +60,5 @@ original_slug: Web/Events/afterprint <h2 id="Evénements_liés">Evénements liés</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li> + <li><a href="/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li> </ul> diff --git a/files/fr/web/api/window/alert/index.html b/files/fr/web/api/window/alert/index.html index cacd0d33db..4583f71d4e 100644 --- a/files/fr/web/api/window/alert/index.html +++ b/files/fr/web/api/window/alert/index.html @@ -8,30 +8,29 @@ tags: translation_of: Web/API/Window/alert --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Affiche un dialogue d'alerte contenant le texte spécifié.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">window.alert(<i>message</i>); </pre> <ul> <li><code>message</code> est une chaîne contenant le texte à afficher dans le dialogue d'alerte.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval">window.alert("Bonjour !"); </pre> <p>produira :</p> -<p><img alt="Image:AlertHelloWorld.png"></p> -<h3 id="Notes" name="Notes">Notes</h3> + +<p><img src="alerthelloworld.png"></p> + +<h3 id="Notes">Notes</h3> <p>Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.</p> -<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> +<p>Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> <p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> - <li><a href="/fr/DOM/window.confirm" title="Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.">confirm</a></li> - <li><a href="/fr/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li> -</ul> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.alert", "ja": "ja/DOM/window.alert", "pl": "pl/DOM/window.alert" } ) }}</p> + <li><a href="/fr/DOM/window.confirm">confirm</a></li> + <li><a href="/fr/DOM/window.prompt">prompt</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/applicationcache/index.html b/files/fr/web/api/window/applicationcache/index.html index 1999a31f7f..7518fb40ed 100644 --- a/files/fr/web/api/window/applicationcache/index.html +++ b/files/fr/web/api/window/applicationcache/index.html @@ -3,28 +3,26 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -<div class="blockIndicator warning"> -<p><strong>Important</strong>: Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p> +<div class="warning"> +<p><strong>Attention :</strong> Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p> </div> <p>{{APIRef}}</p> -<h2 id="Summary" name="Summary">Sommaire</h2> - <p>Retourne une référence à l'objet du cache d'application pour la fenêtre.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>cache</var> = window.applicationCache </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>cache</code> est une référence objet pour un {{domxref("OfflineResourceList")}}.</li> </ul> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> diff --git a/files/fr/web/api/window/back/index.html b/files/fr/web/api/window/back/index.html index 653d5b9d61..9743d49f37 100644 --- a/files/fr/web/api/window/back/index.html +++ b/files/fr/web/api/window/back/index.html @@ -21,9 +21,9 @@ translation_of: Web/API/Window/back <p><strong>Note:</strong> Utilisez plutôt la méthode standard {{domxref("history.back")}}.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate">window.back();</pre> +<pre class="syntaxbox">window.back();</pre> <h3 id="Paramètres">Paramètres</h3> @@ -37,7 +37,7 @@ translation_of: Web/API/Window/back <p>Cet exemple simple gère un clic sur un bouton "Retour" en rappelant <code>back()</code>.</p> -<pre class="brush:js notranslate">function boutonRetour() { +<pre class="brush:js">function boutonRetour() { if (peutRevenirEnArriere) { window.back(); } diff --git a/files/fr/web/api/window/beforeprint_event/index.html b/files/fr/web/api/window/beforeprint_event/index.html index 0694a05c8a..b0e96ca975 100644 --- a/files/fr/web/api/window/beforeprint_event/index.html +++ b/files/fr/web/api/window/beforeprint_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/beforeprint <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">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;">Propagation</dt> @@ -71,5 +71,5 @@ original_slug: Web/Events/beforeprint <h2 id="Evénements_liés">Evénements liés</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li> + <li><a href="/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li> </ul> diff --git a/files/fr/web/api/window/beforeunload_event/index.html b/files/fr/web/api/window/beforeunload_event/index.html index 290525686e..249644f9e3 100644 --- a/files/fr/web/api/window/beforeunload_event/index.html +++ b/files/fr/web/api/window/beforeunload_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/beforeunload </div> <div class="warning"> -<p> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="https://developer.mozilla.org/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p> +<p><strong>Attention :</strong> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p> </div> <table class="properties"> @@ -102,7 +102,7 @@ window.addEventListener("beforeunload", function (event) { <p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p> -<p>Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans <a>about:config</a> pour faire de même. <span id="result_box" lang="fr"><span>Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement</span></span><span lang="fr"><span> que le document peut être déchargé.</span></span></p> +<p>Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.</p> <h2 id="Spécifications">Spécifications</h2> @@ -135,6 +135,6 @@ window.addEventListener("beforeunload", function (event) { <li>{{Event("readystatechange")}}</li> <li>{{Event("load")}}</li> <li>{{Event("unload")}}</li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></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> <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li> </ul> diff --git a/files/fr/web/api/window/blur/index.html b/files/fr/web/api/window/blur/index.html index f1fa3be67e..aaad6b9ec1 100644 --- a/files/fr/web/api/window/blur/index.html +++ b/files/fr/web/api/window/blur/index.html @@ -12,21 +12,21 @@ translation_of: Web/API/Window/blur <p>Éloigne la mise au point de la fenêtre.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><code>window.blur()</code></pre> +<pre class="syntaxbox"><code>window.blur()</code></pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush:js notranslate">window.blur();</pre> +<pre class="brush:js">window.blur();</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>La méthode window.blur () est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécification</th> diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html index d418ffb4fe..a0c27fc7eb 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.html +++ b/files/fr/web/api/window/cancelanimationframe/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/Window/cancelAnimationFrame <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox" id="window.cancelAnimationFramerequestID_Paramètres">window.cancelAnimationFrame(<em>requestID</em>);</pre> +<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);</pre> <h3 id="Paramètres">Paramètres</h3> diff --git a/files/fr/web/api/window/cancelidlecallback/index.html b/files/fr/web/api/window/cancelidlecallback/index.html index e3bc8b94fd..39c94deb9a 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.html +++ b/files/fr/web/api/window/cancelidlecallback/index.html @@ -5,22 +5,20 @@ translation_of: Web/API/Window/cancelIdleCallback --- <div>{{APIRef}}{{SeeCompatTable}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La méthode <strong><code>window.cancelIdleCallback()</code></strong> annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">window.cancelIdleCallback(<em>idleCallbackId</em>);</pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">idleCallbackId</font></dt> + <dt>idleCallbackId</dt> <dd>L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.</dd> </dl> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/window/captureevents/index.html b/files/fr/web/api/window/captureevents/index.html index 20774b49a8..cac350b130 100644 --- a/files/fr/web/api/window/captureevents/index.html +++ b/files/fr/web/api/window/captureevents/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/captureEvents <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">window.captureEvents(<em>eventType</em>) +<pre class="syntaxbox">window.captureEvents(<em>eventType</em>) </pre> <p><code>eventType</code> est une combinaison des valeurs suivantes: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p> <h2 id="Exemple">Exemple</h2> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html lang="fr"> <head> <!-- ... --> diff --git a/files/fr/web/api/window/clearimmediate/index.html b/files/fr/web/api/window/clearimmediate/index.html index 011e267239..886d10eb4f 100644 --- a/files/fr/web/api/window/clearimmediate/index.html +++ b/files/fr/web/api/window/clearimmediate/index.html @@ -12,20 +12,20 @@ translation_of: Web/API/Window/clearImmediate <p>Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.</p> -<div class="blockIndicator note"> -<p>Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p> +<div class="note"> +<p><strong>Note :</strong> Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>window</var>.clearImmediate( <var>immediateID</var> ) +<pre class="syntaxbox"><var>window</var>.clearImmediate( <var>immediateID</var> ) </pre> <p>où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.</p> <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">let immediateID = setImmediate(() => { +<pre class="brush: js">let immediateID = setImmediate(() => { // Exécute du code } @@ -47,9 +47,8 @@ document.getElementById("bouton") </thead> <tbody> <tr> - <td><a class="external" href="https://w3c.github.io/setImmediate/#si-setImmediate" hreflang="en" lang="en">Efficient Script Yielding<br> - <small lang="en-US">The definition of '<code>setImmediate</code>' in that specification.</small></a></td> - <td><span class="spec-ED">Editor's Draft</span></td> + <td><a href="https://w3c.github.io/setImmediate/#si-setImmediate">Efficient Script Yielding La définition de <code>setImmediate</code> dans cette spécification.</a></td> + <td>Editor's Draft</td> <td>Initial definition.</td> </tr> </tbody> diff --git a/files/fr/web/api/window/close/index.html b/files/fr/web/api/window/close/index.html index 7ed74d3242..b137990883 100644 --- a/files/fr/web/api/window/close/index.html +++ b/files/fr/web/api/window/close/index.html @@ -6,16 +6,16 @@ tags: translation_of: Web/API/Window/close --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Ferme la fenêtre référencée.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre>window.close(); </pre> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>Lorsque cette méthode est appelée, la fenêtre référencée est fermée.</p> <p>Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode <a href="fr/DOM/window.open">window.open</a>. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : <code>Scripts may not close windows that were not opened by script.</code></p> -<h4 id="Exemples" name="Exemples">Exemples</h4> -<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29" name="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec window.open()</h5> +<h4 id="Exemples">Exemples</h4> +<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec window.open()</h5> <pre><script type="text/javascript"> // Variable globale pour stocker une référence vers la fenêtre ouverte var fenetreOuverte; @@ -30,7 +30,7 @@ function fermerFenetreOuverte() } </script> </pre> -<h5 id="Fermeture_de_la_fen.C3.AAtre_courante" name="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5> +<h5 id="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5> <pre><script type="text/javascript"> function fermerFenetreCourante() { @@ -38,12 +38,9 @@ function fermerFenetreCourante() } </script> </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>DOM Level 0. <code>window.close()</code> ne fait partie d'aucune spécification ni recommandation technique du W3C.</p> -<h3 id="R.C3.A9f.C3.A9rence_additionnelle" name="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3> +<h3 id="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li> -</ul> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.close", "ja": "ja/DOM/window.close" } ) }}</p> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/closed/index.html b/files/fr/web/api/window/closed/index.html index 62038b80ae..e01f35054b 100644 --- a/files/fr/web/api/window/closed/index.html +++ b/files/fr/web/api/window/closed/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/API/Window/closed --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Cette propriété indique si la fenêtre référencée est fermée ou non.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre>isClosed = window.closed; </pre> <p>Cette propriété est en lecture seule.</p> -<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3> +<h3 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3> <dl> <dt> <code>isClosed</code></dt> @@ -23,8 +23,8 @@ translation_of: Web/API/Window/closed <li><code>false</code> : La fenêtre est ouverte.</li> <li><code>true</code> : La fenêtre a été fermée.</li> </ul> -<h3 id="Exemples" name="Exemples">Exemples</h3> -<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup" name="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4> +<h3 id="Exemples">Exemples</h3> +<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4> <p>L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.</p> <pre>if (!window.opener.closed) { // La fenêtre principale est encore là, @@ -32,7 +32,7 @@ translation_of: Web/API/Window/closed window.opener.location.href = newURL; } </pre> -<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment" name="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4> +<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4> <p>Dans cette exemple, la fonction <code>refreshPopupWindow()</code> appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.</p> <pre>var popupWindow = null; @@ -47,13 +47,9 @@ function refreshPopupWindow() { } } </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>DOM Level 0. <code>window.closed</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p> -<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire" name="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3> +<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3> <ul> - <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li> -</ul> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.closed", "ja": "ja/DOM/window.closed", "pl": "pl/DOM/window.closed" } ) }}</p> + <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/confirm/index.html b/files/fr/web/api/window/confirm/index.html index 099cfdaac8..2f49bf5c4c 100644 --- a/files/fr/web/api/window/confirm/index.html +++ b/files/fr/web/api/window/confirm/index.html @@ -8,11 +8,11 @@ translation_of: Web/API/Window/confirm --- <p>{{ApiRef("Window")}}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><em>resultat</em> = window.confirm(<em>message</em>); </pre> @@ -22,30 +22,26 @@ translation_of: Web/API/Window/confirm <li><code>resultat</code> est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (<code>true</code> signifie OK).</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval">if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) { window.open("fenetre.html", "Nouvelle fenêtre", ""); } </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> -<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> +<p>Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p> <p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> - <li><a href="/fr/docs/DOM/window.alert" title="Affiche un dialogue d'alerte contenant le texte spécifié.">alert</a></li> - <li><a href="/fr/docs/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li> -</ul> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/window.confirm", "ja": "ja/DOM/window.confirm" } ) }}</p> + <li><a href="/fr/docs/DOM/window.alert">alert</a></li> + <li><a href="/fr/docs/DOM/window.prompt">prompt</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/console/index.html b/files/fr/web/api/window/console/index.html index 6d0bc951dd..cbb2e643a9 100644 --- a/files/fr/web/api/window/console/index.html +++ b/files/fr/web/api/window/console/index.html @@ -14,12 +14,12 @@ translation_of: Web/API/Window/console <p>La propriété <strong><code>Window.console</code></strong> en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; </pre> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <h3 id="Afficher_dans_la_console">Afficher dans la console</h3> @@ -52,5 +52,5 @@ translation_of: Web/API/Window/console </table> <div class="note"> -<p>Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p> +<p><strong>Note :</strong> Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p> </div> diff --git a/files/fr/web/api/window/content/index.html b/files/fr/web/api/window/content/index.html index befde3636a..ef73a10622 100644 --- a/files/fr/web/api/window/content/index.html +++ b/files/fr/web/api/window/content/index.html @@ -6,24 +6,21 @@ tags: translation_of: Web/API/Window/content --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie un objet <a href="fr/DOM/window">Window</a> pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <code><browser></code> (ou <code>tabbrowser</code> ou <code><iframe></code>) avec l'attribut <code>type="content-primary"</code> défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, <code>browser.xul</code>. Dans de tels cas, <code>content</code> renvoie une référence à l'objet <code>Window</code> pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour <code><var>browserRef</var>.contentWindow</code>.</p> <p>Dans du contenu non privilégié (des pages Web), <code>content</code> est normalement équivalent à <a href="fr/DOM/window.top">top</a> (sauf dans le cas d'une page chargée dans un panneau latéral, où <code>content</code> se réfère à l'objet <code>Window</code> de l'onglet sélectionné).</p> <p>Certains exemples utilisent <code>_content</code> à la place de <code>content</code>. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser <code>content</code> dans du nouveau code.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var <var>windowObject</var> = window.content; </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <p>L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <code><browser type="content-primary"/></code> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :</p> <pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; </pre> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>Ne fait partie d'aucune spécification du W3C.</p> -<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<h3 id="Voir_aussi">Voir aussi</h3> <ul> <li><a href="fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome">Travailler avec des fenêtres dans le chrome</a></li> <li>Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux <a href="fr/XPCNativeWrapper">XPCNativeWrapper</a>.</li> -</ul> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.content", "ja": "ja/DOM/window.content", "pl": "pl/DOM/window.content" } ) }}</p> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/controllers/index.html b/files/fr/web/api/window/controllers/index.html index 1b91ba0937..9f96ce9c98 100644 --- a/files/fr/web/api/window/controllers/index.html +++ b/files/fr/web/api/window/controllers/index.html @@ -14,11 +14,9 @@ translation_of: Web/API/Window/controllers --- <div>{{APIRef}}{{non-standard_header}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Retourne les contrôleurs XUL de la fenêtre chrome.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>controleurs</var> = window.controllers </pre> @@ -27,20 +25,16 @@ translation_of: Web/API/Window/controllers <li><code>controleurs</code> est un objet de type <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a> (<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li> </ul> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>Spécifique à XUL. Ne fait pas partie de la spécification.</p> -<div class="note"> <p>Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.</p> <p>Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).</p> <p>Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.<br> Chaque suppression manquante peut provoquer le</p> -<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>: - -<pre class="bz_comment_text" id="comment_text_0">ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre> -</div> +<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>: -<p> </p> +<pre >ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre>
\ No newline at end of file diff --git a/files/fr/web/api/window/copy_event/index.html b/files/fr/web/api/window/copy_event/index.html index 013eed8155..bde3e7a47c 100644 --- a/files/fr/web/api/window/copy_event/index.html +++ b/files/fr/web/api/window/copy_event/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/Window/copy_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</span></p> +<p>L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</p> <table class="properties"> <tbody> @@ -41,7 +41,7 @@ translation_of: Web/API/Window/copy_event <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">window.addEventListener('copy', (event) => { +<pre class="brush: js">window.addEventListener('copy', (event) => { console.log('action de copie lancée') });</pre> diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html index e0180ddd65..7d7d57c203 100644 --- a/files/fr/web/api/window/customelements/index.html +++ b/files/fr/web/api/window/customelements/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/customElements <p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre>let registreElementsPersonnalises = window.customElements;</pre> @@ -23,7 +23,7 @@ translation_of: Web/API/Window/customElements <p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p> -<h2 id="Examples" name="Examples">Exemples</h2> +<h2 id="Examples">Exemples</h2> <p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p> @@ -46,7 +46,7 @@ registreElementsPersonnalises.define('mon-element-personnalise', MonElementPerso <p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/window/cut_event/index.html b/files/fr/web/api/window/cut_event/index.html index 259c67c79a..ad3a5de15d 100644 --- a/files/fr/web/api/window/cut_event/index.html +++ b/files/fr/web/api/window/cut_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/cut_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</span></p> +<p>L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</p> <table class="properties"> <tbody> @@ -40,7 +40,7 @@ translation_of: Web/API/Window/cut_event <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">window.addEventListener('cut', (event) => { +<pre class="brush: js">window.addEventListener('cut', (event) => { console.log('cut action initiated') });</pre> diff --git a/files/fr/web/api/window/defaultstatus/index.html b/files/fr/web/api/window/defaultstatus/index.html index 9a991ac4fb..125688eca6 100644 --- a/files/fr/web/api/window/defaultstatus/index.html +++ b/files/fr/web/api/window/defaultstatus/index.html @@ -18,23 +18,21 @@ translation_of: Web/API/Window/defaultStatus <p>{{ APIRef() }}</p> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Obtient / définit le texte de la barre d'état pour la fenêtre donnée.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval notranslate"><em>var sMsg</em> = window.defaultStatus; +<pre class="eval"><em>var sMsg</em> = window.defaultStatus; window.defaultStatus = <em>sMsg;</em> </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>sMsg</code> est une chaîne contenant le texte à afficher par défaut dans la barre d'état.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="notranslate"><html> <body onload="window.defaultStatus='salut!';"/> @@ -43,10 +41,10 @@ window.defaultStatus = <em>sMsg;</em> </html> </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <p>HTML5</p> diff --git a/files/fr/web/api/window/devicemotion_event/index.html b/files/fr/web/api/window/devicemotion_event/index.html index 3d4d2fd951..aa77418513 100644 --- a/files/fr/web/api/window/devicemotion_event/index.html +++ b/files/fr/web/api/window/devicemotion_event/index.html @@ -10,7 +10,7 @@ original_slug: FUEL/Window/devicemotion_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> @@ -35,43 +35,43 @@ original_slug: FUEL/Window/devicemotion_event </thead> <tbody> <tr> - <td><code>target</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/API/EventTarget" title="EventTarget est une interface implémentée par des objets qui peuvent recevoir des évènements et avoir des auditeurs."><code>EventTarget</code></a></td> + <td><code>target</code> Lecture seule </td> + <td><a href="/fr/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> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/API/DOMString" title="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."><code>DOMString</code></a></td> + <td><code>type</code> Lecture seule </td> + <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td> <td>The type of event.</td> </tr> <tr> - <td><code>bubbles</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td><code>bubbles</code> Lecture seule </td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td> <td>Whether the event normally bubbles or not</td> </tr> <tr> - <td><code>cancelable</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" title="L'objet Boolean est un objet permettant de représenter une valeur booléenne."><code>Boolean</code></a></td> + <td><code>cancelable</code> Lecture seule </td> + <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td> <td>Whether the event is cancellable or not?</td> </tr> <tr> - <td><code>acceleration</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td> + <td><code>acceleration</code> Lecture seule </td> + <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td> <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td> </tr> <tr> - <td><code>accelerationIncludingGravity </code><span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/API/DeviceAcceleration" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DeviceAcceleration</code></a></td> + <td><code>accelerationIncludingGravity </code>Lecture seule </td> + <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td> <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td> </tr> <tr> - <td><code>interval</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> + <td><code>interval</code> Lecture seule </td> <td>double</td> <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td> </tr> <tr> - <td><code>rotationRate</code> <span class="inlineIndicator readOnly readOnlyInline" title="Cette valeur ne peut pas être changée.">Lecture seule </span></td> - <td><a href="/fr/docs/Web/API/DeviceRotationRate" title="Un objet DeviceRotationRate fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes."><code>DeviceRotationRate</code></a></td> + <td><code>rotationRate</code> Lecture seule </td> + <td><a href="/fr/docs/Web/API/DeviceRotationRate"><code>DeviceRotationRate</code></a></td> <td>The rates of rotation of the device about all three axes.</td> </tr> </tbody> diff --git a/files/fr/web/api/window/devicepixelratio/index.html b/files/fr/web/api/window/devicepixelratio/index.html index 0b4750d74a..f7a9d3a7bf 100644 --- a/files/fr/web/api/window/devicepixelratio/index.html +++ b/files/fr/web/api/window/devicepixelratio/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/devicePixelRatio <p>Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em><var>valeur</var></em> = window.devicePixelRatio; </pre> diff --git a/files/fr/web/api/window/dialogarguments/index.html b/files/fr/web/api/window/dialogarguments/index.html index dd78944ac0..1bd4d4ece5 100644 --- a/files/fr/web/api/window/dialogarguments/index.html +++ b/files/fr/web/api/window/dialogarguments/index.html @@ -15,11 +15,11 @@ translation_of: Web/API/Window/dialogArguments --- <p>{{ deprecated_header() }}{{APIRef}}</p> -<p><span class="seoSummary">La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method.</span> Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p> +<p>La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>valeur</var> = window.dialogArguments;</pre> +<pre class="syntaxbox"><var>valeur</var> = window.dialogArguments;</pre> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/window/directories/index.html b/files/fr/web/api/window/directories/index.html index a4ea62e3a8..bac28b3489 100644 --- a/files/fr/web/api/window/directories/index.html +++ b/files/fr/web/api/window/directories/index.html @@ -18,20 +18,18 @@ translation_of: Web/API/Window/directories <p>{{ APIRef() }}</p> -<h3 id="Summary" name="Summary">Résumé</h3> - <p>Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.</p> -<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<h3 id="Syntax">Syntaxe</h3> -<pre class="javascript notranslate">var <var>dirBar</var> = window.directories; +<pre class="brush: js">var <var>dirBar</var> = window.directories; </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <p><var>dirBar</var> est un objet du type <code>BarProp</code>.</p> -<h3 id="Example" name="Example">Exemple</h3> +<h3 id="Example">Exemple</h3> <pre class="notranslate"><script> function dirs() { @@ -40,6 +38,6 @@ translation_of: Web/API/Window/directories </script> </pre> -<h3 id="Specification" name="Specification">Spécification</h3> +<h3 id="Specification">Spécification</h3> <p>Ne fait pas partie des spécifications.</p> diff --git a/files/fr/web/api/window/document/index.html b/files/fr/web/api/window/document/index.html index 1fc02df5ad..70769ed0b9 100644 --- a/files/fr/web/api/window/document/index.html +++ b/files/fr/web/api/window/document/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/Window/document --- <div>{{APIRef}}</div> -<p><span class="seoSummary"><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</span></p> +<p><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</p> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">console.log(window.document.title); +<pre class="brush: js">console.log(window.document.title); </pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/window/domcontentloaded_event/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html index d7c00d95b1..a2e989049d 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.html +++ b/files/fr/web/api/window/domcontentloaded_event/index.html @@ -31,19 +31,19 @@ original_slug: Web/Events/DOMContentLoaded <p>La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface <code>Window</code> pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}.</p> -<p>L’évènement <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p> +<p>L’évènement <a href="/fr/docs/Web/Events/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p> +<div class="note"> +<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p> </div> <h2 id="Accélérer">Accélérer</h2> -<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p> +<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/window/dump/index.html b/files/fr/web/api/window/dump/index.html index c1821d4daa..aa1ba730e6 100644 --- a/files/fr/web/api/window/dump/index.html +++ b/files/fr/web/api/window/dump/index.html @@ -8,19 +8,19 @@ tags: translation_of: Web/API/Window/dump --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Affiche des messages dans la console (native).</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">dump(<em>message</em>); </pre> <ul> <li><code>message</code> est le message texte à afficher.</li> </ul> -<h3 id="Notes" name="Notes">Notes</h3> -<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError" title="fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService" title="fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript" title="fr/Console_JavaScript">console JavaScript</a>.</p> -<p>Dans <a href="/fr/Gecko" title="fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a class="external" href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a class="external" href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p> +<h3 id="Notes">Notes</h3> +<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript">console JavaScript</a>.</p> +<p>Dans <a href="/fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p> <p>Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre <code>-console</code> à la ligne de commande.</p> -<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window" title="fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> <p>{{ languages( { "en": "en/DOM/window.dump", "ja": "ja/DOM/window.dump", "pl": "pl/DOM/window.dump" } ) }}</p> diff --git a/files/fr/web/api/window/event/index.html b/files/fr/web/api/window/event/index.html index 8697634ad7..9876f88745 100644 --- a/files/fr/web/api/window/event/index.html +++ b/files/fr/web/api/window/event/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/Window/event </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Window.event")}}</p> diff --git a/files/fr/web/api/window/find/index.html b/files/fr/web/api/window/find/index.html index 9ce279fc62..b9743102e6 100644 --- a/files/fr/web/api/window/find/index.html +++ b/files/fr/web/api/window/find/index.html @@ -23,7 +23,7 @@ translation_of: Web/API/Window/find <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>, +<pre class="syntaxbox"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>, <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);</pre> <dl> @@ -49,13 +49,13 @@ translation_of: Web/API/Window/find <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">findString = function findText(text) { +<pre class="brush: js">findString = function findText(text) { alert("String \x22" + text + "\x22 found? " + window.find(text)); }</pre> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Apples, Bananas, and Oranges.</p> +<pre class="brush: html"><p>Apples, Bananas, and Oranges.</p> <button type="button" onClick='findString("Apples")'>Search for Apples</button> <button type="button" onClick='findString("Banana")'>Search for Banana</button> <button type="button" onClick='findString("Orange")'>Search for Orange</button> @@ -71,7 +71,7 @@ translation_of: Web/API/Window/find <h2 id="Spécification">Spécification</h2> -<p id="comment_text_2">Cela ne fait partie d'aucune spécification.</p> +<p>Cela ne fait partie d'aucune spécification.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/window/focus/index.html b/files/fr/web/api/window/focus/index.html index 51d55e804a..b07ab44b65 100644 --- a/files/fr/web/api/window/focus/index.html +++ b/files/fr/web/api/window/focus/index.html @@ -14,14 +14,14 @@ translation_of: Web/API/Window/focus <pre class="eval">window.focus() </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="eval">if (clicked) { window.focus(); } </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> diff --git a/files/fr/web/api/window/frameelement/index.html b/files/fr/web/api/window/frameelement/index.html index 682e4852f0..4a36ff3fd6 100644 --- a/files/fr/web/api/window/frameelement/index.html +++ b/files/fr/web/api/window/frameelement/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/Window/frameElement --- <div>{{ApiRef}}</div> -<p><span class="seoSummary">La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</span></p> +<p>La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</p> <div class="note"> <p><strong>Note:</strong> Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.</p> @@ -19,7 +19,7 @@ translation_of: Web/API/Window/frameElement <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">const <em>frameEl</em> = window.frameElement +<pre class="syntaxbox">const <em>frameEl</em> = window.frameElement </pre> <h3 id="Valeur">Valeur</h3> @@ -28,7 +28,7 @@ translation_of: Web/API/Window/frameElement <h2 id="Exemple">Exemple</h2> -<pre class="brush:js notranslate">const frameEl = window.frameElement; +<pre class="brush:js">const frameEl = window.frameElement; // Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/' if (frameEl) { frameEl.src = 'http://mozilla.org/'; diff --git a/files/fr/web/api/window/frames/index.html b/files/fr/web/api/window/frames/index.html index 3823eba20d..1fd6a767fe 100644 --- a/files/fr/web/api/window/frames/index.html +++ b/files/fr/web/api/window/frames/index.html @@ -15,13 +15,9 @@ translation_of: Web/API/Window/frames --- <p>{{ApiRef("Window")}}</p> -<p> </p> - -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval"><em>frameList</em> = window.frames; </pre> @@ -29,11 +25,11 @@ translation_of: Web/API/Window/frames <ul> <li><code>frameList</code> est une liste d'objets frame, semblable à un tableau grâce à la propriété <code>length</code> . Ses éléments sont accessibles en utilisant la notation <code>{{ mediawiki.external('i') }}</code>.</li> <li><code>frameList === window</code> est évalué à <code>true</code>.</li> - <li>Chaque élément de window.frames est un pseudo tableau représentant l'objet <a class="internal" href="/en/DOM/window" title="en/DOM/window">window</a> correspondant au contenu de la <a class="internal" href="/en/HTML/Element/frame" title="en/HTML/Element/frame"><frame></a> ou <a class="internal" href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe"><iframe></a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li> - <li>pour plus de détails sur la valeur retournée, se référer au <a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1">fil de discussion sur mozilla.dev.platform</a>.</li> + <li>Chaque élément de window.frames est un pseudo tableau représentant l'objet <a href="/en/DOM/window">window</a> correspondant au contenu de la <a href="/en/HTML/Element/frame"><frame></a> ou <a href="/en/HTML/Element/iframe"><iframe></a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li> + <li>pour plus de détails sur la valeur retournée, se référer au <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1">fil de discussion sur mozilla.dev.platform</a>.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var frames = window.frames; // ou // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { @@ -42,8 +38,6 @@ for (var i = 0; i < frames.length; i++) { } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> - -<p id="comment_text_2">{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p> +<h2 id="Specification">Spécifications</h2> -<p> </p> +<p>{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/window/fullscreen/index.html b/files/fr/web/api/window/fullscreen/index.html index 32fe1cb9bb..dbd330f4f5 100644 --- a/files/fr/web/api/window/fullscreen/index.html +++ b/files/fr/web/api/window/fullscreen/index.html @@ -8,13 +8,13 @@ tags: translation_of: Web/API/Window/fullScreen --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen; </pre> <p>Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.</p> -<h3 id="Valeur_de_retour" name="Valeur_de_retour">Valeur de retour</h3> +<h3 id="Valeur_de_retour">Valeur de retour</h3> <dl> <dt> <code>isInFullScreen</code></dt> @@ -25,12 +25,8 @@ translation_of: Web/API/Window/fullScreen <li><code>true</code> : La fenêtre est en mode plein écran.</li> <li><code>false</code> : La fenêtre n'est pas en mode plein écran.</li> </ul> -<h3 id="Exemples" name="Exemples">Exemples</h3> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Exemples">Exemples</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> -<h3 id="Notes" name="Notes">Notes</h3> -<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p> -<p> </p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.fullScreen", "es": "es/DOM/window.fullScreen", "ja": "ja/DOM/window.fullScreen" } ) }}</p> +<h3 id="Notes">Notes</h3> +<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p>
\ No newline at end of file diff --git a/files/fr/web/api/window/gamepadconnected_event/index.html b/files/fr/web/api/window/gamepadconnected_event/index.html index 0f68232b6c..4452ac1892 100644 --- a/files/fr/web/api/window/gamepadconnected_event/index.html +++ b/files/fr/web/api/window/gamepadconnected_event/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Window/gamepadconnected_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</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;">Propagation</dt> @@ -76,7 +76,7 @@ window.addEventListener("gamepadconnected", function( event ) { <h2 id="Evénements_liés">Evénements liés</h2> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> + <li><a href="/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.html b/files/fr/web/api/window/gamepaddisconnected_event/index.html index f62baa963a..e4c36c1ece 100644 --- a/files/fr/web/api/window/gamepaddisconnected_event/index.html +++ b/files/fr/web/api/window/gamepaddisconnected_event/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/Window/gamepaddisconnected_event <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</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> @@ -64,7 +64,7 @@ translation_of: Web/API/Window/gamepaddisconnected_event <h2 id="Evénements_liés">Evénements liés</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> + <li><a href="/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/window/getcomputedstyle/index.html b/files/fr/web/api/window/getcomputedstyle/index.html index d6210f567c..3309f13543 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.html +++ b/files/fr/web/api/window/getcomputedstyle/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Window/getComputedStyle <h2 id="Résumé">Résumé</h2> -<p><code>La méthode window.getComputedStyle() </code>donne la <a href="/en/CSS/used_value" title="https://developer.mozilla.org/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p> +<p><code>La méthode window.getComputedStyle() </code>donne la <a href="/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -20,9 +20,11 @@ translation_of: Web/API/Window/getComputedStyle <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd> </dl> -<div class="note"><strong>Note:</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</div> +<div class="note"> + <p><strong>Note :</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</p> +</div> -<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p> +<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p> <h2 id="Exemple">Exemple</h2> @@ -55,21 +57,21 @@ var style = window.getComputedStyle(elem1, null); </script> </pre> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="function token">function dumpComputedStyles</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span> +<pre class="brush: js">function dumpComputedStyles(elem,prop) { - <span class="keyword token">var</span> cs <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span><span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>prop<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>prop<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">return</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="keyword token">var</span> len <span class="operator token">=</span> cs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span>i<span class="operator token"><</span>len<span class="punctuation token">;</span>i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + var cs = window.getComputedStyle(elem,null); + if (prop) { + console.log(prop+" : "+cs.getPropertyValue(prop)); + return; + } + var len = cs.length; + for (var i=0;i<len;i++) { - <span class="keyword token">var</span> style <span class="operator token">=</span> cs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>style<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>style<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> + var style = cs[i]; + console.log(style+" : "+cs.getPropertyValue(style)); + } -<span class="punctuation token">}</span></code></pre> +}</pre> <h2 id="Description">Description</h2> diff --git a/files/fr/web/api/window/getselection/index.html b/files/fr/web/api/window/getselection/index.html index 9e2bfde703..579af3f9a0 100644 --- a/files/fr/web/api/window/getselection/index.html +++ b/files/fr/web/api/window/getselection/index.html @@ -7,18 +7,18 @@ translation_of: Web/API/Window/getSelection <p>Renvoie un objet selection représentant le ou les objets sélectionnés.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="eval"><em>selection</em> = window.getSelection() </pre> -<h2 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h2> +<h2 id="Param.C3.A8tres">Paramètres</h2> <ul> <li><code>selection</code> est un objet de type {{DOMxRef("Selection")}}.</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="eval">function foo() { var selObj = window.getSelection(); @@ -28,20 +28,20 @@ translation_of: Web/API/Window/getSelection } </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p> +<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</p> -<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> +<h2 id="Sp.C3.A9cification">Spécification</h2> <p>DOM Level 0. Ne fait partie d'aucune spécification.</p> -<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2> +<h2 id="Voir_aussi">Voir aussi</h2> <ul> <li><a href="../Selection_API">Selection API</a></li> - <li><a href="../Selection" title="Un objet Sélection représente la plage de texte sélectionnée par l'utilisateur ou la position actuelle du signe d'insertion. Pour obtenir un objet Sélection pour examen ou modification, appelez Window.getSelection()"><code>Selection</code></a></li> - <li><a href="../Range" title="L'interface Range représente un fragment d'un document qui peut contenir des nœuds et des parties de nœuds texte."><code>Range</code></a></li> - <li><a href="../Document/getSelection" title="La propriété getSelection() de l'interface DocumentOrShadowRoot renvoie un objet Selection, représentant l'étendue du texte sélectionné par l'utilisateur, ou la position actuelle du curseur."><code>Document.getSelection()</code></a></li> - <li><a href="../HTMLInputElement/setSelectionRange" title="La méthode HTMLInputElementElement.setSelectionRange() définit les positions de début et de fin de la sélection de texte courante dans un élément <input&gt ;."><code>HTMLInputElement.setSelectionRange()</code></a></li> + <li><a href="../Selection"><code>Selection</code></a></li> + <li><a href="../Range"><code>Range</code></a></li> + <li><a href="../Document/getSelection"><code>Document.getSelection()</code></a></li> + <li><a href="../HTMLInputElement/setSelectionRange"><code>HTMLInputElement.setSelectionRange()</code></a></li> </ul> diff --git a/files/fr/web/api/window/history/index.html b/files/fr/web/api/window/history/index.html index 65ab9cfe4e..04b1a2052f 100644 --- a/files/fr/web/api/window/history/index.html +++ b/files/fr/web/api/window/history/index.html @@ -5,26 +5,26 @@ translation_of: Web/API/Window/history --- <div>{{APIRef}}</div> -<p>La propriété en lecture seule <strong style="font-family: 'Courier New','Andale Mono',monospace; line-height: inherit;">Window.history</strong> renvoie une référence à l'objet <span style="line-height: inherit;">{{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</span></p> +<p>La propriété en lecture seule <strong>Window.history</strong> renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</p> -<p>L'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> obtenu a les méthodes suivantes : voir </span><a href="/en/DOM/Manipulating_the_browser_history" style="line-height: inherit;" title="en/DOM/Manipulating the browser history">la manipulation de l'historique du navigateur</a><span style="line-height: inherit;"> pour avoir plus de détails ainsi que des exemples.<br> - En particulier, cet article explique les caractéristiques des méthodes </span><code style="font-size: 14px; line-height: inherit;">pushState()</code><span style="line-height: inherit;"> et </span><code style="font-size: 14px; line-height: inherit;">replaceState()</code><span style="line-height: inherit;">qu'il est utile de connaître avant de les utiliser.</span></p> +<p>L'objet <code>History</code> obtenu a les méthodes suivantes : voir <a href="/en/DOM/Manipulating_the_browser_history">la manipulation de l'historique du navigateur</a> pour avoir plus de détails ainsi que des exemples.<br> + En particulier, cet article explique les caractéristiques des méthodes <code>pushState()</code> et <code>replaceState()</code>qu'il est utile de connaître avant de les utiliser.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">history.back(); // similaire au bouton de retour history.go(-1); // similaire à history.back(); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;">, situé dans le menu déroulant près des boutons précédent et suivant.</span></p> +<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code>History</code>, situé dans le menu déroulant près des boutons précédent et suivant.</p> -<p><span style="line-height: inherit;">Pour des raisons de sécurité, l'objet </span><code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</span></p> +<p>Pour des raisons de sécurité, l'objet <code>History</code> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</p> -<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace" style="line-height: inherit; font-family: 'Courier New', 'Andale Mono', monospace;" title="en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p> +<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/window/home/index.html b/files/fr/web/api/window/home/index.html index 1d9985483e..856f95067c 100644 --- a/files/fr/web/api/window/home/index.html +++ b/files/fr/web/api/window/home/index.html @@ -17,12 +17,12 @@ translation_of: Web/API/Window/home <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>window</em>.home(); +<pre class="syntaxbox"><em>window</em>.home(); </pre> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">function goHome() { +<pre class="brush: js">function goHome() { window.home(); } </pre> diff --git a/files/fr/web/api/window/index.html b/files/fr/web/api/window/index.html index d36732a346..285b6d9f32 100644 --- a/files/fr/web/api/window/index.html +++ b/files/fr/web/api/window/index.html @@ -12,9 +12,9 @@ translation_of: Web/API/Window --- <p>{{APIRef}}</p> -<p><span class="seoSummary">L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre.</span> Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p> +<p>L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p> -<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model" title="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p> +<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p> <p>Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet <code>window</code> (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet <code>window</code> séparé — consultez <a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu">Travailler avec des fenêtres dans du code chrome</a> pour plus d'informations). C'est-à-dire que l'objet <code>window</code> n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet <code>window</code> appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.</p> @@ -36,7 +36,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> <dd>Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.</dd> <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt> - <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="https://developer.mozilla.org/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd> + <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd> <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> <dd>Retourne l'objet crypto du navigateur.</dd> <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> @@ -183,102 +183,55 @@ translation_of: Web/API/Window <dd>Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)</dd> </dl> -<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2> +<h2 id="M.C3.A9thodes">Méthodes</h2> <p><em>Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.</em></p> <dl> <dt>{{domxref("Window.alert()")}}</dt> <dd>Affiche une boîte de message d'alerte.</dd> -</dl> - -<p><span class="comment">base64 func <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=287112" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=287112</a> (see last comments) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=123003" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=123003</a> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsGlobalWindow.cpp#4946" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946</a></span></p> - -<dl> <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>Recule d'une page dans l'historique de la fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.blur()")}}</dt> <dd>Déplace la focalisation hors de la fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.</dd> <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.</dd> <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> <dd>Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.</dd> -</dl> - -<dl> <dt>{{domxref("Window.clearImmediate()")}}</dt> <dd>Annule l'exécution répétée définie en utilisant <code>setImmediate</code>.</dd> <dt>{{domxref("Window.close()")}}</dt> <dd>Ferme la fenêtre en cours.</dd> -</dl> - -<dl> <dt>{{domxref("Window.confirm()")}}</dt> <dd>Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.dispatchEvent()")}}</dt> <dd>Utilisé pour déclencher un évènement.</dd> <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> <dd>Écrit un message à la console.</dd> -</dl> - -<dl> <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<dl> <dt>{{domxref("Window.find()")}}</dt> <dd>Recherche la chaîne de caractères donnée dans une fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.focus()")}}</dt> <dd>Donne la focalisation à la fenêtre en cours.</dd> -</dl> - -<dl> <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>Avance la fenêtre d'un document dans l'historique.</dd> -</dl> - -<dl> <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>Fait flasher l'icône de l'application.</dd> -</dl> - -<dl> <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.getComputedStyle()")}}</dt> <dd>Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.</dd> -</dl> - -<dl> <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> <dd>Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.</dd> <dt>{{domxref("Window.getSelection()")}}</dt> <dd>Renvoie l'objet de sélection représentant les éléments sélectionnés.</dd> -</dl> - -<dl> <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>Renvoie le navigateur à la page d'accueil.</dd> -</dl> - -<dl> <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> <dd>Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.</dd> <dt>{{domxref("Window.maximize()")}}</dt> @@ -287,90 +240,42 @@ translation_of: Web/API/Window <dd>Minimize la fenêtre.</dd> <dt>{{domxref("Window.moveBy()")}}</dt> <dd>Déplace la fenêtre en cours de la quantité indiquée.</dd> -</dl> - -<dl> <dt>{{domxref("Window.moveTo()")}}</dt> <dd>Déplace la fenêtre vers les coordonnées spécifiées.</dd> -</dl> - -<dl> <dt>{{domxref("Window.open()")}}</dt> <dd>Ouvre une nouvelle fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>Ouvre une nouvelle fenêtre de dialogue.</dd> -</dl> - -<dl> <dt>{{domxref("Window.postMessage()")}}</dt> <dd>Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.</dd> -</dl> - -<dl> <dt>{{domxref("Window.prompt()")}}</dt> <dd>Ouvre la boîte de dialogue d'impression du document en cours.</dd> -</dl> - -<dl> <dt>{{domxref("Window.prompt()")}}</dt> <dd>Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.</dd> -</dl> - -<dl> <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> <dd>Annule la capture des évènements d'un certain type par la fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> <dd>Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.</dd> <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> <dd>Active la planification de tâches pendant les périodes d'inactivité du navigateur.</dd> -</dl> - -<dl> <dt>{{domxref("Window.resizeBy()")}}</dt> <dd>Redimensionne la fenêtre en cours d'une certaine quantité.</dd> -</dl> - -<dl> <dt>{{domxref("Window.resizeTo()")}}</dt> <dd>Redimensionne dynamiquement la fenêtre.</dd> -</dl> - -<dl> <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.scroll()")}}</dt> <dd>Fait défiler la fenêtre à un endroit particulier dans le document.</dd> -</dl> - -<dl> <dt>{{domxref("Window.scrollBy()")}}</dt> <dd>Fait défiler le document dans la fenêtre de la quantité indiquée.</dd> -</dl> - -<dl> <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> <dd>Fait défiler le document du nombre de lignes indiqué.</dd> -</dl> - -<dl> <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> <dd>Fait défiler le document en cours du nombre de pages indiqué.</dd> -</dl> - -<dl> <dt>{{domxref("Window.scrollTo()")}}</dt> <dd>Fait défiler à un jeu de coordonnées particulier dans le document.</dd> -</dl> - -<dl> <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> <dd>Change le curseur pour la fenêtre en cours.</dd> <dt>{{domxref("Window.setImmediate()")}}</dt> @@ -379,19 +284,15 @@ translation_of: Web/API/Window <dd>Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.</dd> <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> <dd>Dimensionne la fenêtre en fonction de son contenu.</dd> -</dl> - -<dl> <dt>{{domxref("Window.stop()")}}</dt> <dd>Cette méthode arrête le chargement de la fenêtre.</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd> </dl> +<h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3> + <dl> - <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> - <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd> - <dt> - <h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3> - </dt> <dt>{{domxref("EventTarget.addEventListener()")}}</dt> <dd>Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> @@ -412,14 +313,16 @@ translation_of: Web/API/Window <dd>Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.</dd> <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd> - <dt> - <h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> - </dt> +</dl> + +<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> + +<dl> <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> <dd>Affiche un dialogue modal. <strong>Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55</strong>.</dd> </dl> -<h2 id=".C3.89v.C3.A8nements" name=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2> +<h2 id=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2> <p>Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.</p> @@ -631,7 +534,7 @@ translation_of: Web/API/Window <h2 id="Constructeurs">Constructeurs</h2> -<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p> +<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p> <dl> <dt>{{domxref("DOMParser")}}</dt> @@ -647,7 +550,7 @@ translation_of: Web/API/Window <dt>{{domxref("Window.XMLSerializer")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> <dd>{{todo("NeedsContents")}}</dd> <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> diff --git a/files/fr/web/api/window/innerheight/index.html b/files/fr/web/api/window/innerheight/index.html index adbf3d97bf..19e63c1f54 100644 --- a/files/fr/web/api/window/innerheight/index.html +++ b/files/fr/web/api/window/innerheight/index.html @@ -12,32 +12,31 @@ translation_of: Web/API/Window/innerHeight --- <p>{{ ApiRef() }}</p> -<p id="R.C3.A9sum.C3.A9">Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p> +<p>Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p> <div class="note"> <p><strong>Note :</strong> La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.</p> </div> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre>var hauteur = window.innerHeight; </pre> -<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur</h3> +<h3 id="Valeur_renvoy.C3.A9e">Valeur</h3> -<p class="syntaxbox">Renvoie la hauteur de la partie visible de la fenêtre de navigation.<br> - La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p> +<p>Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p> -<h2 class="syntaxbox" id="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <ul> <li>La propriété <code>window.innerHeight</code> est supportée par tout objet assimilé à une fenêtre <em>{{domxref("window")}}</em>, un cadre <em>frame </em>, un ensemble de cadres <em>frameset</em>, ou une fenêtre secondaire.</li> <li>Il existe un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">algorithme</a> pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.</li> </ul> -<h2 id="Attention" name="Attention">Exemples</h2> +<h2 id="Attention">Exemples</h2> -<h3 id="Code" name="Code">Sur un <em>frameset</em></h3> +<h3 id="Code">Sur un <em>frameset</em></h3> <pre class="brush:js">var intFrameHeight = window.innerHeight; // ou @@ -60,8 +59,9 @@ var intOuterFramesetHeight = top.innerHeight; <h3 id="Exemple_graphique">Exemple graphique</h3> -<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.<br> - <img alt="outerHeight vs innerHeight" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" style="height: 445px; width: 738px;"></p> +<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p> + +<p><img alt="Illustration de la différence entre innerHeight et outerHeight" src="firefoxinnervsouterheight2.png"></p> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/window/innerwidth/index.html b/files/fr/web/api/window/innerwidth/index.html index f317384ca2..a76af5343a 100644 --- a/files/fr/web/api/window/innerwidth/index.html +++ b/files/fr/web/api/window/innerwidth/index.html @@ -5,19 +5,19 @@ translation_of: Web/API/Window/innerWidth --- <p>{{ ApiRef() }}</p> -<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> +<h2 id="R.C3.A9sum.C3.A9">Résumé</h2> <p>Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.<br> Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre>var largeur = window.innerWidth; </pre> <p>Voir aussi : <a href="/fr/docs/Web/API/Window/innerHeight">window.innerHeight</a>, <a href="/fr/docs/Web/API/Window/outerHeight">window.outerHeight</a> and <a href="/fr/docs/Web/API/Window/outerWidth">window.outerWidth</a>.</p> -<h2 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2> +<h2 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2> <dl> <dt><code>innerWidth </code></dt> diff --git a/files/fr/web/api/window/issecurecontext/index.html b/files/fr/web/api/window/issecurecontext/index.html index 8009462d92..dd6a2dbbc3 100644 --- a/files/fr/web/api/window/issecurecontext/index.html +++ b/files/fr/web/api/window/issecurecontext/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/isSecureContext <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <em>isSecure</em> = window.isSecureContext</pre> +<pre class="syntaxbox">var <em>isSecure</em> = window.isSecureContext</pre> <h2 id="Exemples">Exemples</h2> @@ -23,7 +23,7 @@ translation_of: Web/API/Window/isSecureContext <p>Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen <code>isSecureContext</code> qui est exposé sur la portée globale.</p> -<pre class="brush: js notranslate">if (window.isSecureContext) { +<pre class="brush: js">if (window.isSecureContext) { // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles navigator.serviceWorker.register("/offline-worker.js").then(function () { ... diff --git a/files/fr/web/api/window/languagechange_event/index.html b/files/fr/web/api/window/languagechange_event/index.html index eadf83df3c..a55d83a36d 100644 --- a/files/fr/web/api/window/languagechange_event/index.html +++ b/files/fr/web/api/window/languagechange_event/index.html @@ -38,13 +38,13 @@ translation_of: Web/API/Window/languagechange_event <p>Vous pouvez utiliser l'événement <code>languagechange</code> dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :</p> -<pre class="brush: js notranslate">window.addEventListener('languagechange', function() { +<pre class="brush: js">window.addEventListener('languagechange', function() { console.log('languagechange event detected!'); });</pre> <p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> :</p> -<pre class="brush: js notranslate">window.onlanguagechange = function(event) { +<pre class="brush: js">window.onlanguagechange = function(event) { console.log('languagechange event detected!'); };</pre> diff --git a/files/fr/web/api/window/length/index.html b/files/fr/web/api/window/length/index.html index 2980798007..af1ee54111 100644 --- a/files/fr/web/api/window/length/index.html +++ b/files/fr/web/api/window/length/index.html @@ -5,11 +5,9 @@ translation_of: Web/API/Window/length --- <div>{{ ApiRef() }}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>nombreDeFrames</em>= window.length; </pre> @@ -18,12 +16,12 @@ translation_of: Web/API/Window/length <li><em>nombreDeFrames est égal au nombre de frames présent sur la page.</em></li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">if (window.length) { // La page contient des frames }</pre> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <p>{{DOM0}}</p> diff --git a/files/fr/web/api/window/load_event/index.html b/files/fr/web/api/window/load_event/index.html index ee798a29e4..d418a89a96 100644 --- a/files/fr/web/api/window/load_event/index.html +++ b/files/fr/web/api/window/load_event/index.html @@ -13,7 +13,7 @@ original_slug: Web/Events/load <dl> <dt>Spécification</dt> - <dd><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> <dt>Interface</dt> <dd>UIEvent</dd> <dt>Bouillonne</dt> diff --git a/files/fr/web/api/window/localstorage/index.html b/files/fr/web/api/window/localstorage/index.html index 71c5f6fbec..3385e051fb 100644 --- a/files/fr/web/api/window/localstorage/index.html +++ b/files/fr/web/api/window/localstorage/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/Window/localStorage <p>Il convient de noter que les données stockées dans <code>localStorage</code> ou <code>sessionStorage</code> <strong>sont spécifiques au protocole de la page.</strong></p> -<p>Les clés et les valeurs <strong>sont toujours</strong> <u>des chaînes de caractères</u> (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p> +<p>Les clés et les valeurs <strong>sont toujours</strong> des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -57,7 +57,7 @@ localStorage.clear(); </pre> <div class="note"> -<p><strong>Note</strong>: Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p> +<p><strong>Note :</strong> Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/window/locationbar/index.html b/files/fr/web/api/window/locationbar/index.html index 9ba0cefa63..294652fb88 100644 --- a/files/fr/web/api/window/locationbar/index.html +++ b/files/fr/web/api/window/locationbar/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/locationbar <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>objRef</var> = window.locationbar +<pre class="syntaxbox"><var>objRef</var> = window.locationbar </pre> <h2 id="Exemple">Exemple</h2> <p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>locationbar</code> est utilisée.</p> -<pre class="brush:html notranslate"><!DOCTYPE html> +<pre class="brush:html"><!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> diff --git a/files/fr/web/api/window/matchmedia/index.html b/files/fr/web/api/window/matchmedia/index.html index ecc1644b62..77fea4b292 100644 --- a/files/fr/web/api/window/matchmedia/index.html +++ b/files/fr/web/api/window/matchmedia/index.html @@ -3,21 +3,20 @@ title: window.matchMedia slug: Web/API/Window/matchMedia translation_of: Web/API/Window/matchMedia --- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> -<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> spécifiée.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<div>{{ApiRef}}</div> + +<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries">media query</a> spécifiée.</p> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre> <p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) { /* the view port is at least 400 pixels wide */ } else { /* the view port is less than 400 pixels wide */ }</pre> <p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p> -<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p> +<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p> <h2 id="Specifications">Spécifications</h2> @@ -45,8 +44,8 @@ translation_of: Web/API/Window/matchMedia <h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> - <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li> + <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> + <li><a href="/en-US/docs/DOM/Using_media_queries_from_code">Using media queries from code</a></li> <li>{{domxref("MediaQueryList")}}</li> <li>{{domxref("MediaQueryListListener")}}</li> </ul> diff --git a/files/fr/web/api/window/menubar/index.html b/files/fr/web/api/window/menubar/index.html index 21204f7405..6e5fc9371d 100644 --- a/files/fr/web/api/window/menubar/index.html +++ b/files/fr/web/api/window/menubar/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/menubar <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>objRef</em> = <em>window</em>.menubar +<pre class="syntaxbox"><em>objRef</em> = <em>window</em>.menubar </pre> <h2 id="Exemple">Exemple</h2> <p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>menubar</code> est utilisée.</p> -<pre class="brush:html notranslate"><html> +<pre class="brush:html"><html> <head> <title>Divers Tests DOM</title> <script> diff --git a/files/fr/web/api/window/message_event/index.html b/files/fr/web/api/window/message_event/index.html index afa06c25b7..7122fbb2d9 100644 --- a/files/fr/web/api/window/message_event/index.html +++ b/files/fr/web/api/window/message_event/index.html @@ -33,9 +33,9 @@ translation_of: Web/API/Window/message_event <h2 id="Exemples">Exemples</h2> -<p><span class="tlid-translation translation" lang="fr"><span title="">Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre </span></span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, en utilisant un code comme celui-ci:</p> +<p>Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, en utilisant un code comme celui-ci:</p> -<pre class="brush: js notranslate">const targetFrame = window.top.frames[1]; +<pre class="brush: js">const targetFrame = window.top.frames[1]; const targetOrigin = 'https://exemple.org'; const windowMessageButton = document.querySelector('#window-message'); @@ -45,13 +45,13 @@ windowMessageButton.addEventListener('click', () => { <p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p> -<pre class="brush: js notranslate">window.addEventListener('message', (event) => { +<pre class="brush: js">window.addEventListener('message', (event) => { console.log(`Message reçu: ${event.data}`); });</pre> <p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p> -<pre class="brush: js notranslate">window.onmessage = (event) => { +<pre class="brush: js">window.onmessage = (event) => { console.log(`Message reçu: ${event.data}`); };</pre> diff --git a/files/fr/web/api/window/messageerror_event/index.html b/files/fr/web/api/window/messageerror_event/index.html index cc321adbb9..0f63b05e44 100644 --- a/files/fr/web/api/window/messageerror_event/index.html +++ b/files/fr/web/api/window/messageerror_event/index.html @@ -38,13 +38,13 @@ translation_of: Web/API/Window/messageerror_event <p>Écoutez <code>messageerror</code> en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :</p> -<pre class="brush: js notranslate">window.addEventListener('messageerror', (event) => { +<pre class="brush: js">window.addEventListener('messageerror', (event) => { console.error(event); });</pre> <p>Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :</p> -<pre class="brush: js notranslate">window.onmessageerror = (event) => { +<pre class="brush: js">window.onmessageerror = (event) => { console.error(event); };</pre> diff --git a/files/fr/web/api/window/mozanimationstarttime/index.html b/files/fr/web/api/window/mozanimationstarttime/index.html index d58bd9eabe..cd98cffd8b 100644 --- a/files/fr/web/api/window/mozanimationstarttime/index.html +++ b/files/fr/web/api/window/mozanimationstarttime/index.html @@ -12,16 +12,16 @@ translation_of: Web/API/Window/mozAnimationStartTime --- <p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}</p> -<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" title="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> +<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> <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="eval notranslate"><em>time</em> = window.mozAnimationStartTime; +<pre class="eval"><em>time</em> = window.mozAnimationStartTime; </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <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> diff --git a/files/fr/web/api/window/mozinnerscreenx/index.html b/files/fr/web/api/window/mozinnerscreenx/index.html index 255235e7b9..3cce6881b6 100644 --- a/files/fr/web/api/window/mozinnerscreenx/index.html +++ b/files/fr/web/api/window/mozinnerscreenx/index.html @@ -16,11 +16,13 @@ translation_of: Web/API/Window/mozInnerScreenX <p>Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p> -<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. <span class="tlid-translation translation" lang="fr"><span title="">Cela signifie qu'il peut être affecté par le niveau de zoom</span></span>; <span class="tlid-translation translation" lang="fr"><span title="">pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété</span></span><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>screenX</var> = window.mozInnerScreenX;</pre> +<pre class="syntaxbox"><var>screenX</var> = window.mozInnerScreenX;</pre> <h3 id="Valeur">Valeur</h3> diff --git a/files/fr/web/api/window/mozinnerscreeny/index.html b/files/fr/web/api/window/mozinnerscreeny/index.html index 3a8163382d..2b9ebd8564 100644 --- a/files/fr/web/api/window/mozinnerscreeny/index.html +++ b/files/fr/web/api/window/mozinnerscreeny/index.html @@ -16,17 +16,19 @@ translation_of: Web/API/Window/mozInnerScreenY <p>Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p> -<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div> +<div class="note"> + <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>screenY</var> = window.mozInnerScreenY;</pre> +<pre class="syntaxbox"><var>screenY</var> = window.mozInnerScreenY;</pre> <h3 id="Valeur">Valeur</h3> <ul> <li><var>screenY</var> stocke la valeur de la propriété <code>window.mozInnerScreenY</code>.</li> - <li>La propriété <code>window.mozInnerScreenY</code> <span class="tlid-translation translation" lang="fr"><span title="">est une valeur en lecture seule à virgule flottante;</span> <span title="">il n'a pas de valeur par défaut.</span></span></li> + <li>La propriété <code>window.mozInnerScreenY</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li> </ul> <h2 id="Spécification">Spécification</h2> diff --git a/files/fr/web/api/window/mozpaintcount/index.html b/files/fr/web/api/window/mozpaintcount/index.html index 288e5ecfe1..a6f3d9eb7c 100644 --- a/files/fr/web/api/window/mozpaintcount/index.html +++ b/files/fr/web/api/window/mozpaintcount/index.html @@ -17,18 +17,18 @@ translation_of: Web/API/Window/mozPaintCount <p>Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre> +<pre class="syntaxbox"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre> <ul> <li><code><em>paintCount</em></code> stocke la valeur de la propriété <code>window.mozPaintCount</code>.</li> - <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro <span class="tlid-translation translation" lang="fr"><span title="">lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</span></span></li> + <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</li> </ul> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p>Ne fait partie d'aucune spécification ou recommandation du <abbr title="World Wide Web Consortium">W3C</abbr>.</p> +<p>Ne fait partie d'aucune spécification ou recommandation du <abbr>W3C</abbr>.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/api/window/offline_event/index.html b/files/fr/web/api/window/offline_event/index.html index a038b1ea4a..fa7752a90c 100644 --- a/files/fr/web/api/window/offline_event/index.html +++ b/files/fr/web/api/window/offline_event/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/Window/offline_event <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">//version addEventListener +<pre class="brush: js">//version addEventListener window.addEventListener('offline', (event) => { console.log("La Connexion au réseau est perdu."); }); @@ -47,7 +47,7 @@ window.onoffline = (event) => { }; </pre> -<h2 class="brush: js" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/window/online_event/index.html b/files/fr/web/api/window/online_event/index.html index 0dd968c064..c2c93916c8 100644 --- a/files/fr/web/api/window/online_event/index.html +++ b/files/fr/web/api/window/online_event/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/Window/online_event <p>L'événement <strong><code>online</code></strong> de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à <code>true</code>.</p> -<div class="note"><strong>Note:</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</div> +<div class="note"> + <p><strong>Note :</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</p> +</div> <table class="properties"> <tbody> @@ -36,13 +38,9 @@ translation_of: Web/API/Window/online_event </tbody> </table> -<dl> - <dt style="float: left; text-align: right; width: 120px;"></dt> -</dl> - <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">// addEventListener version +<pre class="brush: js">// addEventListener version window.addEventListener('online', (event) => { console.log("Vous êtes maintenant connecté au réseau."); }); @@ -53,7 +51,7 @@ window.ononline = (event) => { }; </pre> -<h2 class="brush: js" id="Spécifications">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> <table class="standard-table"> <tbody> diff --git a/files/fr/web/api/window/onpaint/index.html b/files/fr/web/api/window/onpaint/index.html index 351683ba0c..d7ae9b979d 100644 --- a/files/fr/web/api/window/onpaint/index.html +++ b/files/fr/web/api/window/onpaint/index.html @@ -13,13 +13,13 @@ translation_of: Web/API/Window/onpaint <p><code><strong>Window.onpaint</strong></code> est un gestionnaire d'événements pour l'événement <code>paint</code> sur la fenêtre.</p> -<div class="blockIndicator warning"> -<p>Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p> +<div class="warning"> +<p><strong>Attention :</strong> Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p> </div> <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">window.onpaint = <em>funcRef</em>; +<pre class="syntaxbox">window.onpaint = <em>funcRef</em>; </pre> <ul> diff --git a/files/fr/web/api/window/open/index.html b/files/fr/web/api/window/open/index.html index d4fced2fa8..863f61a1a9 100644 --- a/files/fr/web/api/window/open/index.html +++ b/files/fr/web/api/window/open/index.html @@ -8,67 +8,58 @@ translation_of: Web/API/Window/open --- <p>{{ ApiRef() }}</p> -<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3> +<h3 id="D.C3.A9finition">Définition</h3> <p>Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> -<pre class="syntaxbox language-html"><code class="language-html">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</code></pre> +<pre class="brush: js">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</pre> -<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres" name="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3> +<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3> <dl> <dt><code>WindowObjectReference</code></dt> - <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd> -</dl> - -<dl> + <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd> <dt><code>strUrl</code></dt> <dd>Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. <var>strUrl</var> peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.</dd> -</dl> - -<dl> <dt><code>strWindowName</code></dt> - <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code style="font-size: 1em;"><a></code> ou d'un élément <code style="font-size: 1em;"><form></code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd> -</dl> - -<dl> + <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code><a></code> ou d'un élément <code><form></code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd> <dt><code>strWindowFeatures</code></dt> <dd>Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.</dd> </dl> -<h3 id="Description" name="Description">Description</h3> +<h3 id="Description">Description</h3> <p>La méthode <code>open()</code> crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre <var>strUrl</var> spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si <var>strUrl</var> est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL <code>about:blank</code> sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.</p> <p>Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à <code>window.open()</code> se termine et renvoie sa valeur, la fenêtre contient toujours <code>about:blank</code>. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.</p> -<h4 id="Exemples" name="Exemples">Exemples</h4> +<h4 id="Exemples">Exemples</h4> -<pre class="brush:js language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span> -<span class="keyword token">var</span> strWindowFeatures <span class="operator token">=</span> <span class="string token">"menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"</span><span class="punctuation token">;</span> +<pre class="brush:js">var windowObjectReference; +var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; -<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"http://www.cnn.com/"</span><span class="punctuation token">,</span> <span class="string token">"CNN_WindowName"</span><span class="punctuation token">,</span> strWindowFeatures<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +function openRequestedPopup() { + windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures); +}</pre> -<pre class="brush:js language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span> +<pre class="brush:js">var windowObjectReference; -<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span> - <span class="string token">"http://www.domainname.ext/path/ImageFile.png"</span><span class="punctuation token">,</span> - <span class="string token">"DescriptiveWindowName"</span><span class="punctuation token">,</span> - <span class="string token">"resizable,scrollbars,status"</span> - <span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +function openRequestedPopup() { + windowObjectReference = window.open( + "http://www.domainname.ext/path/ImageFile.png", + "DescriptiveWindowName", + "resizable,scrollbars,status" + ); +}</pre> <p>Si une fenêtre du nom <var>strWindowName</var> existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, <var>strUrl</var> est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et <var>strWindowFeatures</var> est ignorée. Fournir une chaîne vide pour <var>strUrl</var> est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de <code>window.open()</code>, il faut utiliser la nom réservé <var>_blank</var> pour <var>strWindowName</var>.</p> <div class="note"> -<p><strong>Note à propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine </strong>: Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte. Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et<code> window.open('',<name>,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p> +<p><strong>Note :</strong> À propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte. Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et<code> window.open('',<name>,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p> </div> <p><var>strWindowFeatures</var> est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si <var>strWindowName</var> ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre <var>strWindowFeatures</var> (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.</p> @@ -80,247 +71,103 @@ translation_of: Web/API/Window/open <p><strong>Si le paramètre <var>strWindowFeatures</var> est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées</strong> (à l'exception de <var>titlebar</var> et <var>close</var> qui sont par défaut à <var>yes</var>).</p> <div class="note"> -<p><strong>Astuce</strong> : Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p> +<p><strong>Note :</strong> Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p> </div> -<p style="border: 1px dotted green;"><img alt="Illustration des barres d'outils du chrome de Firefox" class="internal" src="/@api/deki/files/1286/=FirefoxChromeToolbarsDescription7a.png"></p> - -<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille" name="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4> +<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4> <p><a href="#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</a></p> -<div class="bug">{{bug(176320) }}</div> +<p>{{bug(176320) }}</p> <p><a href="#Note_sur_les_priorit.C3.A9s">Note sur les priorités</a></p> <dl> - <dt>left </dt> - <dd><span id="left">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> - <dd>Reconnu par : , , , , ,</dd> -</dl> - -<dl> - <dt>top </dt> - <dd><span id="topS">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> - <dd>Reconnu par : , , , , ,</dd> -</dl> - -<dl> - <dt>height </dt> - <dd><span id="height">Spécifie la hauteur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> - <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height (ou innerHeight)</a></dd> - <dd>Reconnu par : , , , , ,</dd> -</dl> - -<dl> - <dt>width </dt> - <dd><span id="width">Spécifie la largeur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> - <dd>Reconnu par : , , , , ,</dd> -</dl> - -<dl> - <dt>screenX </dt> - <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#left">left</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>screenY </dt> - <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#topS">top</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>outerHeight </dt> - <dd>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</dd> - <dd><strong>Note</strong> : étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</dd> - <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>outerWidth </dt> + <dt>left</dt> + <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> + <dt>top</dt> + <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd> + <dt>height</dt> + <dd>Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> + <dt>width</dt> + <dd>Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> + <dt>screenX</dt> + <dd>Mozilla.</dd> + <dt>screenY</dt> + <dd>Mozilla.</dd> + <dt>outerHeight</dt> + <dd><p>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</p> + <div class="note"><p><strong>Note :</strong> étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</p></div></dd> + <dt>outerWidth</dt> <dd>Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>innerHeight </dt> - <dd>Similaire à <a href="#height">height</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> - <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>innerWidth </dt> - <dd>Similaire à <a href="#width">width</a> , mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome" name="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4> - -<dl> - <dt>menubar </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus.</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , , ,</dd> -</dl> - -<dl> - <dt>toolbar </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente.</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , , ,</dd> -</dl> - -<dl> - <dt>location </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a class="external" href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>.</dd> - <dd>Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox :</dd> - <dd> - <div class="bug">{{bug(337344) }}</div> - </dd> -</dl> - -<dl> - <dd>Reconnu par : , , , , ,</dd> + <dt>innerHeight</dt> + <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd> + <dt>innerWidth</dt> + <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd> </dl> -<dl> - <dt>directories </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente.</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , , ,</dd> -</dl> +<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4> <dl> - <dt>personalbar </dt> + <dt>menubar</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> + <dt>toolbar</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> + <dt>location</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>. Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}</p></dd> + <dt>directories</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> + <dt>personalbar</dt> <dd>Similaire à <var>directories</var>, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>status </dt> + <dt>status</dt> <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (<a href="#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur la barre d'état avec XP SP2</a>) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.</dd> - <dd><a href="#Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</a></dd> - <dd>Reconnu par : , , , ,</dd> </dl> -<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre" name="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4> +<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4> <dl> - <dt>resizable </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable.</dd> - <dd><strong>Note</strong> : à partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état.</dd> - <dd>Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</dd> -</dl> - + <dt>resizable</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</p> <div class="note"> -<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> +<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> </div> - -<dl> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , , ,</dd> -</dl> - -<dl> - <dt>scrollbars </dt> - <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</dd> -</dl> - + <p>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p> +</dd> + <dt>scrollbars</dt> + <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</p> <div class="note"> -<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> +<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p> </div> - -<dl> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd><a href="#Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</a></dd> - <dd>Reconnu par : , , , ,</dd> -</dl> - -<dl> - <dt>dependent </dt> - <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente.</dd> - <dd>Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée.</dd> - <dd>La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }})</dd> - <dd>Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>modal </dt> - <dd><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>.</dd> - <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>.</dd> - <dd>Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla.</dd> - <dd>L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>dialog </dt> - <dd>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em> .</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>minimizable </dt> - <dd>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</dd> - <dd>Reconnu par : , , ,</dd> +<p>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> + <dt>dependent</dt> + <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd> + <dt>modal</dt> + <dd><p><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>. Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>. Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</p></dd> + <dt>dialog</dt> + <dd><p>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em>.</p></dd> + <dt>minimizable</dt> + <dd><p>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</p></dd> + <dt>fullscreen</dt> + <dd><p>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. <code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. <code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</p></dd> </dl> -<dl> - <dt>fullscreen </dt> - <dd>À ne pas utiliser. N'est pas reconnu par Mozilla, et il n'existe aucun plan prévoyant de le faire fonctionner dans Mozilla.</dd> - <dd>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x.</dd> - <dd><code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur.</dd> - <dd><a href="#Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur fullscreen</a></dd> - <dd>Reconnu par :</dd> - <dd><code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</dd> -</dl> - -<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges" name="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4> +<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4> <p>Les fonctionnalités suivantes nécessitent le privilège <code>UniversalBrowserWrite</code>, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le <a href="fr/PrivilegeManager">PrivilegeManager</a>.</p> <dl> - <dt>chrome </dt> - <dd><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée.</dd> - <dd>Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>titlebar </dt> - <dd>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire.</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>alwaysRaised </dt> + <dt>chrome</dt> + <dd><p><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</p></dd> + <dt>titlebar</dt> + <dd><p>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> + <dt>alwaysRaised</dt> <dd>Si défini à <var>yes</var>, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>alwaysLowered </dt> - <dd>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</dd> - <dd>Reconnu par : , , ,</dd> -</dl> - -<dl> - <dt>z-lock </dt> + <dt>alwaysLowered</dt> + <dd><p>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</p></dd> + <dt>z-lock</dt> <dd>Identique à <code>alwaysLowered</code>.</dd> -</dl> - -<dl> - <dt>close </dt> - <dd>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.</dd> - <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> - <dd>Reconnu par : , , ,</dd> + <dt>close</dt> + <dd><p>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd> </dl> <p>Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de <var>yes</var> (oui) ou <var>no</var> (non) ; il est également possible d'utiliser <var>1</var> à la place de <var>yes</var> et <var>0</var> à la place de <var>no</var>. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne <var>strWindowFeatures</var>. Si vous fournissez le paramètre <var>strWindowFeatures</var>, les fonctionnalités <code>titlebar</code> et <code>close</code> sont toujours à <var>yes</var> par défaut, mais les autres fonctionnalités présentant un choix <var>yes</var>/<var>no</var> seront à <var>no</var> par défaut et seront donc désactivées.</p> @@ -340,7 +187,7 @@ function openRequestedPopup() { <p>Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.</p> -<h3 id="Bonnes_pratiques" name="Bonnes_pratiques">Bonnes pratiques</h3> +<h3 id="Bonnes_pratiques">Bonnes pratiques</h3> <pre><script type="text/javascript"> var WindowObjectReference = null; // variable globale @@ -375,9 +222,9 @@ l'adoption de Firefox</a></p> <p>Plus d'informations sur l'utilisation de l'attribut target :</p> -<p><a class="external" href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p> +<p><a href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p> -<p><a class="external" href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p> +<p><a href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p> <p>Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :</p> @@ -445,99 +292,49 @@ title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouver de Firefox</a></p> </pre> -<h3 id="FAQ" name="FAQ">FAQ</h3> +<h3 id="FAQ">FAQ</h3> <dl> <dt>Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?</dt> - <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur.</dd> - <dd><a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd> -</dl> - -<dl> + <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. <a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd> <dt>Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?</dt> <dd>Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode <a href="fr/DOM/window.focus">focus()</a>. Il n'y a pas d'autre manière fiable. Un <a href="#Bonnes_pratiques">exemple montrant comment utiliser la méthode focus()</a> est présenté ci-dessus.</dd> -</dl> - -<dl> <dt>Comment forcer une fenêtre à être agrandie/maximisée ?</dt> <dd>Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.</dd> -</dl> - -<dl> <dt>Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?</dt> <dd>Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans <code>about:config</code>. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à <code>yes</code> pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.</dd> -</dl> - -<dl> <dt>Comment redimensionner une fenêtre en fonction de son contenu ?</dt> - <dd>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code style="white-space: normal;">Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code style="white-space: normal;">Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd> -</dl> - -<dl> - <dd>En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</dd> -</dl> - -<dl> - <dd>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</dd> -</dl> - -<dl> + <dd><p>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code>Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code>Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</p><p>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</p></dd> <dt>Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?</dt> - <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées.</dd> -</dl> - -<dl> - <dd>Dans quelques années, la <a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd> -</dl> - -<dl> + <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd> <dt>Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?</dt> <dd>Vous pouvez tester l'existence de la référence à l'objet window, qui est la valeur renvoyée en cas de succès de l'appel à window.open(), et vérifier ensuite que la valeur renvoyée par <var>WindowObjectReference</var>.closed est bien <var>false</var>.</dd> -</dl> - -<dl> <dt>Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?</dt> <dd>Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par <code>window.open()</code> : elle sera <var>null</var> si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.</dd> -</dl> - -<dl> <dt>Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?</dt> <dd>La valeur renvoyée par la méthode window.open() est la propriété <a href="fr/DOM/window.opener">opener</a>. La variable <var>WindowObjectReference</var> lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé <code>opener</code> liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).</dd> + <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property <property_name or method_name> ». Pourquoi cela ?</dt> + <dd><p>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a href="http://www.mozilla.org/projects/security/components/same-origin.html">http://www.mozilla.org/projects/secu...me-origin.html</a></p></dd> </dl> -<dl> - <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur <span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <property_name or method_name> ». Pourquoi cela ?</dt> - <dd>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine.</dd> - <dd>Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd> -</dl> +<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3> -<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9" name="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3> - -<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29" name=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4> +<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4> <p>De manière générale, il est préférable d'éviter d'utiliser window.open() pour plusieurs raisons :</p> <ul> <li>Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.</li> -</ul> - -<ul> - <li>Il existe à présent <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing">à Firefox</a> (comme <a class="link-https" href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li> -</ul> - -<ul> + <li>Il existe à présent <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing">à Firefox</a> (comme <a href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li> <li>Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.</li> -</ul> - -<ul> <li>L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.</li> </ul> -<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations" name="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4> +<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4> <p>Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :</p> -<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E" name="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br> +<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br> <code><a href="javascript:window.open(...)" ...></code></h5> <p>Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.</p> @@ -546,7 +343,7 @@ de Firefox</a></p> <li>Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.</li> <li>Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.</li> <li>Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.</li> - <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr title="Personal Digital Assistant (assistant personnel numérique)">PDA</abbr> ou les navigateurs pour mobiles).</li> + <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr>PDA</abbr> ou les navigateurs pour mobiles).</li> <li>Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.</li> <li>Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.</li> </ul> @@ -554,16 +351,16 @@ de Firefox</a></p> <p><strong>Plus d'informations à ce sujet :</strong></p> <ul> - <li><a class="external" href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li> - <li><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li> - <li><a class="external" href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li> + <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li> + <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li> + <li><a href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li> </ul> -<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code><a href="#" onclick="window.open(...);"></code></h5> +<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code><a href="#" onclick="window.open(...);"></code></h5> <p>Un tel pseudo-lien met également en péril l'accessibilité des liens. <strong>Utilisez toujours une véritable URL pour la valeur de l'attribut href</strong>, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.</p> -<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire" name="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5> +<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5> <p>Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut <code>title</code> du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.</p> @@ -571,7 +368,7 @@ de Firefox</a></p> <blockquote> <p>« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton<em>Précédente</em> grisé. »<br> - citation de <a class="external" href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p> + citation de <a href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p> </blockquote> <p>Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).</p> @@ -579,75 +376,39 @@ de Firefox</a></p> <p><strong>Références</strong></p> <ul> - <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a class="external" href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> - <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a class="external" href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li> - <li><a class="external" href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li> + <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> + <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li> + <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li> </ul> -<table class="standard-table"> - <tbody> - <tr> - <td class="header" colspan="4">Exemples de curseurs et icônes « Nouvelle fenêtre »</td> - </tr> - <tr> - <td style="width: 25%;"></td> - <td style="width: 25%;"></td> - <td style="width: 25%;"></td> - <td style="width: 25%;"></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td></td> - <td></td> - <td></td> - <td></td> - </tr> - <tr> - <td colspan="2"></td> - <td colspan="2"></td> - </tr> - </tbody> -</table> - -<h5 id="Utilisez_toujours_l.27attribut_target" name="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5> +<h5 id="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5> <p>Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — <strong>sans l'imposer</strong> — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.</p> -<h5 id="N.27utilisez_pas_target.3D.22_blank.22" name="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5> +<h5 id="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5> <p>Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.</p> <p>Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).</p> -<h3 id="Glossaire" name="Glossaire">Glossaire</h3> +<h3 id="Glossaire">Glossaire</h3> <dl> - <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre </dt> + <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre</dt> <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.</dd> -</dl> - -<dl> - <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre </dt> + <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre</dt> <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.</dd> -</dl> - -<dl> - <dt>Fenêtres popup non sollicitées </dt> + <dt>Fenêtres popup non sollicitées</dt> <dd>Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.</dd> </dl> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr title="World Wide Web Consortium">W3C</abbr>.</p> +<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr>W3C</abbr>.</p> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> -<h4 id="Note_sur_les_priorit.C3.A9s" name="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4> +<h4 id="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4> <p>Dans les cas où <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) ont des valeurs contradictoires, <code>left</code> et <code>top</code> ont priorité sur <code>screenX</code> et <code>screenY</code> respectivement. Si <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) sont définies dans la liste <var>strWindowFeatures</var>, les valeurs <code>left</code> (et/ou <code>top</code>) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.</p> @@ -669,13 +430,13 @@ WindowObjectReference = window.open("http://www.wwf.org/", </script> </pre> -<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension" name="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4> +<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4> <p>Les positions et dimensions demandées dans la liste <var>strWindowFeatures</var> ne seront pas respectées et <strong>seront corrigées</strong> si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. <strong>Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.</strong></p> -<p><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p> +<p><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p> -<h4 id="Note_sur_les_barres_de_d.C3.A9filement" name="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4> +<h4 id="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4> <p>Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :</p> @@ -684,7 +445,7 @@ WindowObjectReference = window.open("http://www.wwf.org/", <li>l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox</li> <li>l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.</li> <li>l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud <code>body</code> dans les différents navigateurs et versions de ceux-ci</li> - <li>l'utilisateur utilise une feuille de style utilisateur (<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li> + <li>l'utilisateur utilise une feuille de style utilisateur (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li> <li>l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation</li> <li>l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.</li> <li>l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier</li> @@ -692,18 +453,18 @@ WindowObjectReference = window.open("http://www.wwf.org/", <li>certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation</li> </ul> -<h4 id="Note_sur_la_barre_d.27.C3.A9tat" name="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4> +<h4 id="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4> -<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr title="Secure Socket Layer">SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p> +<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr>SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p> -<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat" name="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4> +<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4> <p>Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de window.open() :</p> <blockquote> <p>« Pour les fenêtres ouvertes à l'aide de window.open() :<br> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. <strong>La barre d'état sera activée par défaut</strong> et fait entre 20 et 25 pixels de haut. (...) »<br> - citation de <a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> + citation de <a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> </blockquote> <blockquote> @@ -714,57 +475,44 @@ WindowObjectReference = window.open("http://www.wwf.org/", Description détaillée<br> <strong>Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.</strong> (...) Sans ce changement, les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.<br> La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"<br> - citation de <a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> + citation de <a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> </blockquote> -<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29" name="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4> +<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4> <p>Dans Internet Explorer 6 pour XP SP2 :</p> <ul> <li>« window.open() avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »</li> -</ul> - -<ul> <li>« La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »</li> </ul> <p><em>Références :</em></p> <ul> - <li><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> -</ul> - -<ul> - <li><a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> + <li><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> + <li><a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> </ul> -<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height" name="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4> +<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4> - -<h3 id="Tutoriels" name="Tutoriels">Tutoriels</h3> +<h3 id="Tutoriels">Tutoriels</h3> <p><strong>en français :</strong></p> -<p><a class="external" href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p> +<p><a href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p> <p><strong>en anglais :</strong></p> -<p><a class="external" href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p> - -<p><a class="external" href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p> - -<p><a class="external" href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p> - -<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3> - -<p><a class="external" href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p> +<p><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p> -<p><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</p> +<p><a href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p> +<p><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p> +<h3 id="R.C3.A9f.C3.A9rences">Références</h3> -<div class="noinclude"></div> +<p><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p> -<p>{{ languages( { "en": "en/DOM/window.open", "ja": "ja/DOM/window.open", "pl": "pl/DOM/window.open", "zh-cn": "cn/DOM/window.open" } ) }}</p> +<p><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</p> diff --git a/files/fr/web/api/window/opendialog/index.html b/files/fr/web/api/window/opendialog/index.html index 1c366c5355..5329caea16 100644 --- a/files/fr/web/api/window/opendialog/index.html +++ b/files/fr/web/api/window/opendialog/index.html @@ -8,104 +8,95 @@ tags: - boîte de dialogue translation_of: Web/API/Window/openDialog --- -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ ApiRef() }}</p> +<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Résumé</h3> +<p><code>window.openDialog</code> est une extension à <a href="/fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après<code>windowFeatures</code>, et que<code>windowFeatures</code> est traîté différemment.</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: rgb(37, 34, 29); font-weight: inherit;">window.openDialog</code> est une extension à <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code>, et que <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code> est traîté différemment.</p> +<p>Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement<code>load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement <code style="color: rgb(37, 34, 29); font-weight: inherit;">load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p> +<p>Notez que l'appel à la méthode<code>openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur<code>modal</code> pour le paramètre f<code>eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur <code style="color: rgb(37, 34, 29); font-weight: inherit;">modal</code> pour le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p> - -<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<h3 id="Syntax">Syntaxe</h3> <pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...) </pre> -<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <dt style="font-style: normal; font-weight: bold;">newWindow </dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La nouvelle fenêtre ouverte.</dd> - <dt style="font-style: normal; font-weight: bold;">url </dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">L'URL du document à charger dans la nouvelle fenêtre.</dd> - <dt style="font-style: normal; font-weight: bold;">name </dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Le nom de la fenêtre (optionnel). Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour plus de détails.</dd> - <dt style="font-style: normal; font-weight: bold;">features </dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour la description.</dd> - <dt style="font-style: normal; font-weight: bold;">arg1, arg2, ... </dt> - <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Les arguments à passer à la nouvelle fenêtre (optionnel).</dd> +<dl> + <dt>newWindow</dt> + <dd>La nouvelle fenêtre ouverte.</dd> + <dt>url</dt> + <dd>L'URL du document à charger dans la nouvelle fenêtre.</dd> + <dt>name</dt> + <dd>Le nom de la fenêtre (optionnel). Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour plus de détails.</dd> + <dt>features</dt> + <dd>Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour la description.</dd> + <dt>arg1, arg2, ... </dt> + <dd>Les arguments à passer à la nouvelle fenêtre (optionnel).</dd> </dl> -<h3 id="Example" name="Example">Exemple</h3> +<h3 id="Example">Exemple</h3> <pre class="brush: js">var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> -<h4 id="New_Features" name="New_Features">Nouvelles fonctionnalités</h4> +<h4 id="New_Features">Nouvelles fonctionnalités</h4> <dl> <dt><code>all</code></dt> + <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et<code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode<a href="/fr/DOM/window.open">window.open()</a> mais pas par window.openDialog().</dd> </dl> -<dl> - <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et <code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> mais pas par window.openDialog().</dd> -</dl> +<h4 id="Default_behaviour">Comportement</h4> -<h4 id="Default_behaviour" name="Default_behaviour">Comportement</h4> +<p>La méthode<code>window.openDialog()</code> traite l'absence du paramètre<code>features</code> de la même manière que<a href="/fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour<code>chrome</code> et<code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code>chrome=no</code>".</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La méthode <code>window.openDialog()</code> traite l'absence du paramètre <code>features</code> de la même manière que <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour <code>chrome</code> et <code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code style="color: rgb(37, 34, 29); font-weight: inherit;">chrome=no</code>".</p> +<h4 id="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4> -<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4> - -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code> :</p> +<p>Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code>eatures</code> :</p> <pre class="brush: js">openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Ces paramètres seront ensuite regroupés dans une propriété <code style="color: rgb(37, 34, 29); font-weight: inherit;">arguments</code> de type <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p> +<p>Ces paramètres seront ensuite regroupés dans une propriété <code>arguments</code> de type<a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p> +<p>Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p> <pre class="brush: js">var food = window.arguments[0]; var price = window.arguments[1];</pre> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code snippets/Dialogs and Prompts#Passing arguments and displaying a dialog">Autre exemple</a>).</p> +<p>Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).</p> -<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4> +<h4 id="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis que <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/fr/DOM/window.close" title="fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p> +<p>Depuis que<code><a href="/fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">window.close()</code>.</p> +<p>Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode<code>window.close()</code>.</p> <pre class="brush: js">var retVals = { address: null, delivery: null }; openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);</pre> -<p>Si vous modifiez les propriétés de l'objet <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> après l'appel à <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code>.</p> +<p>Si vous modifiez les propriétés de l'objet<code>retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau<code>retVals</code> après l'appel à <code>openDialog()</code>.</p> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p> +<p>Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p> <pre class="brush: js">var retVals = window.arguments[2]; retVals.address = enteredAddress; retVals.delivery = "immediate";</pre> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Voir aussi <a class="external" href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40" title="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br> - Voir aussi <a href="/fr/DOM/window.importDialog" title="fr/DOM/window.importDialog">window.importDialog()</a>.</p> +<p>Voir aussi<a href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br> + Voir aussi<a href="/fr/DOM/window.importDialog">window.importDialog()</a>.</p> -<h3 id="Specification" name="Specification">Spécification</h3> +<h3 id="Specification">Spécification</h3> -<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ DOM0() }}</p> +<p>{{ DOM0() }}</p> -<h3 id="Compatibilité_des_navigateurs" style="margin: 0px 0px 1.7em; padding: 0px;">Compatibilité des navigateurs</h3> +<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> <p>{{Compat("api.Window.openDialog")}}</p> <h3 id="Voir_également">Voir également</h3> -<p> </p> - <ul> - <li><a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li> -</ul> - -<p> </p> + <li><a href="/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li> + <li><a href="/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/window/opener/index.html b/files/fr/web/api/window/opener/index.html index 43c965d501..3ccf6c71ae 100644 --- a/files/fr/web/api/window/opener/index.html +++ b/files/fr/web/api/window/opener/index.html @@ -8,20 +8,17 @@ tags: translation_of: Web/API/Window/opener --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>refObj</i> = window.opener </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre> if window.opener != indexWin { referToTop(window.opener); } </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans <b>window.opener</b>. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie <code>null</code>.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> -<p>{{ DOM0() }}</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "en": "en/DOM/window.opener", "ja": "ja/DOM/window.opener", "pl": "pl/DOM/window.opener" } ) }}</p> +<h3 id="Sp.C3.A9cification">Spécification</h3> +<p>{{ DOM0() }}</p>
\ No newline at end of file diff --git a/files/fr/web/api/window/outerheight/index.html b/files/fr/web/api/window/outerheight/index.html index 064bd3c82e..53b6f0637a 100644 --- a/files/fr/web/api/window/outerheight/index.html +++ b/files/fr/web/api/window/outerheight/index.html @@ -5,8 +5,6 @@ translation_of: Web/API/Window/outerHeight --- <div>{{APIRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p><code>Window.outerHeight</code> retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.</p> <p>Cette propriété n'a pas de valeur par défaut.</p> @@ -18,13 +16,13 @@ translation_of: Web/API/Window/outerHeight <p>La valeur retournée correspond à la hauteur extérieure de la fenêtre.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</p> <p>Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.</p> -<h3 id="Graphical_example" name="Graphical_example">Exemple illustré</h3> +<h3 id="Graphical_example">Exemple illustré</h3> <p>La figure suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p> diff --git a/files/fr/web/api/window/outerwidth/index.html b/files/fr/web/api/window/outerwidth/index.html index a8076143bb..863a26a3ab 100644 --- a/files/fr/web/api/window/outerwidth/index.html +++ b/files/fr/web/api/window/outerwidth/index.html @@ -11,24 +11,22 @@ translation_of: Web/API/Window/outerWidth --- <div>{{APIRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> +<p><code>Window.outerWidth</code> récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</p> -<p><code>Window.outerWidth</code> <span class="tlid-translation translation"><span class="alt-edited">récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</span></span></p> +<p>Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</p> -<p><span class="tlid-translation translation"><span class="alt-edited">Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</span></span></p> - -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>largeurExterieureFenetre</var> = window.outerWidth; </pre> <p>Lors du retour, <code>largeurExterieureFenetre</code> vaut la largeur de l'extérieur de la fenêtre.</p> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> -<p><span class="tlid-translation translation"><span class="alt-edited">Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</span></span></p> +<p>Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</p> -<p><span class="tlid-translation translation"><span class="alt-edited">Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</span></span></p> +<p>Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</p> <h2 id="Specifications">Spécifications</h2> diff --git a/files/fr/web/api/window/pagehide_event/index.html b/files/fr/web/api/window/pagehide_event/index.html index ae97628c71..81e2c695f8 100644 --- a/files/fr/web/api/window/pagehide_event/index.html +++ b/files/fr/web/api/window/pagehide_event/index.html @@ -9,21 +9,21 @@ original_slug: Web/Events/pagehide <h2 id="Informations_générales">Informations générales</h2> <dl> - <dt style="float: left; text-align: right; width: 160px;">Spécification</dt> - <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide" lang="en-US">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 160px;">Interface</dt> - <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> - <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt> - <dd style="margin: 0 0 0 160px;">Non</dd> - <dt style="float: left; text-align: right; width: 160px;">Annulable</dt> - <dd style="margin: 0 0 0 160px;">Non</dd> - <dt style="float: left; text-align: right; width: 160px;">Cible</dt> - <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd> - <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt> - <dd style="margin: 0 0 0 160px;">Aucune</dd> + <dt>Spécification</dt> + <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></dd> + <dt>Interface</dt> + <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> + <dt>Bouillonne</dt> + <dd>Non</dd> + <dt>Annulable</dt> + <dd>Non</dd> + <dt>Cible</dt> + <dd>Document (dispatché sur Window)</dd> + <dt>Action par défaut</dt> + <dd>Aucune</dd> </dl> -<h2 id="Propriétés" style="">Propriétés</h2> +<h2 id="Propriétés">Propriétés</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/window/pageshow_event/index.html b/files/fr/web/api/window/pageshow_event/index.html index 4bc3fb867e..4687409333 100644 --- a/files/fr/web/api/window/pageshow_event/index.html +++ b/files/fr/web/api/window/pageshow_event/index.html @@ -9,21 +9,21 @@ original_slug: Web/Events/pageshow <h2 id="Informations_générales">Informations générales</h2> <dl> - <dt style="float: left; text-align: right; width: 160px;">Spécification</dt> - <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow" lang="en-US">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 160px;">Interface</dt> - <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> - <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt> - <dd style="margin: 0 0 0 160px;">Non</dd> - <dt style="float: left; text-align: right; width: 160px;">Annulable</dt> - <dd style="margin: 0 0 0 160px;">Non</dd> - <dt style="float: left; text-align: right; width: 160px;">Cible</dt> - <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd> - <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt> - <dd style="margin: 0 0 0 160px;">Aucune</dd> + <dt>Spécification</dt> + <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></dd> + <dt>Interface</dt> + <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> + <dt>Bouillonne</dt> + <dd>Non</dd> + <dt>Annulable</dt> + <dd>Non</dd> + <dt>Cible</dt> + <dd>Document (dispatché sur Window)</dd> + <dt>Action par défaut</dt> + <dd>Aucune</dd> </dl> -<h2 id="Propriétés" style="">Propriétés</h2> +<h2 id="Propriétés">Propriétés</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/window/parent/index.html b/files/fr/web/api/window/parent/index.html index f45781f517..01da0b6b14 100644 --- a/files/fr/web/api/window/parent/index.html +++ b/files/fr/web/api/window/parent/index.html @@ -8,18 +8,18 @@ tags: translation_of: Web/API/Window/parent --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><i>refObj</i> = window.parent </pre> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval">if (window.parent != window.top) { // on se trouve dans une imbrication de cadres } </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Si une fenêtre n'a pas de parent, sa propriété <b>parent</b> est une référence vers elle-même.</p> <p>Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <code><frame></code> qui fait référence à la fenêtre).</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> diff --git a/files/fr/web/api/window/paste_event/index.html b/files/fr/web/api/window/paste_event/index.html index af59ba4d71..0f215c946e 100644 --- a/files/fr/web/api/window/paste_event/index.html +++ b/files/fr/web/api/window/paste_event/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/Window/paste_event --- <div>{{APIRef}}</div> -<p><span class="seoSummary">L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</span></p> +<p>L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</p> <table class="properties"> <tbody> @@ -33,11 +33,11 @@ translation_of: Web/API/Window/paste_event </tbody> </table> -<p><span class="tlid-translation translation" lang="fr"><span title="">La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage</span></span>. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p> +<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p> <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">window.addEventListener('paste', (event) => { +<pre class="brush: js">window.addEventListener('paste', (event) => { console.log('paste action initiated') });</pre> diff --git a/files/fr/web/api/window/popstate_event/index.html b/files/fr/web/api/window/popstate_event/index.html index f924242a05..9c821b6ea9 100644 --- a/files/fr/web/api/window/popstate_event/index.html +++ b/files/fr/web/api/window/popstate_event/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/popstate_event <dl> <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">PopStateEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> diff --git a/files/fr/web/api/window/postmessage/index.html b/files/fr/web/api/window/postmessage/index.html index 9c4e349959..e7224757d7 100644 --- a/files/fr/web/api/window/postmessage/index.html +++ b/files/fr/web/api/window/postmessage/index.html @@ -13,26 +13,26 @@ translation_of: Web/API/Window/postMessage <div></div> -<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p> +<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p> <p>La méthode <code>window.postMessage</code>, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si <code>window.postMessage</code> est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type <code>message</code>, a une propriété <code>data</code> qui est initialisée à la valeur du premier argument passé à<code> window.postMessage</code>, une propriété <code>origin</code> correspondant à l'origine du document principal de la fenêtre appelant <code>window.postMessage</code> au moment où <code>window.postMessage</code> a été appelée, et une propriété <code>source</code> qui est la fenêtre depuis laquelle <code>window.postMessage</code> est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre> <dl> <dt><code><em>otherWindow</em></code></dt> - <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open" title="DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames" title="DOM/window.frames">window.frames</a>.</dd> + <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames">window.frames</a>.</dd> <dt><code><em>message</em></code></dt> - <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm" title="DOM/The structured clone algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd> + <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd> <dt><code><em>targetOrigin</em></code></dt> <dd>Indique quelle doit être l'origine de <code>otherWindow</code> pour l'évènement à envoyer, soit comme la chaîne littérale <code>"*"</code> (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de <code>otherWindow</code> ne correspond pas à ceux contenus dans <code>targetOrigin</code>, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si <code>postMessage</code> était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. <strong>Fournissez toujours une <code>targetOrigin</code> spécifique, jamais <code>*</code>, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.</strong></dd> <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> <dd>Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.</dd> </dl> -<h2 id="The_dispatched_event" name="The_dispatched_event">L'évènement envoyé</h2> +<h2 id="The_dispatched_event">L'évènement envoyé</h2> <p><code>otherWindow</code> peut surveiller les messages envoyés en exécutant le JavaScript suivant :</p> @@ -53,23 +53,23 @@ function receiveMessage(event) <dt><code>data</code></dt> <dd>L'objet passé depuis l'autre fenêtre.</dd> <dt><code>origin</code></dt> - <dd>L'<a href="/en-US/docs/Origin" title="Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code><span class="nowiki">https://example.org</span></code> (sous-entendu port <code>443</code>), <code><span class="nowiki">http://example.net</span></code> (sous-entendu port <code>80</code>), et <code><span class="nowiki">http://example.com:8080</span></code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd> + <dd>L'<a href="/en-US/docs/Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code>https://example.org</code> (sous-entendu port <code>443</code>), <code>http://example.net</code> (sous-entendu port <code>80</code>), et <code>http://example.com:8080</code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd> <dt><code>source</code></dt> - <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window" title="DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd> + <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd> </dl> <dl> </dl> -<h2 id="Security_concerns" name="Security_concerns">Précautions de sécurité</h2> +<h2 id="Security_concerns">Précautions de sécurité</h2> <p><strong>Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements <code>message</code>.</strong> C'est un moyen sûr d'éviter les problèmes de sécurité.</p> -<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code><span class="nowiki">http://evil.example.com</span></code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p> +<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code>http://evil.example.com</code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p> <p><strong>Spécifiez toujours explicitement une origine de destination, jamais <code>*</code>, quand vous utilisez <code>postMessage</code> pour envoyer des données à d'autres fenêtres.</strong> Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de <code>postMessage</code>.</p> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">/* * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>: @@ -126,7 +126,7 @@ function receiveMessage(event) window.addEventListener("message", receiveMessage, false); </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages <strong>doit</strong> d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés <code>origin</code> et si possible <code>source</code>. Cela ne peut pas être minimisé : <strong>ne pas vérifier les propriétés <code>origin</code> et si possible <code>source</code> permet des attaques inter-site.</strong></p> @@ -173,7 +173,7 @@ window.addEventListener("message", receiveMessage, false); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">Document.domain</a></li> - <li><a href="/en-US/docs/Web/API/CustomEvent" title="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li> - <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li> + <li><a href="/en-US/docs/DOM/document.domain">Document.domain</a></li> + <li><a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li> + <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li> </ul> diff --git a/files/fr/web/api/window/print/index.html b/files/fr/web/api/window/print/index.html index 17eeacc763..89f93aecf3 100644 --- a/files/fr/web/api/window/print/index.html +++ b/files/fr/web/api/window/print/index.html @@ -13,20 +13,18 @@ translation_of: Web/API/Window/print --- <p>{{ ApiRef() }}</p> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. </p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">window.print() </pre> -<h2 id="Specification" name="Specification">Notes</h2> +<h2 id="Specification">Notes</h2> <p>Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <tbody> @@ -46,7 +44,7 @@ translation_of: Web/API/Window/print <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en/Printing" title="en/Printing">Printing</a></li> + <li><a href="/en/Printing">Printing</a></li> <li>{{ domxref("window.onbeforeprint") }}</li> <li>{{ domxref("window.onafterprint") }}</li> </ul> diff --git a/files/fr/web/api/window/prompt/index.html b/files/fr/web/api/window/prompt/index.html index 9622d8b8e3..6b37e23e15 100644 --- a/files/fr/web/api/window/prompt/index.html +++ b/files/fr/web/api/window/prompt/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/Window/prompt <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>); +<pre class="syntaxbox"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>); </pre> <h3 id="Paramètres">Paramètres</h3> @@ -33,7 +33,7 @@ translation_of: Web/API/Window/prompt <h2 id="Exemples">Exemples</h2> -<pre class="brush: js notranslate">let signe = prompt("Quel est votre signe astrologique ?"); +<pre class="brush: js">let signe = prompt("Quel est votre signe astrologique ?"); if (signe.toLowerCase() == "verseau") { console.log("Oh ? moi aussi je suis verseau :)"); @@ -56,11 +56,11 @@ signe = window.prompt('Quelle est la réponse ?', '42');</pre> <p>Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.</p> -<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p> +<p>The following text is shared between this article, DOM:window.confirm and DOM:window.alertLes boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p> <p>On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).</p> -<pre class="brush: js notranslate">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre> +<pre class="brush: js">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/window/rejectionhandled_event/index.html b/files/fr/web/api/window/rejectionhandled_event/index.html index fb53af2a1b..ebe167e30f 100644 --- a/files/fr/web/api/window/rejectionhandled_event/index.html +++ b/files/fr/web/api/window/rejectionhandled_event/index.html @@ -15,7 +15,9 @@ translation_of: Web/API/Window/rejectionhandled_event --- <div>{{APIRef("HTML DOM")}}</div> -<p><span class="seoSummary">L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</span> Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p> +<p>L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</p> + +<p>Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p> <table class="properties"> <tbody> @@ -42,7 +44,7 @@ translation_of: Web/API/Window/rejectionhandled_event <p>Vous pouvez utiliser l'événement <code>rejectionhandled</code> pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :</p> -<pre class="brush: js notranslate">window.addEventListener("rejectionhandled", event => { +<pre class="brush: js">window.addEventListener("rejectionhandled", event => { console.log("Promise rejected; reason: " + event.reason); }, false); </pre> diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html index 8bdb9c1f89..210fa93d1a 100644 --- a/files/fr/web/api/window/requestanimationframe/index.html +++ b/files/fr/web/api/window/requestanimationframe/index.html @@ -11,20 +11,22 @@ translation_of: Web/API/window/requestAnimationFrame <p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p> -<div class="note"><strong>Note:</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</p> +</div> <p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p> <p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>); // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS) <em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>); // Firefox < 23 <em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> <dt><code>callback</code></dt> @@ -35,7 +37,7 @@ translation_of: Web/API/window/requestAnimationFrame <p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback.</p> -<h2 id="Notes" name="Notes">Exemple</h2> +<h2 id="Notes">Exemple</h2> <pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; @@ -58,15 +60,15 @@ function step(timestamp) { requestAnimationFrame(step); </pre> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2> +<h2 id="Browser_compatibility">Compatibilités</h2> <div> <p>{{Compat("api.Window.requestAnimationFrame")}}</p> </div> -<h3 id="Specification" name="Specification">Notes pour Gecko</h3> +<h3 id="Specification">Notes pour Gecko</h3> -<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas <span class="short_text" id="result_box" lang="fr"><span class="hps">susceptible</span></span> d'être standardisé.</p> +<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.</p> <p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p> @@ -74,7 +76,7 @@ requestAnimationFrame(step); <p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> & <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p> -<h2 id="Specification" name="Specification">Specification</h2> +<h2 id="Specification">Specification</h2> <p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p> @@ -87,5 +89,5 @@ requestAnimationFrame(step); <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> - <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li><a href="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> </ul> diff --git a/files/fr/web/api/window/requestidlecallback/index.html b/files/fr/web/api/window/requestidlecallback/index.html index 86a3cc180f..ca33f7ac28 100644 --- a/files/fr/web/api/window/requestidlecallback/index.html +++ b/files/fr/web/api/window/requestidlecallback/index.html @@ -5,22 +5,20 @@ translation_of: Web/API/Window/requestIdleCallback --- <div>{{APIRef}}{{SeeCompatTable}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La méthode <code><strong>window.requestIdleCallback() </strong></code>mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><code>var idleCallbackId = window.requestIdleCallback(fonction[, options])</code></pre> -<h3 id="Returns" name="Returns">Retour de l'appel</h3> +<h3 id="Returns">Retour de l'appel</h3> <p>Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.</p> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <dl> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">fonction</font></dt> + <dt>fonction</dt> <dd>La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : <ul> <li><code>timeRemaining </code>: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. <code>timeRemaining()</code> retournera toujours zéro si <code>didTimeout</code> est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.</li> diff --git a/files/fr/web/api/window/resizeby/index.html b/files/fr/web/api/window/resizeby/index.html index 982dfa4b23..b74e4ea022 100644 --- a/files/fr/web/api/window/resizeby/index.html +++ b/files/fr/web/api/window/resizeby/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Window/resizeBy <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">window.resizeBy(<em>xDelta, yDelta</em>) +<pre class="syntaxbox">window.resizeBy(<em>xDelta, yDelta</em>) </pre> <h3 id="Paramètres">Paramètres</h3> @@ -24,7 +24,7 @@ translation_of: Web/API/Window/resizeBy <h2 id="Exemple">Exemple</h2> -<pre class="brush:js notranslate">// Réduit la fenêtre +<pre class="brush:js">// Réduit la fenêtre window.resizeBy(-200, -200); </pre> @@ -38,7 +38,7 @@ window.resizeBy(-200, -200); <p>Même si vous créez une fenêtre avec <code>window.open()</code> <strong>elle n'est pas redimensionnable par défaut.</strong> Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre <code>"resizable"</code> .</p> -<pre class="brush: js notranslate">// Créer une fenêtre redimensionnable +<pre class="brush: js">// Créer une fenêtre redimensionnable myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable"); // Redimensionner la fenêtre à 500 x 500 diff --git a/files/fr/web/api/window/screen/index.html b/files/fr/web/api/window/screen/index.html index ff16ac6bc9..c86fcb6f61 100644 --- a/files/fr/web/api/window/screen/index.html +++ b/files/fr/web/api/window/screen/index.html @@ -13,14 +13,14 @@ translation_of: Web/API/Window/screen --- <div>{{APIRef("CSSOM View")}}</div> -<div>Retourne une référence à l'objet <code style="font-style: normal; line-height: 1.5;">screen</code> associé à la fenêtre. L'object <code style="font-style: normal; line-height: 1.5;">screen</code>, qui implémente l'interface <span style="line-height: 1.5;">{{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</span></div> +<div>Retourne une référence à l'objet <code>screen</code> associé à la fenêtre. L'object <code>screen</code>, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var>objetEcran</var> = <var>window</var>.screen; </pre> -<h2 id="Example" name="Example">Examples</h2> +<h2 id="Example">Examples</h2> <pre class="brush:js">if (screen.pixelDepth < 8) { // utiliser la page en colorisation réduite @@ -29,7 +29,7 @@ translation_of: Web/API/Window/screen } </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/window/screenx/index.html b/files/fr/web/api/window/screenx/index.html index cc762ade3b..2ff4f0dc7b 100644 --- a/files/fr/web/api/window/screenx/index.html +++ b/files/fr/web/api/window/screenx/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Window/screenX <p>La propriété <code><strong>Window.screenX</strong></code> retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> +<h2 id="Syntax">Syntax</h2> <pre class="syntaxbox"><em>lLoc</em> = window.screenX </pre> @@ -21,9 +21,9 @@ translation_of: Web/API/Window/screenX <li><em><code>lLoc</code></em> is the number of CSS pixels from the left side the screen.</li> </ul> -<h2 id="Specifications" name="Specifications">Specifications</h2> +<h2 id="Specifications">Specifications</h2> -<table class="standard-table" style="height: 49px; width: 1000px;"> +<table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> diff --git a/files/fr/web/api/window/scroll/index.html b/files/fr/web/api/window/scroll/index.html index 82075c6ba2..17ae626928 100644 --- a/files/fr/web/api/window/scroll/index.html +++ b/files/fr/web/api/window/scroll/index.html @@ -4,24 +4,21 @@ slug: Web/API/Window/scroll translation_of: Web/API/Window/scroll --- <p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Résumé</h3> + <p>Fait glisser la fenêtre vers une position particulière du document</p> -<h3 id="Syntax" name="Syntax">Syntax</h3> +<h3 id="Syntax">Syntax</h3> <pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>) </pre> -<h3 id="Parameters" name="Parameters">Parameters</h3> +<h3 id="Parameters">Parameters</h3> <ul> <li><code>x-coord</code> est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li> <li><code>y-coord</code> est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li> </ul> -<h3 id="Example" name="Example">Example</h3> +<h3 id="Example">Example</h3> <pre> // Déplace la fenêtre 100px plus bas <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button> </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p><a href="en/Window.scrollTo">window.scrollTo</a> a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez <a href="en/Window.scrollBy">window.scrollBy</a>. Jetez aussi un œil à <a href="en/Window.scrollByLines">window.scrollByLines</a> et <a href="en/Window.scrollByPages">window.scrollByPages</a>.</p> -<h3 id="Specification" name="Specification">Specification</h3> -<p>DOM Level 0. Hors spécification.</p> -<div class="noinclude"> - </div> -<p>{{ languages( { "ja": "ja/DOM/window.scroll", "pl": "pl/DOM/window.scroll" } ) }}</p> +<h3 id="Specification">Specification</h3> +<p>DOM Level 0. Hors spécification.</p>
\ No newline at end of file diff --git a/files/fr/web/api/window/scrollbars/index.html b/files/fr/web/api/window/scrollbars/index.html index c8536a550b..1a292aed78 100644 --- a/files/fr/web/api/window/scrollbars/index.html +++ b/files/fr/web/api/window/scrollbars/index.html @@ -15,14 +15,14 @@ translation_of: Web/API/Window/scrollbars <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>objRef</em> = window.scrollbars +<pre class="syntaxbox"><em>objRef</em> = window.scrollbars </pre> <h2 id="Exemple">Exemple</h2> <p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet scrollbars est utilisée.</p> -<pre class="brush: html notranslate"><!doctype html> +<pre class="brush: html"><!doctype html> <html> <head> <title>Divers Tests DOM</title> diff --git a/files/fr/web/api/window/scrollby/index.html b/files/fr/web/api/window/scrollby/index.html index 17b80d2ea6..8713385ca8 100644 --- a/files/fr/web/api/window/scrollby/index.html +++ b/files/fr/web/api/window/scrollby/index.html @@ -10,16 +10,14 @@ translation_of: Web/API/Window/scrollBy --- <p>{{ APIRef() }}</p> -<h2 id="Summary" name="Summary">Description</h2> - <p>Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>); </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>X</code> est le nombre en pixels pour le défilement horizontal.</li> @@ -28,17 +26,17 @@ translation_of: Web/API/Window/scrollBy <p>Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. </p> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <pre class="eval">// fait défiler d'une page window.scrollBy(0, window.innerHeight); </pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p><a href="/fr/docs/DOM/Window.scrollBy">window.scrollBy</a> fait défiler en fonction d'un nombre précis, alors que <a href="/fr/docs/DOM/Window.scroll">window.scroll</a> fait défiler vers une position absolue dans le document. Voir aussi <a href="/fr/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/window/scrollbylines/index.html b/files/fr/web/api/window/scrollbylines/index.html index 471bae984f..eac61c0802 100644 --- a/files/fr/web/api/window/scrollbylines/index.html +++ b/files/fr/web/api/window/scrollbylines/index.html @@ -12,27 +12,23 @@ translation_of: Web/API/Window/scrollByLines --- <div>{{ ApiRef() }}</div> -<div> -<p id="comment_text_2">{{Non-standard_header}}</p> -</div> - -<h2 id="Summary" name="Summary">Description</h2> +<p>{{Non-standard_header}}</p> <p>Fait défiler le document du nombre de lignes spécifié.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">window.scrollByLines(<var>lignes</var>) </pre> -<h2 id="Parameters" name="Parameters">Paramètres</h2> +<h2 id="Parameters">Paramètres</h2> <ul> <li><code>lignes</code> est le nombre de lignes à faire défiler.</li> <li><code>lignes</code> peut être un entier positif ou négatif.</li> </ul> -<h2 id="Example" name="Example">Exemples</h2> +<h2 id="Example">Exemples</h2> <pre class="brush:html"><!-- Faire défiler le document de 5 lignes vers le bas. --> <button onclick="scrollByLines(5);">5 lignes vers le bas</button> @@ -42,11 +38,11 @@ translation_of: Web/API/Window/scrollByLines <button onclick="scrollByLines(-5);">5 lignes vers le haut</button> </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<p id="comment_text_2">Ne fait partie d'aucune spécification.</p> +<p>Ne fait partie d'aucune spécification.</p> -<h2 id="See_also" name="See_also">See also</h2> +<h2 id="See_also">See also</h2> <ul> <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li> diff --git a/files/fr/web/api/window/scrollbypages/index.html b/files/fr/web/api/window/scrollbypages/index.html index e352ef57e0..d3de7c935c 100644 --- a/files/fr/web/api/window/scrollbypages/index.html +++ b/files/fr/web/api/window/scrollbypages/index.html @@ -10,23 +10,21 @@ translation_of: Web/API/Window/scrollByPages --- <p>{{ ApiRef() }}{{Non-standard_header}}</p> -<h3 id="Summary" name="Summary">Description</h3> - <p>Fait défiler le document du nombre de pages spécifié.</p> -<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<h3 id="Syntax">Syntaxe</h3> <pre class="eval">window.scrollByPages(<em>pages</em>) </pre> -<h3 id="Parameters" name="Parameters">Paramètres</h3> +<h3 id="Parameters">Paramètres</h3> <ul> <li><code>pages</code> est le nombre de pages à faire défiler.</li> <li><code>pages</code> peut être un entier positif ou négatif.</li> </ul> -<h3 id="Example" name="Example">Exemples</h3> +<h3 id="Example">Exemples</h3> <pre>// fait défiler le document d'une page vers le bas window.scrollByPages(1); @@ -35,11 +33,11 @@ window.scrollByPages(1); window.scrollByPages(-1); </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> -<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll" title="en/DOM/window.scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo" title="en/DOM/window.scrollTo">window.scrollTo</a>.</p> +<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo">window.scrollTo</a>.</p> -<h3 id="Specification" name="Specification">Spécification</h3> +<h3 id="Specification">Spécification</h3> <p>DOM Niveau 0. Ne fait pas partie de la spécification.</p> diff --git a/files/fr/web/api/window/scrollto/index.html b/files/fr/web/api/window/scrollto/index.html index 8198308355..753059d1c9 100644 --- a/files/fr/web/api/window/scrollto/index.html +++ b/files/fr/web/api/window/scrollto/index.html @@ -8,35 +8,31 @@ translation_of: Web/API/Window/scrollTo --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Fait défiler le document jusqu'à un jeu de coordonnées particulier.</p> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval">window.scrollTo(<em>coord-x</em>,<em>coord-y</em>); </pre> -<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3> +<h3 id="Param.C3.A8tres">Paramètres</h3> <ul> <li><code>coord-x</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li> <li><code>coord-y</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li> </ul> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre>window.scrollTo(0, 1000); </pre> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> <p>Cette fonction est fonctionnellement identique à <a href="scroll">window.scroll</a>. Pour un défilement relatif, consultez <a href="scrollBy">window.scrollBy</a>, <a href="scrollByLines">window.scrollByLines</a> et <a href="scrollByPages">window.scrollByPages</a>.</p> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> <p>{{ DOM0() }}</p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo", "pl": "pl/DOM/window.scrollTo" } ) }}</p> diff --git a/files/fr/web/api/window/scrolly/index.html b/files/fr/web/api/window/scrolly/index.html index 23a8eaea78..6d556c1eae 100644 --- a/files/fr/web/api/window/scrolly/index.html +++ b/files/fr/web/api/window/scrolly/index.html @@ -5,11 +5,9 @@ translation_of: Web/API/Window/scrollY --- <div>{{APIRef}}</div> -<h2 id="Summary" name="Summary">Résumé</h2> - <p>La propriété <code><strong>scrollY</strong></code> de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">var y = window.scrollY;</pre> @@ -17,7 +15,7 @@ translation_of: Web/API/Window/scrollY <li><code>y</code> est le nombre de pixels verticaux défilés.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush:js">// make sure and go down to the second page if (window.scrollY) { @@ -26,7 +24,7 @@ if (window.scrollY) { window.scrollByPages(1);</pre> -<h2 id="Notes" name="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.</p> @@ -43,7 +41,7 @@ var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documen var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; </pre> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/window/sessionstorage/index.html b/files/fr/web/api/window/sessionstorage/index.html index e93c0bb0cc..64a4e4cc27 100644 --- a/files/fr/web/api/window/sessionstorage/index.html +++ b/files/fr/web/api/window/sessionstorage/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/Window/sessionStorage <h2 id="Syntaxe">Syntaxe</h2> -<pre class="brush: js notranslate">// Enregistrer des données dans sessionStorage +<pre class="brush: js">// Enregistrer des données dans sessionStorage sessionStorage.setItem('clé', 'valeur'); // Récupérer des données depuis sessionStorage @@ -34,11 +34,11 @@ sessionStorage.clear();</code> <p>L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.</p> -<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre> +<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> <p>L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.</p> -<pre class="brush: js notranslate">// Récupération du champ à enregistrer +<pre class="brush: js">// Récupération du champ à enregistrer var champ = document.getElementById("champ"); // Vérification de l'existence d'une donnée enregistrée auparavant @@ -55,7 +55,7 @@ champ.addEventListener("change", function() { });</pre> <div class="note"> -<p><strong>Note</strong>: Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p> +<p><strong>Note :</strong> Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p> </div> <h2 id="Spécifications">Spécifications</h2> @@ -79,7 +79,7 @@ champ.addEventListener("change", function() { <p>{{Compat("api.Window.sessionStorage")}}</p> -<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p> +<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/window/showmodaldialog/index.html b/files/fr/web/api/window/showmodaldialog/index.html index e3fba42ed2..3d86815e6a 100644 --- a/files/fr/web/api/window/showmodaldialog/index.html +++ b/files/fr/web/api/window/showmodaldialog/index.html @@ -7,19 +7,19 @@ translation_of: Web/API/Window/showModalDialog --- <p>{{ ApiRef() }}</p> -<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<h3 id="R.C3.A9sum.C3.A9">Résumé</h3> <p>Crée et affiche un dialogue modal contenant un document HTML spécifié.</p> -<div class="note"> -<p><strong><em>Cette fonction est obsolète</em></strong>.</p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonction est obsolète.</p> <p>Le support a été arrêté avec la sortie de <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ici</a>.</p> <p>Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.</p> </div> -<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> +<h3 id="Syntaxe">Syntaxe</h3> <pre class="eval"><em>retour</em> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]); </pre> @@ -40,7 +40,7 @@ translation_of: Web/API/Window/showModalDialog <th>Description</th> </tr> <tr> - <td><code>center: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td> + <td><code>center: {on | off | yes | no | 1 | 0 }</code></td> <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est <code>yes</code>.</td> </tr> <tr> @@ -60,11 +60,11 @@ translation_of: Web/API/Window/showModalDialog <td>Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td> </tr> <tr> - <td><code>resizable: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td> + <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td> <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est <code>no</code>.</td> </tr> <tr> - <td><code>scroll: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td> + <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td> <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est <code>no</code>.</td> </tr> </tbody> @@ -72,20 +72,16 @@ translation_of: Web/API/Window/showModalDialog <p>{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}</p> -<h3 id="Compatibilit.C3.A9" name="Compatibilit.C3.A9">Compatibilité</h3> +<h3 id="Compatibilit.C3.A9">Compatibilité</h3> <p>Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.</p> -<h3 id="Exemples" name="Exemples">Exemples</h3> +<h3 id="Exemples">Exemples</h3> -<p><a class="external" href="http://developer.mozilla.org/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p> +<p><a href="/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p> -<h3 id="Notes" name="Notes">Notes</h3> +<h3 id="Notes">Notes</h3> -<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> +<h3 id="Sp.C3.A9cification">Spécification</h3> -<p>Microsoft MSDN : <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p> - -<div class="noinclude"> </div> - -<p>{{ languages( { "en": "en/DOM/window.showModalDialog", "ja": "ja/DOM/window.showModalDialog" } ) }}</p> +<p>Microsoft MSDN : <a href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p> diff --git a/files/fr/web/api/window/stop/index.html b/files/fr/web/api/window/stop/index.html index 144637b97b..491876c7b8 100644 --- a/files/fr/web/api/window/stop/index.html +++ b/files/fr/web/api/window/stop/index.html @@ -11,27 +11,25 @@ tags: - stop translation_of: Web/API/Window/stop --- -<div> {{APIRef}}</div> +<div>{{APIRef}}</div> -<div><span class="seoSummary"><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</span></div> +<p><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</p> -<div></div> +<p>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</p> -<div>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</div> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> - -<pre class="syntaxbox notranslate">window.stop() +<pre class="syntaxbox">window.stop() </pre> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> -<pre class="brush:js notranslate">window.stop(); +<pre class="brush:js">window.stop(); </pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> -<table class="spectable standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Spécifications</th> diff --git a/files/fr/web/api/window/storage_event/index.html b/files/fr/web/api/window/storage_event/index.html index 49152ebc7d..8bfbc393b3 100644 --- a/files/fr/web/api/window/storage_event/index.html +++ b/files/fr/web/api/window/storage_event/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/Window/storage_event <p>Consignez l'élément <code>sampleList</code> sur la console lorsque l'événement <code>storage</code> se déclenche :</p> -<pre class="brush: js notranslate">window.addEventListener('storage', () => { +<pre class="brush: js">window.addEventListener('storage', () => { // Lorsque le stockage local change, vider la liste sur // la console. console.log(JSON.parse(window.localStorage.getItem('sampleList'))); @@ -49,7 +49,7 @@ translation_of: Web/API/Window/storage_event <p>La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> :</p> -<pre class="brush: js notranslate">window.onstorage = () => { +<pre class="brush: js">window.onstorage = () => { // Lorsque le stockage local change, vider la liste dans // la console. console.log(JSON.parse(window.localStorage.getItem('sampleList'))); diff --git a/files/fr/web/api/window/top/index.html b/files/fr/web/api/window/top/index.html index 01b394037f..8fa533e6f9 100644 --- a/files/fr/web/api/window/top/index.html +++ b/files/fr/web/api/window/top/index.html @@ -16,7 +16,7 @@ translation_of: Web/API/Window/top <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate">var <var>topWindow</var> = window.top; +<pre class="syntaxbox">var <var>topWindow</var> = window.top; </pre> <h2 id="Notes">Notes</h2> diff --git a/files/fr/web/api/window/unload_event/index.html b/files/fr/web/api/window/unload_event/index.html index 1803dc1f98..aa14cc47c8 100644 --- a/files/fr/web/api/window/unload_event/index.html +++ b/files/fr/web/api/window/unload_event/index.html @@ -7,14 +7,13 @@ tags: translation_of: Web/API/Window/unload_event original_slug: Web/Events/unload --- -<p><br> - <span class="seoSummary">L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</span></p> +<p>L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</p> <p>Il est lancé après :</p> <ol> - <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li> - <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> + <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li> + <li><a href="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> </ol> <p>Le document se trouve alors dans un état particulier :</p> @@ -66,28 +65,28 @@ original_slug: Web/Events/unload <tbody> <tr> <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td> <td>La cible de l'événement (la cible de plus haut niveau dans le DOM).</td> </tr> <tr> <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td> <td>Le type d'événement.</td> </tr> <tr> <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> <td>Si l'événement remonte ou non.</td> </tr> <tr> <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td> <td>Si l'événement est annulable ou non.</td> </tr> <tr> <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>fenêtre</code> du document)</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>fenêtre</code> du document)</td> </tr> <tr> <td><code>detail</code> {{readonlyInline}}</td> @@ -152,6 +151,6 @@ original_slug: Web/Events/unload <h2 id="Spécifications">Spécifications</h2> <ul> - <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#unload-a-document">Unloading Documents — unload a document</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li> </ul> diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.html b/files/fr/web/api/window/vrdisplayconnect_event/index.html index 9ec3b9eb0c..888a500d2f 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.html +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.html @@ -40,14 +40,14 @@ translation_of: Web/API/Window/vrdisplayconnect_event <p>Vous pouvez utiliser l'événement <code>vrdisplayconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> -<pre class="brush: js notranslate">window.addEventListener('vrdisplayconnect', function() { +<pre class="brush: js">window.addEventListener('vrdisplayconnect', function() { info.textContent = 'Affichage connecté.'; reportDisplays(); });</pre> <p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> :</p> -<pre class="brush: js notranslate">window.onvrdisplayconnect = function() { +<pre class="brush: js">window.onvrdisplayconnect = function() { info.textContent = 'Affichage connecté.'; reportDisplays(); };</pre> diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html index b6beea3f6e..75a6c9924a 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html @@ -40,14 +40,14 @@ translation_of: Web/API/Window/vrdisplaydisconnect_event <p>Vous pouvez utiliser l'événement <code>vrdisplaydisconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> -<pre class="brush: js notranslate">window.addEventListener('vrdisplaydisconnect', function() { +<pre class="brush: js">window.addEventListener('vrdisplaydisconnect', function() { info.textContent = 'Affichage déconnecté'; reportDisplays(); });</pre> <p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> :</p> -<pre class="brush: js notranslate">window.onvrdisplaydisconnect = function() { +<pre class="brush: js">window.onvrdisplaydisconnect = function() { info.textContent = 'Affichage déconnecté'; reportDisplays(); );</pre> diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html index 01e3b050b1..c2abcb5e12 100644 --- a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html +++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event <p>Vous pouvez utiliser l'événement <code>vrdisplaypresentchange</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p> -<pre class="brush: js notranslate">window.addEventListener('vrdisplaypresentchange', function() { +<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function() { if(vrDisplay.isPresenting) { info.textContent = "L'affichage a commencé à présenter."; } else { @@ -51,7 +51,7 @@ translation_of: Web/API/Window/vrdisplaypresentchange_event <p>Ou utilisez la propriété de gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> :</p> -<pre class="brush: js notranslate">window.onvrdisplaypresentchange = function() { +<pre class="brush: js">window.onvrdisplaypresentchange = function() { if(vrDisplay.isPresenting) { info.textContent = "L'affichage a commencé à présenter."; } else { diff --git a/files/fr/web/api/windowclient/focus/index.html b/files/fr/web/api/windowclient/focus/index.html index 577285459b..b78542bb67 100644 --- a/files/fr/web/api/windowclient/focus/index.html +++ b/files/fr/web/api/windowclient/focus/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/focus --- <p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> -<p>La méthode <strong><code>focus()</code></strong> de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le<span> {{domxref("WindowClient")}} existant.</span></p> +<p>La méthode <strong><code>focus()</code></strong> de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.</p> <h2 id="Syntaxe">Syntaxe</h2> diff --git a/files/fr/web/api/windowclient/index.html b/files/fr/web/api/windowclient/index.html index b5b0fe36e0..1a7d646b7a 100644 --- a/files/fr/web/api/windowclient/index.html +++ b/files/fr/web/api/windowclient/index.html @@ -86,7 +86,7 @@ translation_of: Web/API/WindowClient <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li> </ul> diff --git a/files/fr/web/api/windowclient/navigate/index.html b/files/fr/web/api/windowclient/navigate/index.html index f7d35d7399..038f93f87c 100644 --- a/files/fr/web/api/windowclient/navigate/index.html +++ b/files/fr/web/api/windowclient/navigate/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/navigate --- <p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> -<p>La méthode <strong><code>navigate()</code></strong> de l'interface {{domxref("WindowClient")}} <span id="noHighlight_0.005279926980020444">charge une URL spécifiée dans une page de client contrôlée, puis retourne une</span> {{jsxref("Promise")}} <span id="noHighlight_0.005279926980020444">qui devra être analysée p</span>ar {{domxref("WindowClient")}} (le demandeur).</p> +<p>La méthode <strong><code>navigate()</code></strong> de l'interface {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une {{jsxref("Promise")}} qui devra être analysée par {{domxref("WindowClient")}} (le demandeur).</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -26,7 +26,7 @@ translation_of: Web/API/WindowClient/navigate <dl> <dt><code>url</code></dt> - <dd><span id="noHighlight_0.8092575892867941">L'emplacement pour naviguer vers (url est une string)</span> .</dd> + <dd>L'emplacement pour naviguer vers (url est une string) .</dd> </dl> <h3 id="Retour">Retour</h3> diff --git a/files/fr/web/api/windowclient/visibilitystate/index.html b/files/fr/web/api/windowclient/visibilitystate/index.html index 0456b39d55..3f0d42838e 100644 --- a/files/fr/web/api/windowclient/visibilitystate/index.html +++ b/files/fr/web/api/windowclient/visibilitystate/index.html @@ -3,9 +3,9 @@ title: WindowClient.visibilityState slug: Web/API/WindowClient/visibilityState translation_of: Web/API/WindowClient/visibilityState --- -<p><span style="line-height: 19.0909080505371px;">{{SeeCompatTable}}{{APIRef("Service Workers API")}}</span></p> +<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> -<p><span style="line-height: 19.0909080505371px;">La propriété <strong><code>visibilityState</code></strong>, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant</span>. La valeur pourra être : <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</p> +<p>La propriété <strong><code>visibilityState</code></strong>, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</p> <h2 id="Syntaxe">Syntaxe</h2> @@ -33,9 +33,9 @@ translation_of: Web/API/WindowClient/visibilityState })); });</pre> -<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2> +<h2 id="Spécifications">Spécifications</h2> -<table class="standard-table" style="line-height: 19.0909080505371px;"> +<table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> diff --git a/files/fr/web/api/windoweventhandlers/index.html b/files/fr/web/api/windoweventhandlers/index.html index 412ab62770..b74f03c601 100644 --- a/files/fr/web/api/windoweventhandlers/index.html +++ b/files/fr/web/api/windoweventhandlers/index.html @@ -9,10 +9,9 @@ translation_of: Web/API/WindowEventHandlers <div>La mixin <strong><code>WindowEventHandlers</code></strong> décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.</div> -<div> </div> <div class="note"> -<p><strong>Note</strong>: <code>WindowEventHandlers</code> est une mixin et non une interface; il n'est pas possible de créer un objet de type <code>WindowEventHandlers</code>.</p> +<p><strong>Note :</strong> <code>WindowEventHandlers</code> est une mixin et non une interface; il n'est pas possible de créer un objet de type <code>WindowEventHandlers</code>.</p> </div> <h2 id="Propriétés">Propriétés</h2> diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.html b/files/fr/web/api/windoweventhandlers/onafterprint/index.html index fdabdc1f3e..c51179479a 100644 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.html +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.html @@ -61,7 +61,5 @@ translation_of: Web/API/WindowEventHandlers/onafterprint <ul> <li>{{domxref("window.print")}}</li> <li>{{domxref("window.onbeforeprint")}}</li> - <li><a href="/en-US/docs/Printing" title="Printing">Printing</a></li> -</ul> - -<div class="grammarly-disable-indicator"> </div> + <li><a href="/en-US/docs/Printing">Printing</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html index 4f5e06adb8..049c317a23 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html @@ -12,12 +12,12 @@ translation_of: Web/API/WindowEventHandlers/onbeforeprint <p>La propriété <code>onbeforeprint</code> définit et retourne le code du gestionnaire d'événement <code>onbeforeprint</code> onbeforeprint pour la fenêtre actuelle.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox">window.onbeforeprint = <em>code de traitement de l'événement</em> </pre> -<h2 class="Notes" id="Notes">Notes</h2> +<h2 id="Notes">Notes</h2> <p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p> @@ -25,10 +25,6 @@ translation_of: Web/API/WindowEventHandlers/onbeforeprint <p>Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement <code>beforeprint</code> peut être obtenu avec <code>{{domxref("window.matchMedia")}}('print')</code>.</p> -<p> </p> - -<p> </p> - <pre class="brush: js">var mediaQueryList = window.matchMedia('print'); mediaQueryList.addListener(function(mql) { if(mql.matches) { @@ -36,7 +32,7 @@ mediaQueryList.addListener(function(mql) { } });</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <table class="standard-table"> <thead> @@ -55,13 +51,13 @@ mediaQueryList.addListener(function(mql) { </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.WindowEventHandlers.onbeforeprint")}}</p> -<h2 id="See_also" name="See_also">Voir également</h2> +<h2 id="See_also">Voir également</h2> <ul> <li>{{domxref("window.print")}}</li> diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html index b63c5b4caf..0848a6ae06 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html +++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html @@ -3,11 +3,11 @@ title: window.onbeforeunload slug: Web/API/WindowEventHandlers/onbeforeunload translation_of: Web/API/WindowEventHandlers/onbeforeunload --- -<h2 id="Sommaire" name="Sommaire">Résumé</h2> +<h2 id="Sommaire">Résumé</h2> <p>Le gestionnaire d'événement <code><strong>WindowEventHandlers.onbeforeunload</strong></code> contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.</p> -<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> +<h2 id="Syntaxe">Syntaxe</h2> <pre class="brush: html"><element beforeunload="funcRef(event);" /></pre> @@ -19,7 +19,7 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload <li>funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche</li> </ul> -<h2 id="Exemple" name="Exemple">Exemple</h2> +<h2 id="Exemple">Exemple</h2> <pre class="brush: js">window.onbeforeunload = function (e) { var e = e || window.event; @@ -34,7 +34,7 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload }; </pre> -<h2 id="EventProperty" name="EventProperty">Propriétés de l'objet <strong>event</strong></h2> +<h2 id="EventProperty">Propriétés de l'objet <strong>event</strong></h2> <pre>returnValue</pre> @@ -46,4 +46,4 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload <p>L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.</p> -<p><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx" title="MSDN—onbeforeunload Event">MSDN—onbeforeunload Event</a></p> +<p><a href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx">MSDN—onbeforeunload Event</a></p> diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.html b/files/fr/web/api/windoweventhandlers/onhashchange/index.html index bc46a7b004..1a495e5a37 100644 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.html +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.html @@ -124,6 +124,6 @@ if(!window.HashChangeEvent)(function(){ <ul> <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a></li> - <li>Méthodes <a href="/fr/docs/Web/API/Window/history" title="DOM/window.history">history.pushState() et history.replaceState()</a></li> - <li>L'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate" title="DOM/window.onpopstate">popstate</a></li> + <li>Méthodes <a href="/fr/docs/Web/API/Window/history">history.pushState() et history.replaceState()</a></li> + <li>L'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">popstate</a></li> </ul> diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html index 9e3d5fa3f8..5fe039c2cb 100644 --- a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html +++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/WindowEventHandlers/onlanguagechange <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>object</em>.onlanguagechange = <em>function</em>; +<pre class="syntaxbox"><em>object</em>.onlanguagechange = <em>function</em>; </pre> <h3 id="Valeur">Valeur</h3> @@ -29,7 +29,7 @@ translation_of: Web/API/WindowEventHandlers/onlanguagechange <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">window.onlanguagechange = function(event) { +<pre class="brush: js">window.onlanguagechange = function(event) { console.log('événement de changement de langue détecté!'); }; </pre> diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.html b/files/fr/web/api/windoweventhandlers/onpopstate/index.html index 1218a53ac5..0a0ab110f2 100644 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.html +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.html @@ -11,11 +11,11 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <p>Un gestionnaire d'évènement pour l'évènement <code>popstate</code> de la fenêtre.</p> -<p><span style="line-height: inherit;">L'évènement <code>popstate</code></span> est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant <code>history.pushState()</code> ou a été modifiée en appelant <code>history.replaceState()</code>, la propriété <font face="Courier New, Andale Mono, monospace">state</font> de l'évènement <code>popstate</code> contient une copie de l'objet d'entrée de l'historique.</p> +<p>L'évènement <code>popstate</code> est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant <code>history.pushState()</code> ou a été modifiée en appelant <code>history.replaceState()</code>, la propriété state de l'évènement <code>popstate</code> contient une copie de l'objet d'entrée de l'historique.</p> <p>Sachez qu'appeler <code>history.pushState()</code> ou <code>history.replaceState()</code> ne déclenchera pas l'évènement <code>popstate</code>. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler <code>history.back()</code>, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.</p> -<h3 id="Syntax" name="Syntax">Syntaxe</h3> +<h3 id="Syntax">Syntaxe</h3> <pre class="eval">window.onpopstate = <em>funcRef</em>; </pre> @@ -26,7 +26,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate <h3 id="Lévènement_popstate">L'évènement popstate</h3> -<p>Par exemple, une page à l'adresse <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a> exécutant le code suivant générera les alertes suivantes:</p> +<p>Par exemple, une page à l'adresse <a href="http://example.com/example.html">http://example.com/example.html</a> exécutant le code suivant générera les alertes suivantes:</p> <pre class="brush: js">window.onpopstate = function(event) { alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state)); @@ -39,20 +39,20 @@ history.back(); // affiche "adresse: http://example.com/example.html, état: nul history.go(2); // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3} </pre> -<p>Même si l'entrée originelle (de <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a>) n'a aucun objet d'état associé, l'évènement <code>popstate</code> est toujours déclenché lorsque l'entrée est activée après un deuxième appel à <code>history.back()</code>.</p> +<p>Même si l'entrée originelle (de <a href="http://example.com/example.html">http://example.com/example.html</a>) n'a aucun objet d'état associé, l'évènement <code>popstate</code> est toujours déclenché lorsque l'entrée est activée après un deuxième appel à <code>history.back()</code>.</p> -<h3 id="Specification" name="Specification">Spécification</h3> +<h3 id="Specification">Spécification</h3> <ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li> </ul> <h3 id="Lire_également">Lire également</h3> <ul> <li>{{ domxref("window.history") }}</li> - <li><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a></li> - <li><a href="/fr/docs/DOM/Manipulating_the_browser_history/Example" title="/fr/docs/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a></li> + <li><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a></li> + <li><a href="/fr/docs/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a></li> </ul> <p>{{ languages( {"zh-cn": "zh-cn/DOM/window.onpopstate" } ) }}</p> diff --git a/files/fr/web/api/windoworworkerglobalscope/index.html b/files/fr/web/api/windoworworkerglobalscope/index.html index 749188112c..3e31d88c6c 100644 --- a/files/fr/web/api/windoworworkerglobalscope/index.html +++ b/files/fr/web/api/windoworworkerglobalscope/index.html @@ -18,14 +18,13 @@ translation_of: Web/API/WindowOrWorkerGlobalScope <p>Le mixin <strong><code>WindowOrWorkerGlobalScope</code></strong> décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.</p> <div class="note"> -<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type <code>WindowOrWorkerGlobalScope</code>.</p> +<p><strong>Note :</strong> <code>WindowOrWorkerGlobalScope</code> est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type <code>WindowOrWorkerGlobalScope</code>.</p> </div> <h2 id="Propriétés">Propriétés</h2> <p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p> -<div id="Properties"> <dl> <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.</dd> @@ -36,7 +35,6 @@ translation_of: Web/API/WindowOrWorkerGlobalScope <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> <dd>Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.</dd> </dl> -</div> <h2 id="Méthodes">Méthodes</h2> diff --git a/files/fr/web/api/worker/index.html b/files/fr/web/api/worker/index.html index 9bfd4f6de4..a77f47cf51 100644 --- a/files/fr/web/api/worker/index.html +++ b/files/fr/web/api/worker/index.html @@ -13,23 +13,23 @@ translation_of: Web/API/Worker --- <p>{{APIRef("Web Workers API")}}</p> -<p>L'interface <strong>Worker</strong> de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p> +<p>L'interface <strong>Worker</strong> de l'<a href="/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p> <p>Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">Les workers imbriqués ne sont pas encore implémentés dans WebKit</a>).</p> -<p>De plus les workers peuvent utiliser <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p> +<p>De plus les workers peuvent utiliser <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p> <p>Toutes les<a href="/fr/DOM/Worker/Functions_available_to_workers"> interfaces et toutes les fonctions</a> ne seront pas disponibles pour le script associé au worker.</p> -<div class="blockIndicator note"> -<p>Dans firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p> +<div class="note"> +<p><strong>Note :</strong> Dans Firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p> </div> <h2 id="Constructeurs">Constructeurs</h2> <dl> <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> - <dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="https://developer.mozilla.org/fr/docs/Web/API/Blob">Blobs</a>.</dd> + <dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="/fr/docs/Web/API/Blob">Blobs</a>.</dd> </dl> <h2 id="Propriétés">Propriétés</h2> @@ -81,15 +81,15 @@ translation_of: Web/API/Worker <p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> monWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> premier <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#numero1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var monWorker = new Worker("worker.js"); +var premier = document.querySelector('#numero1'); -premier<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - monWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[premiere</span><span class="punctuation token">.</span>valeur<span class="punctuation token">, deuxieme</span><span class="punctuation token">.</span>valeur<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +premier.onchange = function() { + monWorker.postMessage([premiere.valeur, deuxieme.valeur]); + console.log('Message envoyé au worker'); +}</pre> -<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p> +<p>Pour un exemple complet, voir <a href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p> <h2 id="Spécifications">Spécifications</h2> @@ -125,8 +125,8 @@ premier<span class="punctuation token">.</span>onchange <span class="operator to <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a class="internal" href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="Utiliser les web Worker">Utiliser les web Worker</a></li> + <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utiliser les web Worker</a></li> <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li> - <li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li> + <li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li> <li>Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.</li> </ul> diff --git a/files/fr/web/api/worker/onmessage/index.html b/files/fr/web/api/worker/onmessage/index.html index c380d76883..802fc4771e 100644 --- a/files/fr/web/api/worker/onmessage/index.html +++ b/files/fr/web/api/worker/onmessage/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/Worker/onmessage <p>La propriété <strong><code>onmessage</code></strong> de l'interface {{domxref("Worker")}} représente un {{event("Event_handlers", "event handler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).</p> <div class="note"> -<p><strong>Remarque </strong>: le contenu du message est fourni par la propriété <code>data</code> de l'événement {{event("message")}}.</p> +<p><strong>Note :</strong> Le contenu du message est fourni par la propriété <code>data</code> de l'événement {{event("message")}}.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -47,7 +47,7 @@ myWorker.onmessage = function(e) { <p>Remarquez comment dans le script principal, <code>onmessage</code> doit être appelée par <code>myWorker</code>, tandis que dans le script du worker vous avez juste besoin d'appeler <code>onmessage</code> parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).</p> -<p>Pour un exemple complet, consulter notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancez le worker dédié</a>).</p> +<p>Pour un exemple complet, consulter notre <a href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancez le worker dédié</a>).</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html index d8a3e7be93..76ea9d7e7e 100644 --- a/files/fr/web/api/worker/postmessage/index.html +++ b/files/fr/web/api/worker/postmessage/index.html @@ -19,35 +19,34 @@ translation_of: Web/API/Worker/postMessage <dt><em>aMessage</em></dt> <dd>L'objet à envoyer au worker; il va être dans le champ de donnée <code>data</code> dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">clone structuré</a>, qui inclut les références cycliques.</dd> <dt><em>transferList</em> {{optional_inline}}</dt> - <dd>Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</dd> - <dd>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</dd> - <dt> - <h3 id="Retour">Retour</h3> - </dt> + <dd><p>Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</p> + <p>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</p></dd> </dl> +<h3 id="Retour">Retour</h3> + <p>Vide.</p> <h2 id="Exemple">Exemple</h2> <p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (<code>fisrt</code> et <code>second</code>) ont été changés, les évènements {{event("change")}} invoquent <code>postMessage()</code> pour envoyer la valeur des deux entrées au <em>worker</em> courant.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'worker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js">var myWorker = new Worker('worker.js'); -first<span class="punctuation token">.</span><span class="function function-variable token">onchange</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} -second<span class="punctuation token">.</span><span class="function function-variable token">onchange</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +second.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +}</pre> <p>Pour l'exemple en entier, voir <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worder example</a> (<a href="http://mdn.github.io/simple-web-worker/">démonstration</a>).</p> -<div class="blockIndicator note"> -<p><strong>Remarque:</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p> +<div class="note"> +<p><strong>Note :</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p> </div> <h3 id="Exemple_de_transfert">Exemple de transfert</h3> @@ -56,60 +55,60 @@ second<span class="punctuation token">.</span><span class="function function-var <h4 id="Main_thread_code">Main thread code:</h4> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ChromeWorker</span><span class="punctuation token">(</span>self<span class="punctuation token">.</span>path <span class="operator token">+</span> <span class="string token">'myWorker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">handleMessageFromWorker</span><span class="punctuation token">(</span><span class="parameter token">msg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'incoming message from worker, msg:'</span><span class="punctuation token">,</span> msg<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">switch</span> <span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">case</span> <span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">:</span> - <span class="function token">sendMainArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span> - <span class="keyword token">break</span><span class="punctuation token">;</span> - <span class="keyword token">default</span><span class="punctuation token">:</span> - <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> - -myWorker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'message'</span><span class="punctuation token">,</span> handleMessageFromWorker<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// Ok lets create the buffer and send it</span> -<span class="keyword token">var</span> arrBuf <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ArrayBuffer</span><span class="punctuation token">(</span><span class="number token">8</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength pre transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span> - -myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span> - <span class="punctuation token">{</span> - aTopic<span class="punctuation token">:</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">,</span> - aBuf<span class="punctuation token">:</span> arrBuf <span class="comment token">// The array buffer that we passed to the transferrable section 3 lines below</span> - <span class="punctuation token">}</span><span class="punctuation token">,</span> - <span class="punctuation token">[</span> - arrBuf <span class="comment token">// The array buffer we created 9 lines above</span> - <span class="punctuation token">]</span> -<span class="punctuation token">)</span><span class="punctuation token">;</span> - -console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength post transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js'); + +function handleMessageFromWorker(msg) { + console.log('incoming message from worker, msg:', msg); + switch (msg.data.aTopic) { + case 'do_sendMainArrBuff': + sendMainArrBuff(msg.data.aBuf) + break; + default: + throw 'no aTopic on incoming message to ChromeWorker'; + } +} + +myWorker.addEventListener('message', handleMessageFromWorker); + +// Ok lets create the buffer and send it +var arrBuf = new ArrayBuffer(8); +console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength); + +myWorker.postMessage( + { + aTopic: 'do_sendWorkerArrBuff', + aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below + }, + [ + arrBuf // The array buffer we created 9 lines above + ] +); + +console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);</pre> <h4 id="Worker_code">Worker code</h4> -<pre class="brush: js line-numbers language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">msg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">switch</span> <span class="punctuation token">(</span><span class="parameter token">msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">case</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">:</span> - <span class="function token"> sendWorkerArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span> - <span class="keyword token">break</span><span class="punctuation token">;</span> - <span class="keyword token">default</span><span class="punctuation token">:</span> - <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span> +<pre class="brush: js">self.onmessage = function (msg) { + switch (msg.data.aTopic) { + case 'do_sendWorkerArrBuff': + sendWorkerArrBuff(msg.data.aBuf) + break; + default: + throw 'no aTopic on incoming message to ChromeWorker'; + } +} -<span class="keyword token">function</span> <span class="function token">sendWorkerArrBuff</span><span class="punctuation token">(</span><span class="parameter token">aBuf</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'from worker, PRE send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span> +function sendWorkerArrBuff(aBuf) { + console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength); - self<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">{</span>aTopic<span class="punctuation token">:</span><span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">:</span>aBuf<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">[</span>aBuf<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]); - console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'from worker, POST send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> + console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength); +}</pre> <h4 id="Output_logged">Output logged</h4> -<pre class="line-numbers language-html"><code class="language-html">arrBuf.byteLength pre transfer: 8 bootstrap.js:40 +<pre class="brush: html">arrBuf.byteLength pre transfer: 8 bootstrap.js:40 arrBuf.byteLength post transfer: 0 bootstrap.js:42 from worker, PRE send back aBuf.byteLength: 8 myWorker.js:5:2 @@ -117,7 +116,7 @@ from worker, PRE send back aBuf.byteLength: 8 myWorker.js:5:2 incoming message from worker, msg: message { ... } bootstrap.js:20 got back buf in main thread, aBuf.byteLength: 8 bootstrap.js:12 -from worker, POST send back aBuf.byteLength: 0 myWorker.js:7:2</code></pre> +from worker, POST send back aBuf.byteLength: 0 myWorker.js:7:2</pre> <p><code>byteLength</code> passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p> diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html index 662be32858..1448f5eb35 100644 --- a/files/fr/web/api/worker/worker/index.html +++ b/files/fr/web/api/worker/worker/index.html @@ -8,10 +8,10 @@ translation_of: Web/API/Worker/Worker --- <p>{{APIRef("Worker")}}</p> -<p>Le constructeur <code><strong>Worker()</strong></code> crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>.</p> +<p>Le constructeur <code><strong>Worker()</strong></code> crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la <a href="/en/Same_origin_policy_for_JavaScript">same-origin policy</a>.</p> <div class="note"> -<p><strong>Remarque </strong>: il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.</p> +<p><strong>Note :</strong> il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -30,7 +30,7 @@ translation_of: Web/API/Worker/Worker <ul> <li><code>type</code>: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être <code>classic</code> ou <code>module</code>. Si cette prpriété n'est pas définie, la valeur sera <code>classic</code>.</li> <li><code>credentials</code>: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le <em>worker</em>. Les valeurs peuvent être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. </dfn>Si cette propriété n'est pas définie, ou que type est défini à <code>classic</code>, la valeur sera <code>classic</code>.</li> - <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li> + <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.</li> </ul> </dd> </dl> @@ -54,7 +54,7 @@ first.onchange = function() { console.log('Message envoyé au worker'); }</pre> -<p>Pour un exemple complet, consultez notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié </a>(<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</p> +<p>Pour un exemple complet, consultez notre <a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié </a>(<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</p> <h2 id="Spécifications">Spécifications</h2> @@ -75,12 +75,10 @@ first.onchange = function() { <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - - <p>{{Compat("api.Worker.Worker")}}</p> <div class="blockIndicator note"> -<p><strong>Remarque:</strong> Un navigateur peut indiquer avoir un support complet de <code>Worker()</code> même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers <em>worker</em> écrit comme des modules. Sans ces suppports, les fichiers <em>workers</em> écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.</p> +<p><strong>Note :</strong> Un navigateur peut indiquer avoir un support complet de <code>Worker()</code> même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers <em>worker</em> écrit comme des modules. Sans ces suppports, les fichiers <em>workers</em> écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.</p> </div> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/workerglobalscope/console/index.html b/files/fr/web/api/workerglobalscope/console/index.html index f045e26b62..e60d13bf38 100644 --- a/files/fr/web/api/workerglobalscope/console/index.html +++ b/files/fr/web/api/workerglobalscope/console/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/WorkerGlobalScope/console <p>Si vous appelez <code>console.log()</code> depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez <code>console.log()</code> depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.</p> -<h2 id="Specifications" name="Specifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <p>Ne fait pas encore parti d'une spécification.</p> diff --git a/files/fr/web/api/workerglobalscope/dump/index.html b/files/fr/web/api/workerglobalscope/dump/index.html index 8a6d9e31f2..9d06cf02d9 100644 --- a/files/fr/web/api/workerglobalscope/dump/index.html +++ b/files/fr/web/api/workerglobalscope/dump/index.html @@ -5,8 +5,8 @@ translation_of: Web/API/WorkerGlobalScope/dump --- <div>{{APIRef("Web Workers API")}}</div> -<div class="blockIndicator warning"> -<p><span class="pl-s1"><span class="pl-s">Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</span></span></p> +<div class="warning"> +<p><strong>Attention :</strong> Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</p> </div> <p>La méthode <code><strong>dump()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers <code>stdout</code> — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les <em>worker</em>s.</p> diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.html b/files/fr/web/api/workerglobalscope/importscripts/index.html index 28ad1782e6..eb47eac872 100644 --- a/files/fr/web/api/workerglobalscope/importscripts/index.html +++ b/files/fr/web/api/workerglobalscope/importscripts/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts <pre class="brush: js">self.importScripts('foo.js'); self.importScripts('foo.js', 'bar.js', ...);</pre> -<h3 id="Specifications" name="Specifications">Paramètres</h3> +<h3 id="Specifications">Paramètres</h3> <p>Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.</p> diff --git a/files/fr/web/api/workerglobalscope/index.html b/files/fr/web/api/workerglobalscope/index.html index e6e5061e9d..946df930aa 100644 --- a/files/fr/web/api/workerglobalscope/index.html +++ b/files/fr/web/api/workerglobalscope/index.html @@ -103,11 +103,11 @@ translation_of: Web/API/WorkerGlobalScope <p>Vous n'accéderez pas à <code>WorkerGlobalScope</code> directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet <code>navigator</code> de l'étendue du worker en utilisant les deux lignes suivantes:</p> -<pre class="brush: js notranslate">importScripts('foo.js'); +<pre class="brush: js">importScripts('foo.js'); console.log(navigator);</pre> <div class="note"> -<p><strong>Note</strong>: Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de <code>WorkerGlobalScope</code>, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.</p> +<p><strong>Note :</strong> Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de <code>WorkerGlobalScope</code>, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/workerglobalscope/location/index.html b/files/fr/web/api/workerglobalscope/location/index.html index 9406fa3aeb..cdda4cbfc8 100644 --- a/files/fr/web/api/workerglobalscope/location/index.html +++ b/files/fr/web/api/workerglobalscope/location/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/location <pre class="brush: js">var locationObj = self.location;</pre> -<h3 id="Specifications" name="Specifications">Valeur de retour</h3> +<h3 id="Specifications">Valeur de retour</h3> <p>Un objet {{domxref("WorkerLocation")}}.</p> @@ -38,7 +38,7 @@ translation_of: Web/API/WorkerGlobalScope/location <p>Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.</p> <div class="note"> -<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p> +<p><strong>Note :</strong> Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/workerglobalscope/navigator/index.html b/files/fr/web/api/workerglobalscope/navigator/index.html index b077c9d3be..f73f000d03 100644 --- a/files/fr/web/api/workerglobalscope/navigator/index.html +++ b/files/fr/web/api/workerglobalscope/navigator/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/navigator <pre class="brush: js">var navigatorObj = self.navigator;</pre> -<h3 id="Specifications" name="Specifications">Valeur de retour</h3> +<h3 id="Specifications">Valeur de retour</h3> <p>Un objet {{domxref("WorkerNavigator")}}.</p> @@ -37,7 +37,7 @@ translation_of: Web/API/WorkerGlobalScope/navigator <p>Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.</p> <div class="note"> -<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p> +<p><strong>Note :</strong> Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p> </div> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/workerglobalscope/self/index.html b/files/fr/web/api/workerglobalscope/self/index.html index 6260113f9d..8adef5a5f2 100644 --- a/files/fr/web/api/workerglobalscope/self/index.html +++ b/files/fr/web/api/workerglobalscope/self/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/WorkerGlobalScope/self <pre class="brush: js">var selfRef = self;</pre> -<h3 id="Specifications" name="Specifications">Valeur</h3> +<h3 id="Specifications">Valeur</h3> <p>Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).</p> diff --git a/files/fr/web/api/xmldocument/async/index.html b/files/fr/web/api/xmldocument/async/index.html index 436e3e5215..d9f8142761 100644 --- a/files/fr/web/api/xmldocument/async/index.html +++ b/files/fr/web/api/xmldocument/async/index.html @@ -28,7 +28,7 @@ xmlDoc.async = false; xmlDoc.onload = loadXMLData; xmlDoc.load('querydata.xml');</pre> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load & Save module</a></li> @@ -37,6 +37,6 @@ xmlDoc.load('querydata.xml');</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li> + <li><a href="/fr/docs/XML_dans_Mozilla">XML in Mozilla</a></li> <li>{{domxref("document.load")}}</li> </ul> diff --git a/files/fr/web/api/xmldocument/load/index.html b/files/fr/web/api/xmldocument/load/index.html index ec92ef69b9..5bd175f927 100644 --- a/files/fr/web/api/xmldocument/load/index.html +++ b/files/fr/web/api/xmldocument/load/index.html @@ -14,11 +14,10 @@ translation_of: Web/API/XMLDocument/load --- <p>{{APIRef("DOM")}}</p> -<p><code>document.load()</code> fait partie d'une ancienne version du module W3C <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">DOM Level 3 Load & Save</a>. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez <a href="/fr/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> à la place).</p> +<p><code>document.load()</code> fait partie d'une ancienne version du module W3C <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">DOM Level 3 Load & Save</a>. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> à la place).</p> -<h2 id="Examples" name="Examples">Exemples</h2> +<h2 id="Examples">Exemples</h2> -<div style="overflow: hidden;"> <pre>var docXml = document.implementation.createDocument("", "test", null); function documentCharge (e) { @@ -27,11 +26,10 @@ function documentCharge (e) { xmlDoc.addEventListener("load", documentCharge, false); xmlDoc.load('querydata.xml');</pre> -</div> <p>{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)</p> -<h2 id="Specification" name="Specification">Spécification</h2> +<h2 id="Specification">Spécification</h2> <ul> <li><a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">Old W3C Working Draft of the DOM Level 3 Load & Save module</a></li> @@ -41,9 +39,9 @@ xmlDoc.load('querydata.xml');</pre> <p>{{Compat("api.XMLDocument.load")}}</p> -<h2 id="See_also" name="See_also">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/API/Document/async" title="DOM/document.async">document.async</a></li> - <li><a href="/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML dans Mozilla</a></li> + <li><a href="/fr/docs/Web/API/Document/async">document.async</a></li> + <li><a href="/fr/docs/XML_dans_Mozilla">XML dans Mozilla</a></li> </ul> diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html index cc85c33e23..2c9738082e 100644 --- a/files/fr/web/api/xmlhttprequest/abort_event/index.html +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.html @@ -10,7 +10,7 @@ original_slug: Web/Events/abort_(ProgressEvent) <dl> <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> + <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/progress-events/">Progress</a></dd> <dt style="float: left; text-align: right; width: 120px;">Interface</dt> <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> @@ -86,5 +86,5 @@ original_slug: Web/Events/abort_(ProgressEvent) <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Surveillance de la progression</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Surveillance de la progression</a></li> </ul> diff --git a/files/fr/web/api/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/index.html index 8494aac97d..3fed67ac6e 100644 --- a/files/fr/web/api/xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/index.html @@ -13,7 +13,9 @@ translation_of: Web/API/XMLHttpRequest --- <div>{{DefaultAPISidebar("XMLHttpRequest")}}</div> -<p><span class="seoSummary">Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</span> <code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p> +<p>Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</p> + +<p><code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p> <p>{{InheritanceDiagram(650, 150)}}</p> @@ -33,23 +35,23 @@ translation_of: Web/API/XMLHttpRequest <p><em>Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.</em></p> <dl> - <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> + <dt>{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut <code>readyState</code> change.</dd> - <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> <dd>L'état de la requête sous la forme d'un <code>unsigned short</code>.</dd> <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> <dd>Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.</dd> - <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> <dd>Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur <code>null</code> si la requête a échoué ou n'a pas encore été envoyée.</dd> - <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> + <dt>{{domxref("XMLHttpRequest.responseType")}}</dt> <dd>Une valeur parmi une liste qui définit le type de réponse.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> <dd>L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> <dd>Un objet {{domxref("Document")}} qui contient la réponse de la requête ou <code>null</code> si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les <em>workers</em>.</dd> - <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> <dd>Une valeur numérique <code>unsigned short</code> qui décrit le statut de la réponse à la requête.</dd> - <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> <dd>Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("<code>200 OK</code>" plutôt que "<code>200</code>" par exemple).</dd> </dl> @@ -58,13 +60,13 @@ translation_of: Web/API/XMLHttpRequest </div> <dl> - <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> + <dt>{{domxref("XMLHttpRequest.timeout")}}</dt> <dd>Un entier <code>unsigned long</code> qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.</dd> - <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> + <dt>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}</dd> - <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> + <dt>{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> <dd>Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'<em>upload</em>.</dd> - <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> + <dt>{{domxref("XMLHttpRequest.withCredentials")}}</dt> <dd>Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes <code>Access-Control</code> d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.</dd> </dl> @@ -119,11 +121,13 @@ translation_of: Web/API/XMLHttpRequest <dd>Initialise l'objet depuis pour une utilisation depuis du code C++.</dd> </dl> -<div class="warning"><strong>Attention !</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</div> +<div class="warning"> + <p><strong>Attention :</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</p> +</div> <dl> <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> - <dd>Initialise une requête depuis du code natif. Voir la méthode <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd> + <dd>Initialise une requête depuis du code natif. Voir la méthode <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd> <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> <dd>Une variante de <code>send()</code> afin d'envoyer des données binaires.</dd> </dl> @@ -183,8 +187,8 @@ translation_of: Web/API/XMLHttpRequest <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Introduction à AJAX</a></li> <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Manipuler le HTML avec XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/Fetch_API" title="Fetch API">L'API Fetch</a></li> + <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li> </ul> </li> - <li><a class="external" href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li> + <li><a href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li> </ul> diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html index 27916885ff..f1b8c7a69d 100644 --- a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html +++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html @@ -5,13 +5,13 @@ translation_of: Web/API/XMLHttpRequest/onreadystatechange --- <div>{{APIRef}}</div> -<p>Un <a href="/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p> +<p>Un <a href="/en-US/docs/Web/API/EventHandler"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p> <div class="warning"> -<p><strong>Attention:</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p> +<p><strong>Attention :</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p> </div> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre> @@ -21,7 +21,7 @@ translation_of: Web/API/XMLHttpRequest/onreadystatechange <li><code><em>callback</em></code> est la fonction exécutée lorsque <code>readyState</code> change.</li> </ul> -<h2 id="Example" name="Example">Exemple</h2> +<h2 id="Example">Exemple</h2> <pre class="brush: js">var xhr = new XMLHttpRequest(), method = "GET", diff --git a/files/fr/web/api/xmlhttprequest/open/index.html b/files/fr/web/api/xmlhttprequest/open/index.html index 335017f4eb..567982586c 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.html +++ b/files/fr/web/api/xmlhttprequest/open/index.html @@ -7,7 +7,9 @@ translation_of: Web/API/XMLHttpRequest/open <p>La méthode <code><strong>open()</strong></code> de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.</p> -<div class="note"><strong>Note:</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}.</div> +<div class="note"> + <p><strong>Note :</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}.</p> +</div> <h2 id="Syntaxe">Syntaxe</h2> @@ -26,7 +28,9 @@ translation_of: Web/API/XMLHttpRequest/open <dd>Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.</dd> <dt><code>async</code> {{optional_inline}}</dt> <dd>Un booléen optionnel par défaut à <code>true</code>, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à <code>false</code>, la méthode <code>send()</code> ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à <code>true</code>, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut <code>multipart</code> est sur "true" aussi ou une exception sera levée. - <div class="note"><strong>Note:</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}s.</div> + <div class="note"> + <p><strong>Note :</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}.</p> + </div> </dd> <dt><code>user</code> {{optional_inline}}</dt> <dd>Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd> @@ -60,6 +64,6 @@ translation_of: Web/API/XMLHttpRequest/open <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li> <li>Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}</li> </ul> diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.html b/files/fr/web/api/xmlhttprequest/readystate/index.html index d56cdaa142..c500f0ede1 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.html +++ b/files/fr/web/api/xmlhttprequest/readystate/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/XMLHttpRequest/readyState --- <p>{{APIRef('XMLHttpRequest')}}</p> -<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr title="XMLHttpRequest">XHR</abbr> existe dans l'un des états suivants :</p> +<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr>XHR</abbr> existe dans l'un des états suivants :</p> <table class="standard-table"> <tbody> @@ -56,12 +56,12 @@ translation_of: Web/API/XMLHttpRequest/readyState </dl> <div class="note"> -<p>Les noms des États sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p> +<p><strong>Note :</strong> Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p> </div> <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); console.log('UNSENT', xhr.readyState); // readyState will be 0 xhr.open('GET', '/api', true); diff --git a/files/fr/web/api/xmlhttprequest/response/index.html b/files/fr/web/api/xmlhttprequest/response/index.html index 3a8b84b5e0..afbad2c4f1 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.html +++ b/files/fr/web/api/xmlhttprequest/response/index.html @@ -135,7 +135,7 @@ function load(url, callback) { <li><a href="/fr/docs/Web/Guide/AJAX/Getting_Started">Ajax — Pour commencer</a></li> <li><a href="/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li> <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li> - <li><a href="/fr/docs/Web/API/Fetch_API" title="Fetch API">Fetch API</a></li> + <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li> </ul> </li> <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.html b/files/fr/web/api/xmlhttprequest/responsetext/index.html index 3074a9d6b7..e9df4fd81a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.html +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.html @@ -7,11 +7,11 @@ translation_of: Web/API/XMLHttpRequest/responseText <div>{{APIRef('XMLHttpRequest')}}</div> -<p><span class="seoSummary">La lecture seule {{domxref("XMLHttpRequest")}} propriété <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</span></p> +<p>La lecture seule {{domxref("XMLHttpRequest")}} propriété <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</p> <h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre> +<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre> <h3 id="Value">Value</h3> @@ -30,7 +30,7 @@ translation_of: Web/API/XMLHttpRequest/responseText <h2 id="Example">Example</h2> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); // If specified, responseType must be empty string or "text" diff --git a/files/fr/web/api/xmlhttprequest/send/index.html b/files/fr/web/api/xmlhttprequest/send/index.html index 3f4881c502..26f77bf14a 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.html +++ b/files/fr/web/api/xmlhttprequest/send/index.html @@ -17,7 +17,7 @@ translation_of: Web/API/XMLHttpRequest/send --- <div>{{APIRef('XMLHttpRequest')}}</div> -<p><span class="seoSummary">La méthode {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements.</span>En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p> +<p>La méthode {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p> <p><code>send()</code> accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre <code>body</code> est ignoré et le corps de la requête est fixé à <code>null</code>.</p> @@ -25,7 +25,7 @@ translation_of: Web/API/XMLHttpRequest/send <h2 id="Syntaxe">Syntaxe</h2> -<pre class="syntaxbox notranslate"><var>XMLHttpRequest</var>.send(<var>body</var>) +<pre class="syntaxbox"><var>XMLHttpRequest</var>.send(<var>body</var>) </pre> <h3 id="Paramètres">Paramètres</h3> @@ -70,7 +70,7 @@ translation_of: Web/API/XMLHttpRequest/send <h2 id="Exemple_GET">Exemple: GET</h2> -<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest(); +<pre class="brush: js"><code>var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.onload = function () { @@ -86,7 +86,7 @@ xhr.send(null); <h2 id="Example_POST">Example: POST</h2> -<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest(); +<pre class="brush: js"><code>var xhr = new XMLHttpRequest(); xhr.open("POST", '/server', true); //Envoie les informations du header adaptées avec la requête @@ -128,6 +128,6 @@ xhr.send("foo=bar&lorem=ipsum"); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li> <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li> </ul> diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html index 2f556dfb2b..ed3689fd8d 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader <p>Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p> <div class="note"> -<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP <u>coté serveur</u>.</p> +<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.</p> </div> <h2 id="Syntax">Syntax</h2> diff --git a/files/fr/web/api/xmlhttprequest/status/index.html b/files/fr/web/api/xmlhttprequest/status/index.html index 059a9a8aae..a6fe81eda6 100644 --- a/files/fr/web/api/xmlhttprequest/status/index.html +++ b/files/fr/web/api/xmlhttprequest/status/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/XMLHttpRequest/status <h2 id="Exemple">Exemple</h2> -<pre class="brush: js notranslate">var xhr = new XMLHttpRequest(); +<pre class="brush: js">var xhr = new XMLHttpRequest(); console.log('UNSENT: ', xhr.status); xhr.open('GET', '/server'); diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.html b/files/fr/web/api/xmlhttprequest/timeout/index.html index 18e4dddb5d..e3dc91ab6b 100644 --- a/files/fr/web/api/xmlhttprequest/timeout/index.html +++ b/files/fr/web/api/xmlhttprequest/timeout/index.html @@ -14,9 +14,13 @@ translation_of: Web/API/XMLHttpRequest/timeout <p>La propriété <code><strong>XMLHttpRequest.timeout</strong></code> est un <code>unsigned long</code> (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de <em>timeout</em>. Lorsqu'une requête expire, un évènement <code><a href="/fr/docs/Web/API/XMLHttpRequest/timeout_event">timeout</a></code> est déclenché.</p> -<div class="note"><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</p> +</div> -<div class="note"><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</div> +<div class="note"> + <p><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</p> +</div> <h2 id="Exemples">Exemples</h2> diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html index 3590d71a4c..a2d850ed5d 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -14,9 +14,8 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- -<p> </p> -<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p> +<p><a href="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le <a href="/en-US/docs/HTTP/HTTP_response_codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p> <pre class="brush: js">function reqListener () { console.log(this.responseText); @@ -29,36 +28,40 @@ oReq.send();</pre> <h2 id="Types_de_requêtes">Types de requêtes</h2> -<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel <span style="font-family: courier new,andale mono,monospace; line-height: normal;">async</span> (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est <span style="font-family: courier new,andale mono,monospace; line-height: normal;">true</span> ou non spécifié, l'objet <span style="font-family: courier new,andale mono,monospace; line-height: normal;">XMLHttpRequest</span> est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" style="text-decoration: underline;" title="Synchronous and Asynchronous Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p> +<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p> -<div class="note"><strong>Note:</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</div> +<div class="note"> + <p><strong>Note :</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</p> +</div> <h2 id="Gérer_les_réponses">Gérer les réponses</h2> -<p><span style="line-height: 1.5;">Il existe plusieurs types </span><a href="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a><span style="line-height: 1.5;"> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</span></p> +<p>Il existe plusieurs types <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</p> <h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3> <p>Si vous utlisez <code>XMLHttpRequest </code>pour obtenir le contenu d'un fichier XML distant, la propriété <code>responseXML </code>sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :</p> <ol> - <li>Utiliser <a href="/en-US/docs/XPath" title="XPath">XPath</a> pour localiser des parties.</li> - <li>Utiliser <a href="/en-US/docs/JXON" title="JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li> - <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li> - <li>Utiliser <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> + <li>Utiliser <a href="/en-US/docs/XPath">XPath</a> pour localiser des parties.</li> + <li>Utiliser <a href="/en-US/docs/JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li> + <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li> + <li>Utiliser <a href="/en-US/docs/XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> </ol> <h3 id="Analyser_et_manipuler_une_propriété_responseText_contenant_un_document_HTML">Analyser et manipuler une propriété <code>responseText</code> contenant un document HTML</h3> -<div class="note"><strong>Note:</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</p> +</div> <p>Si vous utilisez <code>XMLHttpRequest</code> pour récupérer le contenu d'une page HTML distante, la propriété <code>responseText</code> est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :</p> <ol> <li>Utiliser la propriété <code>XMLHttpRequest.responseXML</code>.</li> <li>Injecter le contenu dans le body d'un <a href="/en-US/docs/Web/API/DocumentFragment">fragment de document</a> via <code>fragment.body.innerHTML</code> et traverser le DOM du fragment.</li> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans <span style="font-family: courier new,andale mono,monospace; line-height: normal;">responseText</span>. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> + <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li> </ol> <h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2> @@ -85,7 +88,7 @@ oReq.onload = function(e) { oReq.send(); </pre> -<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p> +<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p> <h2 id="Surveiller_la_progression">Surveiller la progression</h2> @@ -128,7 +131,9 @@ function transferCanceled(evt) { <p>Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une <code>XMLHttpRequest</code>.</p> -<div class="note"><strong>Note:</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</div> +<div class="note"> + <p><strong>Note :</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</p> +</div> <p>Le gestionnaire de progression, spécifié par la fonction <code>updateProgress()</code> dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs <code>total</code> et <code>loaded</code>. Cependant, si le champ <code>lengthComputable</code> est false, la taille totale est inconnue et sera zéro.</p> @@ -144,16 +149,20 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); </pre> -<div class="note"><strong>Note:</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</div> +<div class="note"> + <p><strong>Note :</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</p> +</div> -<div class="note"><strong>Note</strong>: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div> +<div class="note"> + <p><strong>Note :</strong> Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</p> +</div> <div class="note"> -<p><strong>Note:</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p> +<p><strong>Note :</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p> </div> <div class="note"> -<p><strong>Note:</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p> +<p><strong>Note :</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p> </div> <p>Une fonction peut aussi être appelée peu importe le status de fin de la requête (<code>abort</code>, <code>load</code>, ou <code>error</code>) en utilisant l'évènement <code>loadend</code> :</p> @@ -173,15 +182,15 @@ function loadEnd(e) { <ul> <li>n'utiliser rien de plus qu'AJAX</li> - <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> + <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li> </ul> -<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br> +<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br> La <strong>première solution</strong> est plutôt la plus complexe, mais se prête à être plus flexible et puissante.</p> <h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3> -<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader" style="line-height: 1.5;" title="/en-US/docs/DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.5;">, mais seulement </span><strong style="line-height: 1.5;">si vous voulez envoyer un fichier ou plus</strong><span style="line-height: 1.5;">.</span></p> +<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader"><code >FileReader</code></a>, mais seulement <strong>si vous voulez envoyer un fichier ou plus</strong>.</p> <h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4> @@ -194,7 +203,7 @@ function loadEnd(e) { <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li> </ul> -<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">foo</code><span style="line-height: 1.5;"> et </span><code style="font-size: 14px;">baz</code><span style="line-height: 1.5;">. Si vous utilisez la méthode </span><code style="font-size: 14px;">POST</code><span style="line-height: 1.5;">, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</span></p> +<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées <code >foo</code> et <code >baz</code>. Si vous utilisez la méthode <code >POST</code>, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</p> <ul> <li> @@ -216,7 +225,7 @@ The second line.</pre> <li> <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p> - <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839 + <pre>Content-Type: multipart/form-data; boundary=---------------------------314911788813839 -----------------------------314911788813839 Content-Disposition: form-data; name="foo" @@ -240,7 +249,7 @@ The second line. <p>Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez <em>tout</em> dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en <em>pure</em> AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un <strong>framework complet (mais tout de même didactique)</strong>, qui est capable d'utiliser les quatres méthodes de <em>submit</em> , et aussi de <strong>transférer des fichiers</strong>:</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> + <pre class="brush: html"><!doctype html> <html> <head> @@ -483,9 +492,8 @@ var AJAXSubmit = (function () { </body> </html></pre> -</div> -<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimaliste</span></span></em>:</p> +<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em>minimaliste</em>:</p> <pre class="brush: php"><?php /* register.php */ @@ -516,17 +524,22 @@ print_r($_FILES); <pre class="syntaxbox">AJAXSubmit(myForm);</pre> -<div class="note"><strong>Note:</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</div> +<div class="note"> + <p><strong>Note :</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</p> +</div> -<div class="note"><strong>Note:</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div> +<div class="note"> + <p><strong>Note :</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</p> +</div> -<div class="note"><strong>Note:</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</div> +<div class="note"> + <p><strong>Note :</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</p> +</div> <h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3> -<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p> +<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p> -<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> <pre class="brush: html"><!doctype html> <html> <head> @@ -642,9 +655,10 @@ function AJAXSubmit (oFormElement) { </body> </html></pre> -</div> -<div class="note"><strong>Note:</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</div> +<div class="note"> + <p><strong>Note :</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</p> +</div> <h2 id="Récupérer_la_date_de_modification">Récupérer la date de modification</h2> @@ -691,15 +705,15 @@ ifHasChanged("mapage.html", function (nModif, nVisit) { alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); });</pre> -<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified" style="line-height: 1.5;" title="/en-US/docs/Web/API/document.lastModified"><code style="font-size: 14px;">document.lastModified</code></a><span style="line-height: 1.5;">.</span></p> +<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified"><code >document.lastModified</code></a>.</p> <h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2> -<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p> +<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control">Access Control for Cross-Site Requests</a> (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p> <h2 id="Contourner_le_cache">Contourner le cache</h2> -<p><span style="line-height: 1.572;">Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :</span></p> +<p>Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :</p> <pre>http://foo.com/bar.html -> http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345 @@ -724,11 +738,11 @@ oReq.send(null);</pre> <h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3> -<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code style="font-size: 14px;">status=0</code> et <code style="font-size: 14px;">statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code style="font-size: 14px;"><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="line-height: 1.5; text-decoration: underline; outline: dotted 1px; outline-offset: 0pt;">l'origine <code style="font-size: 14px;">XMLHttpRequest</code> </a><span style="line-height: 1.5;"> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">. Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement </span><span style="line-height: 1.5;">"activate" </span><span style="line-height: 1.5;">de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</span></p> +<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code >status=0</code> et <code >statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code ><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin">l'origine <code >XMLHttpRequest</code> </a> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</p> <h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2> -<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p> +<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p> <pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); </pre> @@ -743,14 +757,14 @@ var oReq = new XMLHttpRequest();</pre> <h2 id="Voir_aussi">Voir aussi</h2> <ol> - <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li> - <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li> - <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> + <li><a href="/en-US/docs/AJAX/Getting_Started">MDN AJAX introduction</a></li> + <li><a href="/en-US/docs/HTTP_access_control">HTTP access control</a></li> + <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li> <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li> <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li> + <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li> </ol> diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html index 3a5f635aca..0e708d3463 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest --- <div>{{draft}}{{APIRef('XMLHttpRequest')}}</div> -<p><span class="seoSummary">Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</span></p> +<p>Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</p> -<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> +<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> <h2 id="Syntax">Syntax</h2> @@ -36,7 +36,7 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest <h2 id="La_syntaxe_de_Firefox_non-standard">La syntaxe de Firefox non-standard</h2> -<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des specifications de XMLHttpRequest.</p> +<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des specifications de XMLHttpRequest.</p> <pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre> @@ -47,7 +47,7 @@ translation_of: Web/API/XMLHttpRequest/XMLHttpRequest <dd>Il y a deux drapeaux qui peuvent être activés <dl> <dt><code>mozAnon</code></dt> - <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd> + <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd> <dt><code>mozSystem</code></dt> <dd>Booléen: Mettre ce drapeau à <code>true</code> autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. <em>Paramètre requis </em>:<em> <code>mozAnon: true</code>, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox</em></dd> </dl> diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.html b/files/fr/web/api/xmlhttprequesteventtarget/index.html index 1ab8136bcc..dc5b1c1185 100644 --- a/files/fr/web/api/xmlhttprequesteventtarget/index.html +++ b/files/fr/web/api/xmlhttprequesteventtarget/index.html @@ -61,5 +61,5 @@ translation_of: Web/API/XMLHttpRequestEventTarget <ul> <li>{{ domxref("XMLHttpRequest") }}</li> - <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> </ul> diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html index 33c90dabc2..8a6afa0393 100644 --- a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html +++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html @@ -9,9 +9,9 @@ translation_of: Web/API/XMLHttpRequestEventTarget/onload <p>The <strong><code>XMLHttpRequestEventTarget.onload</code></strong> is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.</p> -<h2 id="Syntax" name="Syntax">Syntax</h2> +<h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox notranslate"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre> +<pre class="syntaxbox"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre> <h3 id="Values">Values</h3> @@ -19,9 +19,9 @@ translation_of: Web/API/XMLHttpRequestEventTarget/onload <li><code><em>callback</em></code> is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of <em>this</em> (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.</li> </ul> -<h2 id="Example" name="Example">Example</h2> +<h2 id="Example">Example</h2> -<pre class="brush: js notranslate">var xmlhttp = new XMLHttpRequest(), +<pre class="brush: js">var xmlhttp = new XMLHttpRequest(), method = 'GET', url = 'https://developer.mozilla.org/'; diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html index 6662ab7046..00a7edf328 100644 --- a/files/fr/web/api/xmlserializer/index.html +++ b/files/fr/web/api/xmlserializer/index.html @@ -6,12 +6,14 @@ tags: translation_of: Web/API/XMLSerializer original_slug: XMLSerializer --- -<p> </p> + <p><code>XMLSerializer</code> sert à convertir des sous-arborescence DOM ou des documents DOM en texte. <code>XMLSerializer</code> est accessible aux scripts sans privilèges.</p> + <div class="note"> - <p><code>XMLSerializer</code> sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.</p> + <p><strong>Note :</strong> <code>XMLSerializer</code> sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.</p> </div> -<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3> + +<h3 id="M.C3.A9thodes">Méthodes</h3> <dl> <dt> serializeToString</dt> @@ -22,7 +24,7 @@ original_slug: XMLSerializer <dd> La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.</dd> </dl> -<h3 id="Exemple" name="Exemple">Exemple</h3> +<h3 id="Exemple">Exemple</h3> <pre class="eval"> var s = new XMLSerializer(); var d = document; var str = s.serializeToString(d); @@ -44,12 +46,12 @@ original_slug: XMLSerializer }; s.serializeToStream(document, stream, "UTF-8"); </pre> -<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3> +<h3 id="Voir_.C3.A9galement">Voir également</h3> <ul> - <li><a class="external" href="http://www.xulplanet.com/references/objref/XMLSerializer.html">Reference (en)</a> (XULPlanet)</li> + <li><a href="http://www.xulplanet.com/references/objref/XMLSerializer.html">Reference (en)</a> (XULPlanet)</li> <li><a href="fr/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> - <li><a class="external" href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and serializing XML (en)</a> (XULPlanet)</li> - <li><a class="external" href="http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees">Parsing and serializing XML (en)</a> (MozillaZine)</li> + <li><a href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and serializing XML (en)</a> (XULPlanet)</li> + <li><a href="http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees">Parsing and serializing XML (en)</a> (MozillaZine)</li> <li><a href="fr/XMLHttpRequest">XMLHttpRequest</a></li> <li><a href="fr/DOMParser">DOMParser</a></li> </ul> diff --git a/files/fr/web/api/xpathexpression/index.html b/files/fr/web/api/xpathexpression/index.html index 8c39da4897..7a6d6ce42d 100644 --- a/files/fr/web/api/xpathexpression/index.html +++ b/files/fr/web/api/xpathexpression/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/XPathExpression <p>Une <code>XPathExpression</code> est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode <code>evaluate()</code> qui peut être utilisée pour exécuter le XPath compilé.</p> -<h2 id="Methods" name="Methods">Méthodes</h2> +<h2 id="Methods">Méthodes</h2> <ul> <li>evaluate (<code>contextNode</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li> diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html index 8b5cab35e0..fb6884c046 100644 --- a/files/fr/web/api/xsltprocessor/basic_example/index.html +++ b/files/fr/web/api/xsltprocessor/basic_example/index.html @@ -12,7 +12,7 @@ original_slug: XSLT_dans_Gecko/Exemple_basique <li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> </ol><p></p> -<h2 id="Exemple_basique" name="Exemple_basique">Exemple basique</h2> +<h2 id="Exemple_basique">Exemple basique</h2> <p>Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.</p> diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.html b/files/fr/web/api/xsltprocessor/browser_differences/index.html index 7c2bff665e..5ab86ed667 100644 --- a/files/fr/web/api/xsltprocessor/browser_differences/index.html +++ b/files/fr/web/api/xsltprocessor/browser_differences/index.html @@ -12,10 +12,10 @@ original_slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs <li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> </ol><p></p> -<h2 id="Diff.C3.A9rences_entre_les_navigateurs" name="Diff.C3.A9rences_entre_les_navigateurs">Différences entre les navigateurs</h2> +<h2 id="Diff.C3.A9rences_entre_les_navigateurs">Différences entre les navigateurs</h2> <ul> - <li>Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation <a class="external" href="http://www.w3.org/TR/xslt">XSLT 1.0 (en)</a> du W3C.</li> + <li>Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation <a href="http://www.w3.org/TR/xslt">XSLT 1.0 (en)</a> du W3C.</li> <li>IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.</li> <li>Netscape 6.x ne supporte que partiellement XSLT 1.0.</li> </ul> diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.html b/files/fr/web/api/xsltprocessor/generating_html/index.html index ff41c66fbe..59286d20d5 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.html +++ b/files/fr/web/api/xsltprocessor/generating_html/index.html @@ -12,17 +12,17 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML <li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> </ol><p></p> -<h2 id="G.C3.A9n.C3.A9ration_de_HTML" name="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2> +<h2 id="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2> <p>Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.</p> -<p>L'élément <code><body></code> de l'article contient maintenant des éléments HTML (des balises <code><strong></code> et <code><em></code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="<span class="nowiki">http://devedge.netscape.com/2002/de</span>")</code>.</p> +<p>L'élément <code><body></code> de l'article contient maintenant des éléments HTML (des balises <code><strong></code> et <code><em></code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="http://devedge.netscape.com/2002/de")</code>.</p> -<p><small><strong>Figure 2 : fichier XML (example2.xml)<span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">Document XML (example2.xml):</span> <span class="comment"><div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"></span></p> +<p><small><strong>Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source</strong></small> Document XML (example2.xml): <div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"></p> <pre class="eval"><?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> - <myNS:Article xmlns:myNS="<a class="external" href="http://devedge.netscape.com/2002/de" rel="freelink">http://devedge.netscape.com/2002/de</a>"> + <myNS:Article xmlns:myNS="<a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a>"> <myNS:Title>Mon article</myNS:Title> <myNS:Authors> <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author> @@ -37,7 +37,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML <p>La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à <code>HTML</code> à l'aide de l'élément <code>xsl:output</code>. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.</p> -<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> <span class="comment">feuille de style XSL (example2.xsl):</span></p> +<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> feuille de style XSL (example2.xsl):</p> <pre> <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -51,7 +51,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML <p>Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.</p> -<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> <span class="comment">feuille de style XSL (example2.xsl):</span></p> +<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> feuille de style XSL (example2.xsl):</p> <pre> ... <xsl:template match="/"> @@ -92,7 +92,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML <p>Nous avons besoin de trois <code>xsl:template</code> supplémentaires pour parachever l'exemple. Le premier <code>xsl:template</code> est utilisé pour les nœuds <code>Author</code>, alors que le deuxième traite le nœud <code>body</code>. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.</p> -<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> <span class="comment">feuille de style XSL (example2.xsl):</span></p> +<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> feuille de style XSL (example2.xsl):</p> <pre> ... <xsl:template match="myNS:Author"> @@ -121,7 +121,7 @@ original_slug: XSLT_dans_Gecko/Génération_de_HTML <p>La feuille de style XSLT finale est donc :</p> -<p><small><strong>Figure 6 : feuille de style XSLT finale <span class="comment">voir l'exemple | voir le source</span></strong></small> <span class="comment">feuille de style XSL :</span></p> +<p><small><strong>Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source</strong></small> feuille de style XSL :</p> <pre> <?xml version="1.0"?> <xsl:stylesheet version="1.0" diff --git a/files/fr/web/api/xsltprocessor/index.html b/files/fr/web/api/xsltprocessor/index.html index afcd8d40e1..68179a3bce 100644 --- a/files/fr/web/api/xsltprocessor/index.html +++ b/files/fr/web/api/xsltprocessor/index.html @@ -18,20 +18,20 @@ translation_of: Web/API/XSLTProcessor <p>Le constructeur n'a pas de paramètre.</p> -<pre class="syntaxbox notranslate">new XSLTProcessor()</pre> +<pre class="syntaxbox">new XSLTProcessor()</pre> <h2 id="Méthodes">Méthodes</h2> <dl> <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.importStylesheet")}}<code>(</code>{{domxref("Node")}}<code> styleSheet)</code></dt> - <dd>Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation d'élèment résultant</a>; sinon, il doit s'agir d'un élèment <code><xsl:stylesheet></code> ou <code><xsl:transform></code>.</dd> + <dd>Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un <a href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation d'élèment résultant</a>; sinon, il doit s'agir d'un élèment <code><xsl:stylesheet></code> ou <code><xsl:transform></code>.</dd> <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> </code>{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}<code>(</code>{{domxref("Node")}}<code> source, </code>{{domxref("Document")}}<code> owner)</code></dt> <dd>Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.</dd> <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a></code> {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}<code>(</code>{{domxref("Node")}}<code> source)</code></dt> <dd> <p>Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.</p> - <p>L'objet résultant dépend de la <a class="external" href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style :</p> + <p>L'objet résultant dépend de la <a href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style :</p> <table class="standard-table"> <thead> diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html index 707314c789..e98799df65 100644 --- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html @@ -6,18 +6,17 @@ tags: translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla --- -<p> + +<h4 id="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F"> Pourquoi ma feuille de style ne s'applique pas ? </h4> +<p>Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir <code>text/xml</code> ou <code>application/xml</code>. L'espace de nommage XSLT est <code>http://www.w3.org/1999/XSL/Transform</code>. Utilisez l'instruction de traitement <code><?xml-stylesheet ?></code> plutôt que l'élément non standard <code>xml:stylesheet</code>. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que <a href="http://livehttpheaders.mozdev.org/">LiveHTTPHeaders (en)</a> ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. </p> -<h4 id="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F" name="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F"> Pourquoi ma feuille de style ne s'applique pas ? </h4> -<p>Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir <code>text/xml</code> ou <code>application/xml</code>. L'espace de nommage XSLT est <code><span class="nowiki">http://www.w3.org/1999/XSL/Transform</span></code>. Utilisez l'instruction de traitement <code><?xml-stylesheet ?></code> plutôt que l'élément non standard <code>xml:stylesheet</code>. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que <a class="external" href="http://livehttpheaders.mozdev.org/">LiveHTTPHeaders (en)</a> ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. -</p> -<h4 id="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F" name="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F"> Cela fonctione dans IE, mais pas dans Mozilla ? </h4> +<h4 id="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F"> Cela fonctione dans IE, mais pas dans Mozilla ? </h4> <p>Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. </p> -<h4 id="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F" name="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F"> Puis-je désactiver l'échappement de la sortie avec <code>disable-output-escaping</code> ? </h4> +<h4 id="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F"> Puis-je désactiver l'échappement de la sortie avec <code>disable-output-escaping</code> ? </h4> <p>Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter <b>d-o-e</b> plutôt que de provoquer des crashes ou de ralentir le processus. </p> -<h4 id="Que_dire_de_document.write_.3F" name="Que_dire_de_document.write_.3F"> Que dire de <code>document.write</code> ? </h4> +<h4 id="Que_dire_de_document.write_.3F"> Que dire de <code>document.write</code> ? </h4> <p>Tout comme pour le XHTML, <code>document.write</code> n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : </p> <pre> <xsl:if test="system-property('xsl:vendor')='Transformiix'"> @@ -34,28 +33,16 @@ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla <!-- MSXML3 specific markup --> </xsl:if> </pre> -<h4 id="Que_dire_de_media.3D.22print.22.3F" name="Que_dire_de_media.3D.22print.22.3F"> Que dire de <code>media="print"</code>? </h4> +<h4 id="Que_dire_de_media.3D.22print.22.3F"> Que dire de <code>media="print"</code>? </h4> <p>Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un <code>media</code> particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de <code>media</code> dans <?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si <code>media</code> n'est pas spécifié, ou si le <code>media</code> spécifié comporte <code>screen</code>. </p><p>Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient <code>media</code> comme les pages sans XSLT<b>.</b> </p> -<h4 id="Comment_faire_transformNode.3F" name="Comment_faire_transformNode.3F"> Comment faire <code>transformNode</code>? </h4> +<h4 id="Comment_faire_transformNode.3F"> Comment faire <code>transformNode</code>? </h4> <p>Il existe <code>transformToDocument</code> et <code>transformToFragment</code> depuis Mozilla 1.2, voir <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a>. </p> -<h4 id="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F" name="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F"> Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? </h4> +<h4 id="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F"> Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? </h4> <p>Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. </p> -<h4 id="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F" name="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F"> Comment compiler une version autonome de TransforMiiX ? </h4> +<h4 id="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F"> Comment compiler une version autonome de TransforMiiX ? </h4> <p>Voir l'article sur <a href="fr/Compilation_de_TransforMiiX">Compilation de TransforMiiX</a>. -</p> -<div class="originaldocinfo"> -<h2 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original"> Informations sur le document original </h2> -<ul><li> Auteur(s) : Axel Hecht -</li><li> Dernière mise à jour : 2 février 2005 -</li><li> Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license -</li></ul> -</div> -<p><span class="comment">Interwiki Languages Links</span> -</p> -<div class="noinclude"> -</div> -{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }} +</p>
\ No newline at end of file |
