diff options
Diffstat (limited to 'files/fr/web/api')
834 files changed, 5679 insertions, 5682 deletions
diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md index e45e67e308..7da599f489 100644 --- a/files/fr/web/api/abortsignal/index.md +++ b/files/fr/web/api/abortsignal/index.md @@ -35,7 +35,7 @@ Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[ 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")}}. -Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. +Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. ```js var controller = new AbortController(); @@ -56,8 +56,8 @@ function fetchVideo() { fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { - reports.textContent = 'Download error: ' + e.message; - }) + reports.textContent = 'Download error: ' + e.message; + }) } ``` diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md index 1b030e1dbf..698ec6b96b 100644 --- a/files/fr/web/api/analysernode/analysernode/index.md +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -22,7 +22,7 @@ Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048. - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30. - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100. - - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 + - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 ## Spécifications diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 8016e057f1..1c06163251 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -25,7 +25,7 @@ Un nombre entier non signé. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -42,47 +42,47 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurTranche; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.beginPa + + var largeurTran + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.lin + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md index 003229afbe..59be1b7129 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.md +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -21,7 +21,7 @@ Un nombre entier non signé. ## Example -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -39,25 +39,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre; + } }; dessiner(); @@ -67,7 +67,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md index 13b054ee57..a41964d7fd 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -28,7 +28,7 @@ Un {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -77,7 +77,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 7d1f2801af..38997fa346 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -45,40 +45,40 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurBarre; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.begin + + var largeurBarr + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.l + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Paramètres @@ -90,7 +90,7 @@ function dessiner() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md index 0cc626b2f2..9c33179bb1 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -33,7 +33,7 @@ analyseur.getByteTimeDomainData(tableauDonnees); ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -78,7 +78,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md index 1388f536b1..451478a649 100644 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Float32Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -86,7 +86,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md index efe440936e..116f1d5cca 100644 --- a/files/fr/web/api/analysernode/index.md +++ b/files/fr/web/api/analysernode/index.md @@ -89,7 +89,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. > **Note :** Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations. -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -148,7 +148,7 @@ function dessiner() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md index 8273d1f001..646242d1de 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.md +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AnalyserNode/maxDecibels --- {{ APIRef("Web Audio API") }} -La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. +La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. Sa valeur par défaut est `-30`. @@ -25,7 +25,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -43,25 +43,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -71,7 +71,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md index 82ff0bcbe6..170049e2bc 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.md +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -26,7 +26,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md index 627d35e4b5..ab59d2fcc2 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -27,7 +27,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). `Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants. @@ -48,25 +48,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -76,7 +76,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md index b10f31a267..a605ca2cab 100644 --- a/files/fr/web/api/animationevent/animationevent/index.md +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -20,7 +20,7 @@ Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEv - `type` - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`. - `animationName` {{optional_inline}} - - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. + - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. - `elapsedTime` {{optional_inline}} - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évènement est déclenché, excluant le temps de pause des animations. Pour un évènement `animationstart`, `elapsedTime` est de `0.0` jusqu'à ce qu'il y ait une valeur négative pour une valeur [`animation-delay`](/fr/docs/Web/CSS/animation-delay), dans le cas où l'évènement est déclenché par `elapsedTime` contenant `(-1 * délai)`. Sa valeur par défaut vaut `0.0`. - `pseudoElement` {{optional_inline}} diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md index d99df91aed..93237800b6 100644 --- a/files/fr/web/api/atob/index.md +++ b/files/fr/web/api/atob/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob {{APIRef ("HTML DOM")}} La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31. -Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). +Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). ## Syntaxe @@ -32,10 +32,10 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs @@ -44,6 +44,6 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e ## Voir aussi - [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding) -- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) - {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}} - [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md index 18a5761fb2..fe4217cc98 100644 --- a/files/fr/web/api/attr/index.md +++ b/files/fr/web/api/attr/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Attr --- {{APIRef("DOM")}} -Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. +Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. > **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète. @@ -27,7 +27,7 @@ Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupa - : L'élément contenant l'attribut. > **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés. -> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. +> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. > > Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}. @@ -47,11 +47,11 @@ Les propriétés suivantes ont été dépréciées. Si elle est disponible, la m - `attributes` - : Cette propriété retourne désormais toujours `NULL`. - `childNodes` {{deprecated_inline}} - - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. + - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. - `firstChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `isId` {{readOnlyInline}} - - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. + - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. - `lastChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `nextSibling` diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md index a2f6f2e717..c5822f88a8 100644 --- a/files/fr/web/api/attr/localname/index.md +++ b/files/fr/web/api/attr/localname/index.md @@ -24,7 +24,7 @@ Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la parti ## Exemple -Cet exemple affiche "id" dans une fenêtre d'alerte. +Cet exemple affiche "id" dans une fenêtre d'alerte. ### Contenu HTML @@ -37,8 +37,8 @@ Cet exemple affiche "id" dans une fenêtre d'alerte. ```js const element = document.querySelector("#exemple"); element.addEventListener("click", function() { - const attribute = element.attributes[0]; - alert(attribute.localName); + const attribute = element.attributes[0]; + alert(attribute.localName); }); ``` @@ -48,7 +48,7 @@ element.addEventListener("click", function() { Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents. -> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. +> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. ## Spécifications diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md index a8d555f0d8..fc2f9b613f 100644 --- a/files/fr/web/api/attr/namespaceuri/index.md +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Attr/namespaceURI --- {{APIRef("DOM")}} -La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. +La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. > **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}. diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md index 1d03f31444..c992a8a6c3 100644 --- a/files/fr/web/api/attr/prefix/index.md +++ b/files/fr/web/api/attr/prefix/index.md @@ -20,7 +20,7 @@ La propriété **`Attr.prefix`** en lecture seule renvoie le préfixe de l'espac ## Exemples -Le code suivant affiche "x" dans la console. +Le code suivant affiche "x" dans la console. ```xml <div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> @@ -40,7 +40,7 @@ Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est u {{Compat("api.Attr.prefix")}} -## Voir également +## Voir également - {{domxref("Attr.namespaceURI")}} - {{domxref("Attr.localName")}} diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md index cb565da1f0..b0fbd82bf6 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -14,13 +14,13 @@ Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer" ### Parameters -- *context* {{obsolete_inline("")}} +- *context* {{obsolete_inline("")}} - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails. - _options_ {{optional_inline}} - : Les options sont les suivantes: - - `length`: Longueur de l'échantillonnage du tampon. + - `length`: Longueur de l'échantillonnage du tampon. - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1. - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md index e1f8192f4e..30a1e1460d 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -21,9 +21,9 @@ La méthode `copyFromChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/ - _destination_ - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel_ {{optional_inline}} - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -37,7 +37,7 @@ tableauDonnees.copyFromChannel(autreTableau,1,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md index f79f773a66..d286ff6953 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.md +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -16,9 +16,9 @@ La méthode `copyToChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/Au - _source_ - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel {{optional_inline}}_ - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -35,7 +35,7 @@ tableauDonnees.copyToChannel (autreTableau,0,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md index ffb7fdaeae..eb1d525a24 100644 --- a/files/fr/web/api/audiobuffer/duration/index.md +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/duration --- {{ APIRef("Web Audio API") }} -La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. +La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. ## Syntaxe @@ -49,7 +49,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md index 65aebfbe38..effed34d1e 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.md +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -76,7 +76,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md index b914ca7a11..f169cfb03b 100644 --- a/files/fr/web/api/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/index.md @@ -24,7 +24,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér - {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}} - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.length")}} {{readonlyInline}} - - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. + - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.duration")}} {{readonlyInline}} - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}} @@ -41,7 +41,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér ## Exemple -L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. +L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. ```js // Stéréo diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md index eae0885d58..9d5afff0ae 100644 --- a/files/fr/web/api/audiobuffer/length/index.md +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md index 0c7c2c1ced..79fe72e863 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.md +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md index 7992a06828..642b0a5847 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.md +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/sampleRate --- {{ APIRef("Web Audio API") }} -La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. +La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. ## Syntaxe @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des Navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md index 457bab06ba..e50db05366 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.md +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/AudioBufferSourceNode/detune --- {{ APIRef("Web Audio API") }} -La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). +La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Ses valeur sont comprises entre -1200 et 1200. @@ -55,7 +55,7 @@ source.start(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md index dc6a45fbba..3b7e2bbbba 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.md +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -52,7 +52,7 @@ _Hérite des propriétés de son parent, {{domxref("AudioNode")}}._ - {{domxref("AudioBufferSourceNode.buffer")}} - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0). - {{domxref("AudioBufferSourceNode.detune")}} - - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. + - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. - {{domxref("AudioBufferSourceNode.loop")}} - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`. - {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}} diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md index 1061a4924d..58907ea399 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBufferSourceNode/loop --- {{ APIRef("Web Audio API") }} -La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. +La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. La valeur par défaut de la propriété `loop` est `false`. @@ -30,9 +30,9 @@ Lorsque la lecture en boucle est activée, le son commence à jouer au point sp ## Exemple -Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. -> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) +> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) ```js function getData() { @@ -75,7 +75,7 @@ play.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md index b9aa87e87a..2cfb5c9c90 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -82,7 +82,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index ae8a799ba5..0279ecf959 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -27,46 +27,46 @@ Lorsque la lecture de la source audio est terminée, elle boucle. Il est possibl ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } ... loopstartControl.oninput = function() { - source.loopStart = loopstartControl.value; - loopstartValue.innerHTML = loopstartControl.value; + source.loopStart = loopstartControl.value; + loopstartValue.innerHTML = loopstartControl.value; } loopendControl.oninput = function() { - source.loopEnd = loopendControl.value; - loopendValue.innerHTML = loopendControl.value; + source.loopEnd = loopendControl.value; + loopendValue.innerHTML = loopendControl.value; } ``` @@ -74,7 +74,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index 347b485bd8..ff2be37ab8 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate --- {{ APIRef("Web Audio API") }} -La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. +La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie. @@ -41,34 +41,34 @@ Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est ut ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } // connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture @@ -96,7 +96,7 @@ playbackControl.oninput = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md index 0e7d5900dd..bdecb2a17a 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.md +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -53,7 +53,7 @@ source.start(contexteAudio.currentTime + 1,3,10); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md index 298453e5e9..0bc60cfad5 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -70,13 +70,13 @@ source.connect(gainNode); gainNode.connect(audioCtx.destination); ``` -> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. +> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md index e855ad68ed..33742d8aef 100644 --- a/files/fr/web/api/audiocontext/index.md +++ b/files/fr/web/api/audiocontext/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/AudioContext --- {{APIRef("Web Audio API")}} -L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. +L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}. @@ -33,7 +33,7 @@ Un contexte audio peut être la cible d'événements, par conséquent il implém <!----> - {{domxref("AudioContext.listener")}} {{readonlyInline}} - - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. <!----> @@ -56,35 +56,35 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.close()")}} - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait. - {{domxref("AudioContext.createBuffer()")}} - - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} + - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} - {{domxref("AudioContext.createBufferSource()")}} - - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. + - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. - {{domxref("AudioContext.createMediaElementSource()")}} - - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. + - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. - {{domxref("AudioContext.createMediaStreamSource()")}} - - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. + - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. - {{domxref("AudioContext.createMediaStreamDestination()")}} - - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. + - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. - {{domxref("AudioContext.createScriptProcessor()")}} - - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. + - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. - {{domxref("AudioContext.createStereoPanner()")}} - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio. - {{domxref("AudioContext.createAnalyser()")}} - - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. + - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. <!----> - {{domxref("AudioContext.createBiquadFilter()")}} - - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. + - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. <!----> - {{domxref("AudioContext.createChannelMerger()")}} - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux. - {{domxref("AudioContext.createChannelSplitter()")}} - - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. + - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. - {{domxref("AudioContext.createConvolver()")}} - - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. + - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. - {{domxref("AudioContext.createDelay()")}} - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également - {{domxref("AudioContext.createDynamicsCompressor()")}} @@ -94,36 +94,36 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.createIIRFilter()")}} - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs. - {{domxref("AudioContext.createOscillator()")}} - - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. + - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. - {{domxref("AudioContext.createPanner()")}} - - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. + - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. - {{domxref("AudioContext.createPeriodicWave()")}} - - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. + - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. - {{domxref("AudioContext.createWaveShaper()")}} - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires. - {{domxref("AudioContext.createAudioWorker()")}} - - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. + - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. - {{domxref("AudioContext.decodeAudioData()")}} - - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. + - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. - {{domxref("AudioContext.resume()")}} - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu. - {{domxref("AudioContext.suspend()")}} - - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. + - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. ## Méthodes obsolètes - {{domxref("AudioContext.createJavaScriptNode()")}} - - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. + - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. - {{domxref("AudioContext.createWaveTable()")}} - - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. ## Exemples -Déclaration basique d'un audio context : +Déclaration basique d'un audio context : var contexteAudio = new AudioContext; -Variante avec gestion de la compatibilité navigateur: +Variante avec gestion de la compatibilité navigateur: var AudioContext = window.AudioContext || window.webkitAudioContext; var contexteAudio = new AudioContext(); @@ -137,7 +137,7 @@ Variante avec gestion de la compatibilité navigateur: | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index 3b0e48616a..225e9b0519 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -20,7 +20,7 @@ Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il _Hérite des propriétés de son parent,_ `AudioNode`. -> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. +> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. - {{domxref("AudioListener.positionX")}} - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. @@ -29,11 +29,11 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.positionZ")}} - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. - {{domxref("AudioListener.forwardX")}} - - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardY")}} - - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardZ")}} - - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upX")}} - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upY")}} @@ -48,7 +48,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.setOrientation()")}} - : Définit l'orientation de l'auditeur. - {{domxref("AudioListener.setPosition()")}} - - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. + - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. ## Fonctionnalités obsolètes @@ -57,7 +57,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. -Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : +Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : - Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. - Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. @@ -73,7 +73,7 @@ C'est la raison pour laquelle elles ont été supprimées. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md index c5278ad884..3384e4abd1 100644 --- a/files/fr/web/api/audionode/index.md +++ b/files/fr/web/api/audionode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioNode --- {{ APIRef("Web Audio API") }} -L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. +L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. {{InheritanceDiagram}} @@ -13,7 +13,7 @@ L'interface **`AudioNode`** est une interface générique pour représenter un m Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_. Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part). -Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). +Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). > **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}. @@ -78,7 +78,7 @@ oscillator.channelCount; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md index 22f7c0be03..57ee5cf3f5 100644 --- a/files/fr/web/api/audioparam/index.md +++ b/files/fr/web/api/audioparam/index.md @@ -26,16 +26,16 @@ Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit _Hérite des propriétés de son parent, `AudioNode`._ - {{domxref("AudioParam.defaultValue")}} {{readonlyInline}} - - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. -- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} - - : Valeur maximum de la plage nominale (effective). + - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. +- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} + - : Valeur maximum de la plage nominale (effective). - {{domxref("AudioParam.minValue")}} {{readonlyinline}} - - : Valeur minimum de la plage nominale (effective). + - : Valeur minimum de la plage nominale (effective). <!----> - {{domxref("AudioParam.value")}} - - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception + - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception ## Méthodes @@ -86,7 +86,7 @@ biquadFilter.gain.value = 25; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md index 430bfcbc74..8cde56f04e 100644 --- a/files/fr/web/api/audioprocessingevent/index.md +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -32,7 +32,7 @@ _La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md index 61afaee4f6..9cfe9e45a7 100644 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData --- {{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}} -La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : +La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : - l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_) - un compteur de signature diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md index e87275b3eb..3aba8b3fb6 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -94,7 +94,7 @@ source.start(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md index 0dcba996f1..30b1c9f889 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.md +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/AudioContext/createGain --- {{ APIRef("Web Audio API") }} -La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. +La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. ## Syntaxe @@ -31,9 +31,9 @@ Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio e ## Exemple -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. +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. -L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) +L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) ```html <div> @@ -91,7 +91,7 @@ function couperSon () { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md index 8df75e0fb7..6b8d1fd985 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -69,7 +69,7 @@ Ici, nous créons une `PeriodicWave` avec deux valeurs. La première est le déc La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec `createPeriodicWave()`, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale. -Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. +Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}</annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. ## Spécifications diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md index 46c7e5d6af..14cf321b67 100644 --- a/files/fr/web/api/baseaudiocontext/index.md +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -30,7 +30,7 @@ Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l - {{domxref("BaseAudioContext.listener")}} {{readonlyInline}} - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. - {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}} - - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. + - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. - {{domxref("BaseAudioContext.state")}} {{readonlyInline}} - : Renvoie l'état actuel de l'`AudioContext`. @@ -80,7 +80,7 @@ _Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}} - {{domxref("BaseAudioContext.createWaveShaper()")}} - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires. - {{domxref("BaseAudioContext.decodeAudioData()")}} - - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. + - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. - {{domxref("BaseAudioContext.resume()")}} - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause. diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md index 550a287720..d4db93538f 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.md +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/BiquadFilterNode/frequency --- {{ APIRef("Web Audio API") }} -La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). +La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage. @@ -58,7 +58,7 @@ filtreBiquad.gain.value = 25; | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | -| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index f0e40607c6..e641539367 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -40,7 +40,7 @@ L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, c ## Constructeur - {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}} - - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. + - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. ## Propriétés @@ -73,13 +73,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>lowpass</code></th> <td> - Filtre standard passe-bas résonnant de second ordre avec atténuation de + Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + 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> @@ -87,13 +87,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>highpass</code></th> <td> - Filtre standard passe-haut résonnant de second ordre avec atténuation de + Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + 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> @@ -101,13 +101,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>bandpass</code></th> <td> - Filtre standard passe-bande de second ordre. Les fréquences en dehors de + Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées. </td> <td>Le centre de la gamme de fréquences.</td> <td> - Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande. </td> <td>Non utilisé</td> @@ -193,7 +193,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. </td> <td> Contrôle finement la transition à la fréquence moyenne. Plus ce - paramètre est grand, plus la transition est fine et large. + paramètre est grand, plus la transition est fine et large. </td> <td>Non utilisé</td> </tr> @@ -205,7 +205,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. - {{domxref("BiquadFilterNode.getFrequencyResponse()")}} - - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. + - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. ## Exemples diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md index 166428cb4a..ab9702f672 100644 --- a/files/fr/web/api/blob/type/index.md +++ b/files/fr/web/api/blob/type/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Blob/type --- {{APIRef("File API")}} -La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. +La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. ## Syntaxe diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md index c976b80341..c2d7b24434 100644 --- a/files/fr/web/api/blobevent/blobevent/index.md +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -23,7 +23,7 @@ _Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event - `data` - : est un {{domxref("Blob")}} associé à l'évènement. -- `timecode` {{optional_inline}} +- `timecode` {{optional_inline}} - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob. ## Spécifications diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md index 4a808ec8e8..303f6a426f 100644 --- a/files/fr/web/api/btoa/index.md +++ b/files/fr/web/api/btoa/index.md @@ -27,11 +27,11 @@ La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en ### Paramètres - `chaineAEncoder` - - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. + - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. ### Valeur retournée -Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. +Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ### Exceptions @@ -42,15 +42,15 @@ Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ## Notes -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. +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. `btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants. ## Chaînes Unicode -Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. +Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. -Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : +Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : // Chaîne ucs-2 en ascii encodé en base64 function uena(chn) { @@ -67,16 +67,16 @@ Une option est d'échapper tous les caractères étendus, de telle sorte que la uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!" -Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). +Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md index bb85f96fbb..fa09e9119d 100644 --- a/files/fr/web/api/cache/add/index.md +++ b/files/fr/web/api/cache/add/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/add --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : +La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : ```js fetch(url).then(function(response) { @@ -26,9 +26,9 @@ fetch(url).then(function(response) { }) ``` -Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. +Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. -> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. ## Syntaxe @@ -41,11 +41,11 @@ cache.add(request).then(function() { ### Paramètres - request - - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. + - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -61,12 +61,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -76,7 +76,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## Exemples -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. ```js this.addEventListener('install', function(event) { @@ -100,6 +100,6 @@ this.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md index 8a666d32cb..eb2a10faa3 100644 --- a/files/fr/web/api/cache/addall/index.md +++ b/files/fr/web/api/cache/addall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/addAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. +La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. > **Note :** `addAll()` écrasera toute paire clé/valeur précédemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put()` ainsi créée devrait engendrer l'effacement d'une entrée cache créée par la même méthode `addAll()`. @@ -30,11 +30,11 @@ cache.addAll(requests[]).then(function() { ### Paramètres - requests - - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. + - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -50,12 +50,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -65,7 +65,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## **Exemples** -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. ```js this.addEventListener('install', function(event) { diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md index 1409dbfa4b..4df36f3506 100644 --- a/files/fr/web/api/cache/delete/index.md +++ b/files/fr/web/api/cache/delete/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Cache/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. +La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. ## Syntaxe @@ -30,22 +30,22 @@ cache.delete(request,{options}).then(function(true) { - : La {{domxref("Request", "Requête")}} à supprimer. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. +Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. ## Exemples ```js caches.open('v1').then(function(cache) { - cache.delete('/images/image.png').then(function(response) { + cache.delete('/images/image.png').then(function(response) { someUIUpdateFunction(); }); }) diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md index b53c794c91..a0b3412313 100644 --- a/files/fr/web/api/cache/index.md +++ b/files/fr/web/api/cache/index.md @@ -34,7 +34,7 @@ Vous êtes également responsable de la purge périodique des entrées du cache. - {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}} - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}. - {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}} - - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. + - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. - {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}} - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné. - {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}} @@ -52,9 +52,9 @@ Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")} Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié. -Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. +Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. -> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. +> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. ```js var CACHE_VERSION = 1; diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md index 617e1aa4e7..dc647de935 100644 --- a/files/fr/web/api/cache/keys/index.md +++ b/files/fr/web/api/cache/keys/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Cache/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. Les requêtes sont retournées dans le même ordre que l'ordre d'insertion. -> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. +> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. ## Syntaxe @@ -34,16 +34,16 @@ cache.keys(request,{options}).then(function(response) { - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. ## Exemples diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md index 592ec9f804..d1e360a09b 100644 --- a/files/fr/web/api/cache/match/index.md +++ b/files/fr/web/api/cache/match/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. +La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. ## Syntaxe @@ -28,28 +28,28 @@ cache.match(request,{options}).then(function(response) { ### Paramètres - request - - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. + - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. - options {{optional_inline}} - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -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. +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. -> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)). -L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. +L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. -Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. +Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md index 94f271b928..b1897ed646 100644 --- a/files/fr/web/api/cache/matchall/index.md +++ b/files/fr/web/api/cache/matchall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/matchAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. ## Syntaxe @@ -33,15 +33,15 @@ cache.matchAll(request,{options}).then(function(response) { - : 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 : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md index d99f8d8bb7..fdfd705454 100644 --- a/files/fr/web/api/cache/put/index.md +++ b/files/fr/web/api/cache/put/index.md @@ -15,24 +15,24 @@ translation_of: Web/API/Cache/put --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. +La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. -Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : +Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : ```js fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('Bad response status'); - } + } return cache.put(url, response); }) ``` -> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. +> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. -> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. +> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. ## Syntaxe @@ -53,28 +53,28 @@ cache.put(request, response).then(function() { Une {{jsxref("Promise", "Promesse")}} est retournée avec void. -> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. +> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. ## Exemples -Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : +Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : -1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. -2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. +1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. +2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. 3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours. ```js var response; var cachedResponse = caches.match(event.request).catch(function() { - return fetch(event.request); + return fetch(event.request); }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); + response = r; + caches.open('v1').then(function(cache) { + cache.put(event.request, response); + }); + return response.clone(); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); + return caches.match('/sw-test/gallery/myLittleVader.jpg'); }); ``` diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md index abfb9936b2..a593d7c422 100644 --- a/files/fr/web/api/caches/index.md +++ b/files/fr/web/api/caches/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- {{APIRef()}}{{SeeCompatTable}} -La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. +La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. ## Syntaxe @@ -18,7 +18,7 @@ Un objet de type {{domxref("CacheStorage")}}. ## Exemple -L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. +L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. ```js this.addEventListener('install', function(event) { @@ -57,7 +57,7 @@ this.addEventListener('install', function(event) { <td>{{Spec2('Service Workers')}}</td> <td> <p> - Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la + Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec. </p> </td> diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index ba53d9e8d1..3be6f80cc2 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/CacheStorage/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. +La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,25 +30,25 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( - caches.keys().then(function(keyList) { - return Promise.all(keyList.map(function(key) { - if (cacheWhitelist.indexOf(key) === -1) { - return caches.delete(key); - } - })); - }) - ); + caches.keys().then(function(keyList) { + return Promise.all(keyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { + return caches.delete(key); + } + })); + }) + ); }); ``` diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index ae799a0f03..380f7678e8 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/has --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. +La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -27,23 +27,23 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Paramètres - cacheName - - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. + - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. ## Exemples -L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. +L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. ```js caches.has('v1').then(function() { caches.open('v1').then(function(cache) { - return cache.addAll(myAssets); + return cache.addAll(myAssets); }); }).catch(function() { - someCacheSetupfunction(); + someCacheSetupfunction(); });; ``` @@ -59,6 +59,6 @@ caches.has('v1').then(function() { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index f91758952d..8706641b1c 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -19,7 +19,7 @@ L'interface : - 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). - > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. + > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. - Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. @@ -29,34 +29,34 @@ Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Re Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. +> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. +> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. ## Méthodes - {{domxref("CacheStorage.match()")}} {{experimental_inline}} - - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. - {{domxref("CacheStorage.has()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. - {{domxref("CacheStorage.open()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). - {{domxref("CacheStorage.delete()")}} {{experimental_inline}} - - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. - {{domxref("CacheStorage.keys()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. ## Exemples -Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. +Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : +Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. -2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) -3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. +1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. +2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) +3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. -Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. +Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. ```js this.addEventListener('install', function(event) { @@ -86,9 +86,9 @@ self.addEventListener('fetch', function(event) { return response; } else { return fetch(event.request).then(function (response) { - // la réponse ne peut être utilisée qu'une seule fois - // nous devons sauvegarder le clone pour mettre - // une copie en cache et servir le second + // la réponse ne peut être utilisée qu'une seule fois + // nous devons sauvegarder le clone pour mettre + // une copie en cache et servir le second let responseClone = response.clone(); caches.open('v1').then(function (cache) { diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index 7980630510..127deabe0e 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,11 +30,11 @@ Aucun. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. +Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index c548c86759..0b1292ce4e 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. +La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -34,23 +34,23 @@ Les objets `Cache` sont cherchés par ordre de création. - : La {{domxref("Request", "Requête")}} recherchée. - options {{optional_inline}} - - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: + - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: - - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. ### Valeur retournée -Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. +Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. ## Exemples -Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: +Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. -2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. 3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. ```js @@ -91,6 +91,6 @@ self.addEventListener('fetch', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 009c6e1e94..a46a8d2094 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/CacheStorage/open --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. +La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. +> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. ## Syntaxe @@ -33,7 +33,7 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. +Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. ## Exemples @@ -70,6 +70,6 @@ self.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index 7096bbe6e5..7444fbcf91 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -18,13 +18,13 @@ Cet article fournit un exemple intéressant concret d'utilisation de l'élément **[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -## Pourquoi ? +## Pourquoi ? Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était **déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. La [présentation](/fr/docs/Web/API/Canvas_API) et le [tutoriel](/fr/docs/Web/API/Canvas_API/Tutorial) `canvas` que j'ai trouvé ici sur MDN 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. -## Comment ? +## Comment ? L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 5dbc455c7e..66f1da8485 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -9,7 +9,7 @@ Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("ca Les applications Mozilla ont commencé à supporter `<canvas>` à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Mozilla/Firefox/Releases/1.5)). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X 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 [« <i lang="en">Explorer Canvas</i> »](https://github.com/arv/explorercanvas) de Google. -L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. +L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. ## Exemple @@ -38,8 +38,8 @@ ctx.fillRect(10, 10, 100, 100); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; @@ -88,7 +88,7 @@ window.addEventListener('load', drawCanvas); - {{domxref("OffscreenCanvas")}}{{experimental_inline}} - {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} -Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). +Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). {{domxref("CanvasCaptureMediaStream")}} est lié. @@ -115,26 +115,26 @@ Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebG ### Bibliothèques - [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG. -- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. -- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. +- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. +- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. - [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas. - [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger. -- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. -- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. -- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. -- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. -- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. -- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. -- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. +- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. +- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. +- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. +- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. +- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. +- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. +- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. - [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art -- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas -- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas ## Spécifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | ## Voir aussi diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index dc4e3366ba..f445394f18 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -146,7 +146,7 @@ Quand la routine est appelée, l'élément vidéo affiche les données de la plu La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData()` sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. -La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. +La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. 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. diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index be0df6f74b..7b678a522a 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -91,10 +91,10 @@ Si aucun test de collision n'est effectué, notre balle sort hors du canevas rap ```js if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; + ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; + ball.vx = -ball.vx; } ``` diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 31cf501014..b3cc9f0edc 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} -Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. +Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. ## Les couleurs @@ -19,7 +19,7 @@ Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dess `color` est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`). -> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. +> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. 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. @@ -250,7 +250,7 @@ Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). > > Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. @@ -258,20 +258,20 @@ Pour les lignes de largeur paire, chaque moitié finit par être un nombre entie 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. -### Un exemple de `lineCap` +### Un exemple de `lineCap` -La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. +La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. - `butt` _(bout)_ - : L'extrémité des lignes est en angle droit. - `round` _(rond)_ - : Les extrémités sont arrondies. - `square` _(carré)_ - - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. + - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. -Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. +Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. -La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. +La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. ```js function draw() { @@ -310,16 +310,16 @@ draw(); {{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} -### Un exemple de `lineJoin` +### Un exemple de `lineJoin` -La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). +La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. +Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. - `round` _(rond)_ - - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. + - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. - `bevel` _(biseau)_ - - : Ajoute un triangle à l'extrémité commune des segments connectés. + - : Ajoute un triangle à l'extrémité commune des segments connectés. - `miter` _(onglet)_ - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. @@ -596,7 +596,7 @@ Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une coule Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} - - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : @@ -707,7 +707,7 @@ Nous allons regarder la propriété de la `font` _(police de caratères)_ et la ## Règles de remplissage Canvas -Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. +Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. Deux valeurs sont possibles : diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index a8b72b6e50..72075e3b32 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -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. +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. 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. @@ -28,7 +28,7 @@ Voici les étapes à suivre à chaque image dessinée (frame) : 3. **Dessiner les formes animées** Vous effectuez toutes les opérations pour afficher l'image. 4. **Restaurer l'état du canevas** - Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. + Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. ## Contrôle d'une animation @@ -226,9 +226,9 @@ window.requestAnimationFrame(clock); {{EmbedLiveSample("Une_horloge_animée", "180", "180")}} -## Un panorama défilant en boucle +## Un panorama défilant en boucle -Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. +Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. ```js var img = new Image(); @@ -318,7 +318,7 @@ function draw() { } ``` -En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. +En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. ```html <canvas id="canvas" width="800" height="200"></canvas> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index ca47946655..f391ead52a 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -58,7 +58,7 @@ Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...>< L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". +Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". ```js var canvas = document.getElementById('tutorial'); @@ -69,7 +69,7 @@ La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant ## Vérification de la prise en charge -Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : +Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : ```js var canvas = document.getElementById('tutorial'); @@ -110,7 +110,7 @@ Voici un modèle minimaliste, que nous allons utiliser comme point de départ da </html> ``` -Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. +Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. Voici à quoi le modèle ressemble : diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index e3343ba8a3..283e149ca1 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -25,11 +25,11 @@ Ce code configure les valeurs globales utilisées par le reste du programme. 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', - 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', - 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', - 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' - ].reverse(); + 'destination-over','destination-in','destination-out','destination-atop', + 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ].reverse(); var gcoText = [ "C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.", "La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.", @@ -68,21 +68,21 @@ Quand la page se charge, le code suivant s'exécute pour configurer et exécuter ```js window.onload = function() { - // lum en sRGB - var lum = { - r: 0.33, - g: 0.33, - b: 0.33 - }; - // redimensionne le canvas - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix() - colorSphere(); - runComposite(); - return; + // lum en sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // redimensionne le canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix() + colorSphere(); + runComposite(); + return; }; ``` @@ -90,74 +90,74 @@ Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en ```js function createCanvas() { - var canvas = document.createElement("canvas"); - canvas.style.background = "url("+op_8x8.data+")"; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width/2; - canvas.height = height/2; - return canvas; + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; } function runComposite() { - var dl = document.createElement("dl"); - document.body.appendChild(dl); - while(gco.length) { - var pop = gco.pop(); - var dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - var dd = document.createElement("dd"); - var p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); - var canvasToDrawOn = createCanvas(); - var canvasToDrawFrom = createCanvas(); - var canvasToDrawResult = createCanvas(); + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); - var ctx = canvasToDrawResult.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawOn.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('existing content', 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawFrom.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('new content', 5, height/2 - 5); - ctx.restore(); - - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); - - dl.appendChild(dd); - } + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(canvas1, + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle + ctx.font = "14 + ctx.fillText(' + ctx.restore + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(c + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle = "# + ctx.font = "14p + x.fillText('new c + x.restore(); + + dd.appendChil + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } }; ``` @@ -167,59 +167,59 @@ Notre programme repose sur un certain nombbre de fonctions utilitaires: ```js var lightMix = function() { - var ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI*2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0,0,30,30) - ctx.fill(); + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); }; ``` ```js var colorSphere = function(element) { - var ctx = canvas1.getContext("2d"); - var width = 360; - var halfWidth = width / 2; - var rotate = (1 / 360) * Math.PI * 2; // per degree - var offset = 0; // scrollbar offset - var oleft = -20; - var otop = -20; - for (var n = 0; n <= 359; n ++) { - var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); - var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } - ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) - ctx.fill(); - return ctx.canvas; + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; }; ``` @@ -227,76 +227,76 @@ var colorSphere = function(element) { // HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { - var H = o.H / 360, - S = o.S / 100, - V = o.V / 100, - R, G, B; - var A, B, C, D; - if (S == 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H = 6 * H; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - (S * D))); - C = Math.round(255 * V * (1 - (S * (1 - D)))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } - } - return { - R: R, - G: G, - B: B - }; + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + se { + if (H >= 1 + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * + V = Math.round(255 * V); + switch (Mat + case 0: + R = V; + G = C; + B = A; + bre + 1: + R = B; + G = V; + B = A; + bre + 2: + R = A; + G = V; + B = C; + bre + 3: + R = A; + G = B; + B = V; + bre + 4: + R = C; + G = A; + B = V; + bre + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; }; var createInterlace = function (size, color1, color2) { - var proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // top-left - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // top-right - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // bottom-left - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // bottom-right - proto.fillRect(size, size, size, size); - var pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; }; var op_8x8 = createInterlace(8, "#FFF", "#eee"); diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index a38f95eadd..57d00b74d8 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -14,120 +14,120 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} -Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. +Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. ## La grille -Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut. +Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.  -## Dessin de rectangles +## Dessin de rectangles -Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. +Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. -Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : +Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : - {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}} - : Dessine un rectangle rempli. - {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}} - - : Dessine un contour rectangulaire + - : Dessine un contour rectangulaire - {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}} - - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. + - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. -Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. +Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. -Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. +Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. ### Exemple de forme rectangulaire ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.fillRect(25, 25, 100, 100); - ctx.clearRect(45, 45, 60, 60); - ctx.strokeRect(50, 50, 50, 50); - } + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } } ``` -Le résultat de cet exemple est montré ci-dessous. +Le résultat de cet exemple est montré ci-dessous. {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}} -La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. +La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. -Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. +Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas. -## Dessin de trajets +## Dessin de trajets -Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : +Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : 1. Tout d'abord, vous devez créer le trajet. -2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. +2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. 3. Finalement, vous devez fermer le trajet. -4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. +4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. -Voici les functions utilisées pour réaliser ces étapes : +Voici les functions utilisées pour réaliser ces étapes : - {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} - - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. + - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. - [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) - - : Méthodes pour définir différents trajets pour les objets. + - : Méthodes pour définir différents trajets pour les objets. - {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}} - - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. + - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. - {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} - - : Dessine la forme en traçant son contour. + - : Dessine la forme en traçant son contour. - {{domxref("CanvasRenderingContext2D.fill", "fill()")}} - - : Dessine une forme pleine en remplissant la zone de contenu du trajet. + - : Dessine une forme pleine en remplissant la zone de contenu du trajet. -La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. +La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. -> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. +> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt. -La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. +La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. -> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. +> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. ### Dessin d'un triangle -Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : +Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); - } + } } ``` @@ -137,28 +137,28 @@ Le résultat ressemble à : ### Déplacement du stylo -Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. +Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. - {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}} - : Déplace le stylo aux coordonnées `x` et `y`. -Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. +Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. -Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. +Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Cercle extérieur @@ -169,15 +169,15 @@ function draw() { ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Oeil droite ctx.stroke(); - } + } } ``` -Le résultat ressemble à ce qui suit : +Le résultat ressemble à ce qui suit : {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}} -Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. +Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. > **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous. @@ -186,107 +186,107 @@ Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes Pour dessiner des lignes droites, utilisez la méthode `lineTo()`. - {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}} - - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. + - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. -Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. +Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. L'exemple ci-dessous dessine deux triangles, un rempli et un filaire. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Triangle plein - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(105, 25); - ctx.lineTo(25, 105); - ctx.fill(); - - // Triangle filaire - ctx.beginPath(); - ctx.moveTo(125, 125); - ctx.lineTo(125, 45); - ctx.lineTo(45, 125); - ctx.closePath(); - ctx.stroke(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Triangle plei + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(1 + ctx.lineTo(2 + ctx.fill(); + + // Triangle filaire + ctx.beginPath(); + ctx.moveTo(125, 125) + ctx.lineTo(125, + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } } ``` -Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. +Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. {{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}} -Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. +Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. ### Les arcs -Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. +Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. - {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}} - - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). + - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). - **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}** - - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. + - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. -Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. +Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. -> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. +> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. -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. +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. -Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. +Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne. -L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. +L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. > **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="200"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="200"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - for(var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { - ctx.beginPath(); - var x = 25 + j * 50; // Coordonnée x - var y = 25 + i * 50; // Coordonnée y - var rayon = 20; // Rayon de l'arc - var angleInitial = 0; // Point de départ sur le cercle - var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle - var antihoraire = i % 2 != 0; // Horaire ou antihoraire - - ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire); - - if (i>1) { - ctx.fill(); - } else { - ctx.stroke(); - } - } - } - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + for(var i = 0; i < 4 + for(var j = 0; j < + ctx.beginPath(); + var x = 25 + j * 50; // Coordonné + var y = 25 + i * 50; // Coordonné + var rayon = 20; // Rayon de l'arc + var angleInitial = 0; // Point de départ sur le cercle + var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d + var antihoraire + + + + f + + + + + } + } + } } ``` @@ -294,22 +294,22 @@ function dessiner() { ### Les courbes quadratiques et de Bézier -Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. +Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}} - - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. + - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. - {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}} - - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). + - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). -La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle. +La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.  -Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. +Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. -Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. +Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. -Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. +Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. #### Courbes de Bézier quadratiques @@ -317,28 +317,28 @@ Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bu ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemples de courbes quadratiques - ctx.beginPath(); - ctx.moveTo(75, 25); - ctx.quadraticCurveTo(25, 25, 25, 62.5); - ctx.quadraticCurveTo(25, 100, 50, 100); - ctx.quadraticCurveTo(50, 120, 30, 125); - ctx.quadraticCurveTo(60, 120, 65, 100); - ctx.quadraticCurveTo(125, 100, 125, 62.5); - ctx.quadraticCurveTo(125, 25, 75, 25); - ctx.stroke(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemples de c + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100) + ctx.quadraticCurveTo(125, 100, 125, 62 + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); } } ``` @@ -347,32 +347,32 @@ function dessiner() { #### Les courbes de Bézier cubiques -Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. +Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemple de courbes cubiques - ctx.beginPath(); - ctx.moveTo(75, 40); - ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); - ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); - ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); - ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); - ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); - ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); - ctx.fill(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemple de co + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5 + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); } } ``` @@ -381,125 +381,125 @@ function dessiner() { ### Rectangles -En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. +En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. - {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}} - - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. + - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. -Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. +Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. ### Combiner les possibilités -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. +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. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - rectArrondi(ctx, 12, 12, 150, 150, 15); - rectArrondi(ctx, 19, 19, 150, 150, 9); - rectArrondi(ctx, 53, 53, 49, 33, 10); - rectArrondi(ctx, 53, 119, 49, 16, 6); - rectArrondi(ctx, 135, 53, 49, 33, 10); - rectArrondi(ctx, 135, 119, 25, 49, 10); - - ctx.beginPath(); - ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false); - ctx.lineTo(31, 37); - ctx.fill(); - - for(var i = 0; i< 8; i++) { - ctx.fillRect(51 + i * 16, 35, 4, 4); - } - - for(i = 0; i < 6; i++) { - ctx.fillRect(115, 51 + i * 16, 4, 4); - } - - for(i = 0; i < 8; i++) { - ctx.fillRect(51 + i * 16, 99, 4, 4); - } - - ctx.beginPath(); - ctx.moveTo(83, 116); - ctx.lineTo(83, 102); - ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); - ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); - ctx.lineTo(111, 116); - ctx.lineTo(106.333, 111.333); - ctx.lineTo(101.666, 116); - ctx.lineTo(97, 111.333); - ctx.lineTo(92.333, 116); - ctx.lineTo(87.666, 111.333); - ctx.lineTo(83, 116); - ctx.fill(); - - ctx.fillStyle = "white"; - ctx.beginPath(); - ctx.moveTo(91, 96); - ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); - ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); - ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); - ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); - ctx.moveTo(103, 96); - ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); - ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); - ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); - ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); - ctx.fill(); - - ctx.fillStyle = "black"; - ctx.beginPath(); - ctx.arc(101, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - - ctx.beginPath(); - ctx.arc(89, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + rectArrondi(ctx, 12, 12, 150, 150, 15 + rectArrondi(ctx, 19, 19, 150, 150, 9) + rectArrondi(ctx, 53, 53, 49, 33, 10); + rectArrondi(ctx, 53, 119, 49, 16, 6); + rectArrondi(ctx, 1 + rectArrondi(ctx, + + ctx.beginPath(); + ctx.arc(37, + ctx.lineTo(31, 37); + ctx.fill(); + + for(var i = 0; i< 8; i++ + + } + + for(i = 0; i < 6; i++) { + + } + + for(i = 0; i < 8; i+ + ctx.fillRect(51 + i * + } + + ctx.beginPat + ctx.moveTo(83, 116); + ctx.lineTo(83, 1 + ctx.bezierCurveTo(8 + ctx.bezierCurveTo(105, 88, 1 + ctx.lineTo(111, 116) + ctx.lineTo(1 + ctx.lineTo(101.666, + ctx.lineTo(97, 1 + ctx.lineTo(92.333, + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.moveTo(9 + ctx.bezierCurveT + ctx.bezierCurveTo(87, 103, 88, 106, 91, 10 + ctx.bezierCu + ctx.bezierCurveTo(95, 99 + ctx.moveTo(103, + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101) + ctx.bezierCu + ctx.bezierCurveT + ctx.bezierCurveTo(107, 99, 106, 96, 103, 9 + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.arc(101, + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } } // Une fonction utilitaire pour tracer des rectangles avec des coins arrondis function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { - ctx.beginPath(); - ctx.moveTo(x, y + rayon); - ctx.lineTo(x, y + hauteur - rayon); - ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); - ctx.lineTo(x + largeur - rayon, y + hauteur); - ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); - ctx.lineTo(x + largeur, y + rayon); - ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); - ctx.lineTo(x + rayon,y); - ctx.quadraticCurveTo(x, y, x, y + rayon); - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y + rayon); + ctx.lineTo(x, y + hauteur - rayon); + ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); + ctx.lineTo(x + largeur - rayon, y + hauteur); + ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); + ctx.lineTo(x + largeur, y + rayon); + ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); + ctx.lineTo(x + rayon,y); + ctx.quadraticCurveTo(x, y, x, y + rayon); + ctx.stroke(); } ``` -L'image résultante ressemble à ce qui suit : +L'image résultante ressemble à ce qui suit : {{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}} -Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. +Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. -Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. +Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. ## Objets Path2D Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet [`Path2D`](/fr/docs/Web/API/Path2D), disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instructions de dessin. Vous pourrez alors rejouer vos trajets rapidement. Voyons comment nous pouvons construire un objet `Path2D` : - {{domxref("Path2D.Path2D", "Path2D()")}} - - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). + - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). <!----> @@ -507,16 +507,16 @@ Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de tra new Path2D(trajet); // copie depuis un autre objet Path2D new Path2D(d); // trajet depuis des données de trajet SVG -Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. +Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. -L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. +L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. -- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} - - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. +- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} + - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. ### Exemple de Path2D -Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. +Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. ```html hidden <html> @@ -547,11 +547,11 @@ function dessiner() { {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}} -### Utilisation de trajets SVG +### Utilisation de trajets SVG -Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. +Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. -Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). +Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md index f6f3ba108f..42b11ed789 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -6,11 +6,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility --- {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} -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. +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. ## Moyen de repli -Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. +Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. ```html <canvas> @@ -25,11 +25,11 @@ Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilis </canvas> ``` -Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). +Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). ## Les règles ARIA -Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. +Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. ```html <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> @@ -37,16 +37,16 @@ Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/AR ## Zones cibles (hit Region) -Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). +Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Ajoute une "hit region" au canvas.. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. + - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Retire toutes les "hit regions" du cnavas. -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. +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. ```html <canvas id="canvas"></canvas> @@ -60,29 +60,29 @@ ctx.fill(); ctx.addHitRegion({id: 'circle'}); canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } + if (event.region) { + alert('hit region: ' + event.region); + } }); </script> ``` -La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): +La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): ```js ctx.addHitRegion({control: element}); ``` -Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). +Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). ## Focus rings -Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. +Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}} - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant. -De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. +De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}} - : Affiche le chemin courant ou le chemin donné. diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 7b3b723efb..ded7ba9431 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -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. +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. ## Conseils sur les performances Ceci est une liste de conseils pour améliorer les performances -### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ 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. @@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, pr ### Redimensionner les canvas avec CSS transform -[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. ```js var scaleX = window.innerWidth / canvas.width; @@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; ``` -### Utiliser l'attribut `moz-opaque` (Gecko only) +### Utiliser l'attribut `moz-opaque` (Gecko only) Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 7c6fadf160..49b70c9c31 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -13,29 +13,29 @@ Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels d L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants : - `width` - - : La largeur de l'image en pixels. + - : La largeur de l'image en pixels. - `height` - - : La hauteur de l'image en pixels. + - : La hauteur de l'image en pixels. - `data` - - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). + - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). -La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. +La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. -Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. +Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. -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 : +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 : ```js composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; ``` -Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : +Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : ```js var nbOctets = imageData.data.length; ``` -## Création d'un objet `ImageData` +## Création d'un objet `ImageData` Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode [`createImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/createImageData). Il existe deux versions de la méthode `createImageData()` : @@ -43,9 +43,9 @@ Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode var monImageData = ctx.createImageData(largeur, hauteur); ``` -Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. +Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. -Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** +Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** ```js var monImageData = ctx.createImageData(autreImageData); @@ -53,17 +53,17 @@ var monImageData = ctx.createImageData(autreImageData); ## Obtention des données pixel pour un contexte -Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : +Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : ```js var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur); ``` -Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. +Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. -> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. +> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. -Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). +Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). ### Une pipette à couleur @@ -105,9 +105,9 @@ Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRende ctx.putImageData(monImageData, dx, dy); ``` -Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. +Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : +Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : ```js ctx.putImageData(monImageData, 0, 0); @@ -115,7 +115,7 @@ ctx.putImageData(monImageData, 0, 0); ### Niveaux de gris et inversion de couleurs -Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. +Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. ```html hidden <canvas id="canevas" width="300" height="227"></canvas> @@ -189,8 +189,8 @@ zoomctx.drawImage(canvas, <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> - <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> - Enable image smoothing + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing </label> </div> ``` diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md index 490e52c4fe..fa45263a14 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -190,7 +190,7 @@ Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons ### Un exemple `scale` -Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. +Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. ```js function draw() { diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index b4a77e50dc..dcacbfbe6e 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasGradient/addColorStop --- {{APIRef("Canvas API")}} -La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. +La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. ## Syntaxe @@ -26,9 +26,9 @@ La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini pa ## Exemples -### Utilisation de la méthode `addColorStop` +### Utilisation de la méthode `addColorStop` -Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. +Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md index be3e32d89c..d499735bee 100644 --- a/files/fr/web/api/canvasgradient/index.md +++ b/files/fr/web/api/canvasgradient/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/CanvasGradient --- {{APIRef("Canvas API")}} -L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. +L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. ## Propriétés @@ -20,16 +20,16 @@ _Représentant un objet opaque, il n'y a aucune propriété exposée._ ## Méthodes -_Il n'y a pas de méthode héritée._ +_Il n'y a pas de méthode héritée._ - {{domxref("CanvasGradient.addColorStop()")}} - - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. + - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -37,5 +37,5 @@ _Il n'y a pas de méthode héritée._ ## Voir également -- Créateur dans {{domxref("CanvasRenderingContext2D")}}. +- Créateur dans {{domxref("CanvasRenderingContext2D")}}. - L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 823c70dfc6..5c845f8199 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). +La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). ## Syntaxe @@ -16,19 +16,19 @@ La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajo - `x` - : La position en x du centre de l'arc. - `y` - - : La position en y du centre de l'arc. + - : La position en y du centre de l'arc. - `radius` _(rayon)_ - : Le rayon de l'arc. - `startAngle` _(angle départ)_ - - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `endAngle` _(angle fin)_ - - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `anticlockwise` _(sens anti-horaire)_ {{optional_inline}} - - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. + - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. ## Exemples -### En utilisant la méthode `arc` +### En utilisant la méthode `arc` Voici un code simple permettant de dessiner un cercle . @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -95,7 +95,7 @@ window.addEventListener("load", drawCanvas); ### Exemple avec différentes formes -Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. +Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. ```html hidden <canvas id="canvas" width="150" height="200"></canvas> @@ -133,7 +133,7 @@ for (var i = 0; i < 4; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -141,11 +141,11 @@ for (var i = 0; i < 4; i++) { ## Notes spécifiques à Gecko -Avec Gecko 2.0 {{geckoRelease("2.0")}}: +Avec Gecko 2.0 {{geckoRelease("2.0")}}: - Le paramètre `anticlockwise` est optionnel, -- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). +- 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" ). ## Voir aussi -- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} +- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b0931493df..47e6e8bc3d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -51,8 +51,8 @@ ctx.stroke(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:200px"> // First path @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index 6a49fdd769..389259f6a1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -93,7 +93,7 @@ Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCur #### JavaScript -La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). +La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). ```js const canvas = document.getElementById("canvas"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c537047361..e515d96d0e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/canvas --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. +La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. ## Syntaxe @@ -25,7 +25,7 @@ Soit cet élément {{HTMLElement("canvas")}}: <canvas id="canvas"></canvas> ``` -Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : ```js var canvas = document.getElementById("canvas"); @@ -37,7 +37,7 @@ ctx.canvas // HTMLCanvasElement | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 36000420e8..59aca48a7f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. +La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. ## Syntaxe @@ -14,23 +14,23 @@ La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas me ### Paramètres - `x` - - : La coordonnée sur l'axe des *x* du point de départ du rectangle. + - : La coordonnée sur l'axe des *x* du point de départ du rectangle. - `y` - - : La coordonnée sur l'axe des *y* du point de départ du rectangle. + - : La coordonnée sur l'axe des *y* du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Notes d'utilisation -Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. +Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. ## Exemples -### Utilisation de la méthode `clearRect` +### Utilisation de la méthode `clearRect` -Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. #### HTML @@ -57,7 +57,7 @@ ctx.clearRect(10, 10, 100, 100); // ctx.clearRect(0, 0, canvas.width, canvas.height); ``` -Modifiez le code suivant et voyez vos changements en direct dans le canevas : +Modifiez le code suivant et voyez vos changements en direct dans le canevas : #### Code jouable @@ -110,7 +110,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 174105faf5..b35d863b66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. +La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. ## Syntax @@ -44,8 +44,8 @@ Editez le code ci-dessous et observez les répercutions dans le canvas: ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); @@ -88,7 +88,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 6785b0f24e..4bfb807aba 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -11,7 +11,7 @@ La méthode **`CanvasRenderingContext2D.createLinearGradient()`** de l'API Canva Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". +NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". ## Syntaxe @@ -37,7 +37,7 @@ NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors ### Utilisation de la méthode `createLinearGradient` -Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. +Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. #### HTML @@ -58,15 +58,15 @@ ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -108,7 +108,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs @@ -116,9 +116,9 @@ window.addEventListener("load", drawCanvas); ## Notes spécifiques à Gecko -- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. +- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index 2ec6290329..af4afb71ae 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} -La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. +La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. ## Syntaxe @@ -20,7 +20,7 @@ Valeurs possibles : - rtl - : La direction du texte est de droite à gauche. - inherit - - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. + - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. La valeur par défaut est `inherit`. @@ -28,7 +28,7 @@ La valeur par défaut est `inherit`. ### Utilisation de la propriété `direction` -Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. #### HTML @@ -54,8 +54,8 @@ Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel ```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" /> + <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'; @@ -95,7 +95,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index a24333d9f9..e2a1aff462 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. +La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. ## Syntaxe @@ -18,28 +18,28 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ### Paramètres - `image` - - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. + - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. - `dx` - - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dy` - - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dLargeur` - - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. + - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. - dHauteur - - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. + - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. - `sx` - - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sy` - - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sLargeur` - - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. + - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. - `sHauteur` - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`. ### Exceptions - `INDEX_SIZE_ERR` - - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. + - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. - `INVALID_STATE_ERR` - : L'image reçue n'en est pas une. - `TYPE_MISMATCH_ERR` @@ -47,9 +47,9 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ## Exemples -### Utiliser la méthode `drawImage` +### Utiliser la méthode `drawImage` -Ceci est un extrait de code utilisant la méthode `drawImage` : +Ceci est un extrait de code utilisant la méthode `drawImage` : #### HTML @@ -79,8 +79,8 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <img id="source" src="rhino.jpg" width="300" height="227"> </div> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> @@ -119,7 +119,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -127,16 +127,16 @@ window.addEventListener("load", drawCanvas); ## Notes concernant la compatibilité -- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. -- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. -- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. +- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. +- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. +- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. - Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas. -- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). -- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). ## Notes -- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) +- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index c95beacdff..568197aa19 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} -La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). +La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). ## Syntaxe @@ -14,27 +14,27 @@ La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajout ### Paramètres - `x` - - : La coordonnée sur l'axe des x du centre de l'ellipse. + - : La coordonnée sur l'axe des x du centre de l'ellipse. - `y` - - : La coordonnée sur l'axe des y du centre de l'ellipse. + - : La coordonnée sur l'axe des y du centre de l'ellipse. - `rayon`X - : Le rayon du grand axe de l'ellipse. - `rayon`Y - - : Le rayon du petit axe de l'ellipse. + - : Le rayon du petit axe de l'ellipse. - `rotation` - - : La rotation pour cette ellipse, exprimée en radians. + - : La rotation pour cette ellipse, exprimée en radians. - `angleDébut` - - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. + - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. - `angleFin` - - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. -- `antihoraire` {{optional_inline}} - - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. + - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. +- `antihoraire` {{optional_inline}} + - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. ## Exemples ### Utilisation de la méthode `ellipse` -Ceci est seulement un fragment de code simple dessinant une ellipse. +Ceci est seulement un fragment de code simple dessinant une ellipse. #### HTML @@ -53,15 +53,15 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); ``` -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) : +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) : #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -101,7 +101,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -109,4 +109,4 @@ window.addEventListener("load", drawCanvas); ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index 6d79084923..fb140f74ea 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -53,8 +53,8 @@ ctx.fill(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -125,8 +125,8 @@ ctx.stroke(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -176,7 +176,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index 734483f27d..f8d39d617b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. +La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas d ### Paramètres - `x` - - : L'ordonnée *x* des coordonnées du point de départ du rectangle. + - : L'ordonnée *x* des coordonnées du point de départ du rectangle. - `y` - - : L'abscisse *y* des coordonnées du point de départ du rectangle. + - : L'abscisse *y* des coordonnées du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `fillRect` +### Utilisation de la méthode `fillRect` -Ceci est juste un extrait de code qui utilise la méthode `fillRect`. +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. #### HTML @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = "green"; @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index a55ea78000..e81260b93d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; @@ -116,7 +116,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 182d5aa7fe..318b310357 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -21,10 +21,10 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour <!----> - `x` - - : La valeur de la coordonnée sur l'axe des x du point de début du texte. + - : La valeur de la coordonnée sur l'axe des x du point de début du texte. - `y` - - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. -- `largeurMax` {{optional_inline}} + - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. +- `largeurMax` {{optional_inline}} - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police. ## Exemples @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps ```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" /> + <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"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 872b25996a..161f3e3ec2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -38,15 +38,15 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```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" /> + <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'; @@ -97,7 +97,7 @@ f.load().then(function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index fc1acc270a..b85a69358f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. +La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. 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. @@ -27,28 +27,28 @@ Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs ### Paramètres - `sx` - - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. + - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. - `sy` - - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. + - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. - `sw` - - : La largeur du rectangle à partir duquel *ImageData* sera extrait. + - : La largeur du rectangle à partir duquel *ImageData* sera extrait. - `sh` - - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. + - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. ### Valeur retournée -Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. ### Erreurs renvoyées - `IndexSizeError` - - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. ## Exemples -### Utilisation de la méthode `getImageData` +### Utilisation de la méthode `getImageData` -Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. +Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. #### HTML diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index cedbd7eaa0..d7c32d2d8a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,9 +18,9 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canv ## Exemples -### Utilisation de la propriété `globalAlpha` +### Utilisation de la propriété `globalAlpha` -Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. #### HTML @@ -50,8 +50,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```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" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> </div> <textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; @@ -91,9 +91,9 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 380) }} -### Un exemple de `globalAlpha` +### Un exemple de `globalAlpha` -Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. +Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -130,7 +130,7 @@ for (i = 0; i < 7; i++){ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -138,7 +138,7 @@ for (i = 0; i < 7; i++){ ## Notes spécifiques à Gecko -- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. +- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. ## Notes spécifiques à WebKit/Blink diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 4383ac79e0..8165774d92 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -5,21 +5,21 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. +La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). ## Syntaxe ctx.globalCompositeOperation = type; -`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. ## Exemples ### Changer l'opération de composition -Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. #### HTML @@ -59,12 +59,12 @@ ctx.fillRect(50, 50, 100, 100); ### Remarques concernant WebKit/Blink -- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. -- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. +- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. +- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. ### Remarques concernant Gecko -- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. +- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 3ab0e43267..b71d53bfab 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} -La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. +La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. -Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. +Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. ## Syntaxe @@ -16,7 +16,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise ### Options - `valeur` - - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. ## Exemples @@ -66,7 +66,7 @@ img.onload = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -74,5 +74,5 @@ img.onload = function() { ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{cssxref("image-rendering")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md index f6ab561009..5351d735c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -10,37 +10,37 @@ translation_of: Web/API/CanvasRenderingContext2D --- {{APIRef}} -L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. +L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. -Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : +Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> var ctx = canevas.getContext('2d'); -Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : +Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 -Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. +Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. -## Dessin de rectangles +## Dessin de rectangles -Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. +Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. - {{domxref("CanvasRenderingContext2D.clearRect()")}} - - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. + - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. - {{domxref("CanvasRenderingContext2D.fillRect()")}} - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_. - {{domxref("CanvasRenderingContext2D.strokeRect()")}} - - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. + - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. ## Dessiner du texte Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte. - {{domxref("CanvasRenderingContext2D.fillText()")}} - - : Dessine (rempli) un texte donné à la position (x,y) donnée. + - : Dessine (rempli) un texte donné à la position (x,y) donnée. - {{domxref("CanvasRenderingContext2D.strokeText()")}} - : Dessine (contour) un texte donné à la position (x, y) donnée. - {{domxref("CanvasRenderingContext2D.measureText()")}} @@ -53,9 +53,9 @@ Les méthodes et propriétés suivantes controllent comment les lignes sont dess - {{domxref("CanvasRenderingContext2D.lineWidth")}} - : Largeur des lignes. Défaut `1.0` - {{domxref("CanvasRenderingContext2D.lineCap")}} - - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. + - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. - {{domxref("CanvasRenderingContext2D.lineJoin")}} - - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). + - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). - {{domxref("CanvasRenderingContext2D.miterLimit")}} - : Le taux limite du miter. Sa valeur par défaut est `10`. - {{domxref("CanvasRenderingContext2D.getLineDash()")}} @@ -72,20 +72,20 @@ Les propriétés suivantes contrôlent la manière dont le texte est rendu à l - {{domxref("CanvasRenderingContext2D.font")}} - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`. - {{domxref("CanvasRenderingContext2D.textAlign")}} - - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. + - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. - {{domxref("CanvasRenderingContext2D.textBaseline")}} - - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. + - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. - {{domxref("CanvasRenderingContext2D.direction")}} - - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). + - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). ## Fill and stroke styles Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. - {{domxref("CanvasRenderingContext2D.fillStyle")}} - - : Color or style to use inside shapes. Default `#000` (black). + - : Color or style to use inside shapes. Default `#000` (black). - {{domxref("CanvasRenderingContext2D.strokeStyle")}} - - : Color or style to use for the lines around shapes. Default `#000` (black). + - : Color or style to use for the lines around shapes. Default `#000` (black). ## Gradients and patterns @@ -99,7 +99,7 @@ Fill styling is used for colors and styles inside shapes and stroke styling is u ## Shadows - {{domxref("CanvasRenderingContext2D.shadowBlur")}} - - : Specifies the blurring effect. Default `0` + - : Specifies the blurring effect. Default `0` - {{domxref("CanvasRenderingContext2D.shadowColor")}} - : Color of the shadow. Default fully-transparent black. - {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} @@ -116,19 +116,19 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.closePath()")}} - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. - {{domxref("CanvasRenderingContext2D.moveTo()")}} - - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. - {{domxref("CanvasRenderingContext2D.lineTo()")}} - - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. - {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}} - - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}} - : Adds a quadratic Bézier curve to the current path. - {{domxref("CanvasRenderingContext2D.arc()")}} - - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.arcTo()")}} - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. - {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}} - - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.rect()")}} - : Creates a path for a rectangle at position *(x, y)* with a size that is determined by *width* and *height*. @@ -143,7 +143,7 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} - : Scrolls the current path or a given path into the view. - {{domxref("CanvasRenderingContext2D.clip()")}} - - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. + - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. - {{domxref("CanvasRenderingContext2D.isPointInPath()")}} - : Reports whether or not the specified point is contained in the current path. - {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} @@ -151,7 +151,7 @@ The following methods can be used to manipulate paths of objects. ## Transformations -Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. +Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. - {{domxref("CanvasRenderingContext2D.currentTransform")}} - : Current transformation matrix ({{domxref("SVGMatrix")}} object). @@ -164,16 +164,16 @@ Objects in the `CanvasRenderingContext2D` rendering context have a current tra - {{domxref("CanvasRenderingContext2D.transform()")}} - : Multiplies the current transformation matrix with the matrix described by its arguments. - {{domxref("CanvasRenderingContext2D.setTransform()")}} - - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. + - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. - {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}} - : Resets the current transform by the identity matrix. ## Compositing - {{domxref("CanvasRenderingContext2D.globalAlpha")}} - - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). + - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). - {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} - - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. ## Drawing images @@ -187,7 +187,7 @@ See also the {{domxref("ImageData")}} object. - {{domxref("CanvasRenderingContext2D.createImageData()")}} - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black. - {{domxref("CanvasRenderingContext2D.getImageData()")}} - - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. + - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. - {{domxref("CanvasRenderingContext2D.putImageData()")}} - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. @@ -198,12 +198,12 @@ See also the {{domxref("ImageData")}} object. ## The canvas state -The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: +The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: - {{domxref("CanvasRenderingContext2D.save()")}} - - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. + - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. - {{domxref("CanvasRenderingContext2D.restore()")}} - - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. + - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. - {{domxref("CanvasRenderingContext2D.canvas")}} - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. @@ -212,7 +212,7 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Adds a hit region to the canvas. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Removes the hit region with the specified `id` from the canvas. + - : Removes the hit region with the specified `id` from the canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Removes all hit regions from the canvas. @@ -220,49 +220,49 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing ### Blink and WebKit -Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). +Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). -- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}. -- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` - - : This is redundant with an equivalent overload of `drawImage`. -- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` +- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` + - : This is redundant with an equivalent overload of `drawImage`. +- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead. ### Blink only -- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` - - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. +- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` + - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. ### WebKit only -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` - - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` + - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. <!----> @@ -274,40 +274,40 @@ Most of these APIs are [deprecated and will be removed in the future](https://c #### Prefixed APIs -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` - - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` - - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` + - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` + - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. -- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` +- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. #### Internal APIs (chrome-context only) - {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}} - - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. -- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` + - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. +- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. ### Internet Explorer -- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` - - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). +- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` + - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). ## Specifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index e3666e004c..c9a7280458 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} -La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. +La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,17 +18,17 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Can ### Options - `butt` - - : Les extrémités de ligne sont coupées à angle droit. + - : Les extrémités de ligne sont coupées à angle droit. - `round` - - : Les extrémités de ligne sont arrondies. + - : Les extrémités de ligne sont arrondies. - `square` - - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. + - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. ## Exemples ### Utilisation de la propriété `lineCap` -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. +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. #### HTML @@ -57,8 +57,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```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" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -97,11 +97,11 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Un exemple de `lineCap` +### Un exemple de `lineCap` Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides. -La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. +La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -138,7 +138,7 @@ for (var i = 0; i < lineCap.length; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -146,7 +146,7 @@ for (var i = 0; i < lineCap.length; i++) { ## Notes spécifiques à WebKit/Blink -- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. +- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index e4fd4f8c90..bdf847455b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -9,7 +9,7 @@ La propriété **`CanvasRenderingContext2D.lineJoin`** de l'API Canvas 2D déter Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés. -> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. ## Syntaxe @@ -26,7 +26,7 @@ Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et ` - `"bevel"` (biseau) - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés. - `"miter"` (onglet) - - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. + - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. ## Exemples diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 8b1b3dbffa..83bca52b28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). +La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte ## Exemples -### Utilisation de la méthode `lineTo` +### Utilisation de la méthode `lineTo` -Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. +Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. #### HTML @@ -49,8 +49,8 @@ ctx.stroke(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index 94926366d7..04ccaf4bde 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). +La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). ## Syntaxe @@ -20,21 +20,21 @@ La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domx ### Paramètres - texte - - : Le texte à mesurer. + - : Le texte à mesurer. ### Valeur retournée -Un objet {{domxref("TextMetrics")}}. +Un objet {{domxref("TextMetrics")}}. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canevas = document.getElementById('canevas'); @@ -48,7 +48,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index ca5dd0ebcf..09f3ff11e7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -49,8 +49,8 @@ ctx.stroke(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index cf51e85850..a2e331d491 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -98,7 +98,7 @@ contexte2D.stroke(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 91d1080833..fbaf106ba3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -50,8 +50,8 @@ ctx.fill(); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index dd43fde3e5..6269d2e8da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -16,15 +16,15 @@ La méthode **`CanvasRenderingContext2D.rotate()`** de l'API Canvas 2D ajoute un ### Paramètres - `angle` - - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. + - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. -Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. +Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. ## Exemples ### Utilisation de la méthode `rotate` -Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(70, 0, 100, 30); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index 69be186f58..6b577b126f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} -La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. +La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. -Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. +Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. ## Syntaxe @@ -16,15 +16,15 @@ Par défaut, une unité sur le canevas est exactement un pixel. Si on appliqu ### Paramètres - `x` - - : Facteur d'échelle dans la direction horizontale. + - : Facteur d'échelle dans la direction horizontale. - y - - : Facteur d'échelle dans la direction verticale. + - : Facteur d'échelle dans la direction verticale. ## Exemples ### Utilisation de la méthode `scale` -Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(10, 10, 10, 10); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(10, 3); @@ -89,7 +89,7 @@ window.addEventListener("load", drawCanvas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Utilisation de `scale` pour un retournement horizontal ou vertical +### Utilisation de `scale` pour un retournement horizontal ou vertical Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1)` pour le retourner verticalement. @@ -98,8 +98,8 @@ Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontaleme ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(-1, 1); @@ -140,7 +140,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 85d5078d2c..436f19da6b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} -La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. +La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. -> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. ## Syntaxe @@ -16,7 +16,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ### Paramètres - `segments` - - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. + - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. ### Valeur de retour @@ -24,7 +24,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ## Exemples -C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. +C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. ### HTML @@ -53,15 +53,15 @@ ctx.stroke(); ### Essayez le -Editez le code ci-dessous et observez les changements se produire dans le canvas: +Editez le code ci-dessous et observez les changements se produire dans le canvas: #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); @@ -109,19 +109,19 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navivgateurs {{Compat("api.CanvasRenderingContext2D.setLineDash")}} -## Notes spécifiques pour Gecko +## Notes spécifiques pour Gecko -- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. +- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. -## Notes spécifiques pour WebKit +## Notes spécifiques pour WebKit -- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. +- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index cc123acdaa..50ff4a46b8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. +La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. ## Syntaxe void ctx.setTransform(a, b, c, d, e, f); -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> +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> ### Paramètres @@ -32,9 +32,9 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</ ## Exemples -### Utilisation de la méthode `setTransform` +### Utilisation de la méthode `setTransform` -Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. #### HTML @@ -52,15 +52,15 @@ ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 24925f1d01..6e92744b06 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -45,8 +45,8 @@ Editer le code en dessous et voir vos modifications mises à jour en direct dans ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -85,7 +85,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index e5cc41b3c5..1dadb9ebb1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. +La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas ### Paramètres - `x` - - : L'abcisse *x* des coordonnées du point de départ du rectangle. + - : L'abcisse *x* des coordonnées du point de départ du rectangle. - `y` - : L'ordonnée _y_ des coordonnées du point de départ du rectangle. - largeur - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `strokeRect` +### Utilisation de la méthode `strokeRect` -Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. #### HTML @@ -51,8 +51,8 @@ ctx.strokeRect(10, 10, 100, 100); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index aab6253a44..8bf5d7ea28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -53,8 +53,8 @@ ctx.strokeRect(10, 10, 100, 100); ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; @@ -119,7 +119,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 2f7db41cd4..f687b2b396 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. +La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. ## Syntaxe @@ -16,22 +16,22 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour ### Paramètres - `texte` - - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. + - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. <!----> - `x` - - : La coordonnée sur l'axe des x du point de départ du texte. + - : La coordonnée sur l'axe des x du point de départ du texte. - `y` - - : La coordonnée sur l'axe des y du point de départ du texte. -- `largeurMax` {{optional_inline}} - - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. + - : La coordonnée sur l'axe des y du point de départ du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. ## Exemples -### Utilisation de la méthode `strokeText` +### Utilisation de la méthode `strokeText` -Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```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" /> + <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"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index 4e15fd41b9..45f2a8b340 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. +La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. ## Syntaxe @@ -22,17 +22,17 @@ Valeurs possibles : - center - : Le texte est centré. - start - - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). - end - - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). -La valeur pa défaut est `start`. +La valeur pa défaut est `start`. ## Exemples ### Utilisation de la propriété `textAlign` -Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. #### HTML @@ -58,8 +58,8 @@ Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel ```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" /> + <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'; @@ -99,7 +99,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index d43cb1f77a..b543074551 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. +La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. ## Syntaxe @@ -20,21 +20,21 @@ Valeurs possibles : - hanging - : La ligne de base du texte est la ligne de base supérieure. - middle - - : La ligne de base du texte est le milieu du cadratin. + - : La ligne de base du texte est le milieu du cadratin. - alphabetic - - : La ligne de base du texte est la ligne de base normale alphabétique. + - : La ligne de base du texte est la ligne de base normale alphabétique. - ideographic - - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. + - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. - bottom - - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. + - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. -La valeur par défaut est `alphabetic`. +La valeur par défaut est `alphabetic`. ## Exemples ### Utilisation de la propritété `textBaseline` -Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. +Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. #### HTML @@ -53,15 +53,15 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```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" /> + <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'; @@ -101,7 +101,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index e3ac8f2edd..d3be535ddd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} -La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. +La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. -Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. ## Syntaxe @@ -34,7 +34,7 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo ### Utilisation de la méthode `transform` -Ceci est seulement un fragment de code simple utilisant la méthode `transform`. +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. #### HTML @@ -59,8 +59,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 2c38c52591..cdbe0ad12b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} -La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. +La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. ## Syntaxe @@ -16,15 +16,15 @@ La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute u ### Paramètres - `x` - - : Distance de déplacement dans le sens horizontal. + - : Distance de déplacement dans le sens horizontal. - y - - : Distance de déplacement dans le sens vertical. + - : Distance de déplacement dans le sens vertical. ## Exemples ### Utilisation de la méthode `translate` -Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(0, 0, 100, 100); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : #### Code jouable ```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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.translate(50, 50); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md index 08aeb26bbd..36c2c355e8 100644 --- a/files/fr/web/api/clearinterval/index.md +++ b/files/fr/web/api/clearinterval/index.md @@ -38,7 +38,7 @@ Voir [l'exemple `setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval#Exemp | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ | | {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}} | {{Spec2("HTML WHATWG")}} | Cette méthode a été déplacée sur le _mixin_ `WindowOrWorkerGlobalScope`. | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md index acba1e7eac..f94cc4b75e 100644 --- a/files/fr/web/api/client/frametype/index.md +++ b/files/fr/web/api/client/frametype/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Client/frameType --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. +La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. ## Syntaxe diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md index e38a2fb262..26e53d0cc2 100644 --- a/files/fr/web/api/client/id/index.md +++ b/files/fr/web/api/client/id/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Client/id --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. +La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. ## Syntaxe diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md index 1727a3bf41..60c965036e 100644 --- a/files/fr/web/api/client/index.md +++ b/files/fr/web/api/client/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Client --- {{APIRef("Service Workers API")}} -L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. +L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. ## Méthodes @@ -27,15 +27,15 @@ L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorke - {{domxref("Client.id")}} {{readonlyInline}} - : Retourne l'identifiant universellement unique de l'objet `Client`. - {{domxref("Client.type")}} {{readonlyInline}} - - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. + - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. - {{domxref("Client.url")}} {{readonlyInline}} - : Retourne l'URL du client service worker courant. ## Exemples -Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. +Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. -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. +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. ```js // client service worker (par exemple un document) @@ -70,7 +70,7 @@ self.addEventListener("message", function(e) { - [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - [Promesses](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) -- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md index 12d36698bc..a2c108cd16 100644 --- a/files/fr/web/api/client/postmessage/index.md +++ b/files/fr/web/api/client/postmessage/index.md @@ -34,7 +34,7 @@ Void. ## Exemples -Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. +Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur. diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md index 7b40c93b14..c9369370e2 100644 --- a/files/fr/web/api/client/url/index.md +++ b/files/fr/web/api/client/url/index.md @@ -11,7 +11,7 @@ tags: - URL translation_of: Web/API/Client/url --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. ## Syntaxe @@ -30,8 +30,8 @@ self.addEventListener('notificationclick', function(event) { console.log('Au click de notification : ', event.notification.tag); event.notification.close(); - // Vérification pour savoir si l'évenement est ouvert et - // se focalise dessus si c'est le cas + // Vérification pour savoir si l'évenement est ouvert et + // se focalise dessus si c'est le cas event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) { diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md index e392a459aa..66c66036ad 100644 --- a/files/fr/web/api/clients/claim/index.md +++ b/files/fr/web/api/clients/claim/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Clients/claim --- {{SeeCompatTable}}{{APIRef("Service Worker Clients")}} -La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. +La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. -Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. +Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. ## Syntaxe @@ -30,18 +30,18 @@ None. ### Valeur de retour -Une `Promise.` +Une `Promise.` ## Exemple -L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. +L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. ```js self.addEventListener('install', function(event) { - event.waitUntil(self.skipWaiting()); + event.waitUntil(self.skipWaiting()); }); self.addEventListener('activate', function(event) { - event.waitUntil(self.clients.claim()); + event.waitUntil(self.clients.claim()); }); ``` @@ -49,7 +49,7 @@ self.addEventListener('activate', function(event) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | ## Compatibilité de navigateurs @@ -57,9 +57,9 @@ self.addEventListener('activate', function(event) { ## À voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Example simple de service workers](https://github.com/mdn/sw-test) -- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md index 24de95f0eb..29bcc963fb 100644 --- a/files/fr/web/api/clients/get/index.md +++ b/files/fr/web/api/clients/get/index.md @@ -10,7 +10,7 @@ tags: - get translation_of: Web/API/Clients/get --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. ## Syntaxe @@ -27,7 +27,7 @@ self.clients.get(id).then(function(client) { ### Valeur de retour -Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. +Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md index 992754486c..8ff6d7c4b2 100644 --- a/files/fr/web/api/clients/matchall/index.md +++ b/files/fr/web/api/clients/matchall/index.md @@ -10,7 +10,7 @@ tags: - Service Workers translation_of: Web/API/Clients/matchAll --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. ## Syntaxe @@ -24,14 +24,14 @@ ServiceWorkerClients.matchAll(options).then(function(clients) { - `options` - - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : + - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : - `includeUncontrolled`: Un {{domxref("Boolean")}} — défini à `true`, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est `false`. - - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. + - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. ### Valeur de retour -Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. +Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md index c991c6653c..1d678620b0 100644 --- a/files/fr/web/api/clients/openwindow/index.md +++ b/files/fr/web/api/clients/openwindow/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clients/openWindow --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. +La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification. @@ -20,11 +20,11 @@ ServiceWorkerClients.openWindow(url).then(function(WindowClient) { ### Paramètres - `url` - - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. + - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. ### Valeur de retour -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. +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. ## Exemples @@ -36,7 +36,7 @@ onotificationclick = function(event) { clients.matchAll().then(function(clients) { for (i = 0; i < clients.length; i++) { if (clients[i].url === event.data.url) { - // La fenêtre existe, focus dessus. + // La fenêtre existe, focus dessus. found = true; clients[i].focus(); break; diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md index b9ca3fca06..4a898b989f 100644 --- a/files/fr/web/api/clipboard/index.md +++ b/files/fr/web/api/clipboard/index.md @@ -15,11 +15,11 @@ translation_of: Web/API/Clipboard --- {{APIRef("Clipboard API")}} -> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. +> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. > > Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces. -L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. +L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}. @@ -27,7 +27,7 @@ Les appels aux méthodes de l’objet `Clipboard` échoueront si l’utilisateur > **Note :** En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails. -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é. +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é. ## Méthodes @@ -36,7 +36,7 @@ _`Clipboard` est basé sur l’interface {{domxref("EventTarget")}}, et inclut l - {{domxref("Clipboard.read()","read()")}} - : Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données. - {{domxref("Clipboard.readText()","readText()")}} - - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. + - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. - {{domxref("Clipboard.write()","write()")}} - : Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la `Promise` renvoyée. - {{domxref("Clipboard.writeText()","writeText()")}} diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md index 955bf1f320..1989de8383 100644 --- a/files/fr/web/api/clipboard/write/index.md +++ b/files/fr/web/api/clipboard/write/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/Clipboard/write --- {{APIRef("Clipboard API")}} -La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. +La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. -Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. +Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. > **Note :** Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information. @@ -18,15 +18,15 @@ Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permission ### Paramètres - `dataTransfer` - - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. + - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. ### Return value -Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. +Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. ## Exemple -Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. +Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. ```js function setClipboard(text) { @@ -41,7 +41,7 @@ function setClipboard(text) { } ``` -Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. +Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. ## Specifications diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md index bdd7d9543c..ead902ec4f 100644 --- a/files/fr/web/api/clipboard_api/index.md +++ b/files/fr/web/api/clipboard_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clipboard_API --- {{DefaultAPISidebar("Clipboard API")}} -L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. +L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. > **Note :** Cette API _n'est pas disponible_ dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API) (elle n'est pas exposée via {{domxref("WorkerNavigator")}}). @@ -13,7 +13,7 @@ Cette API est conçue pour remplacer l'accès au presse-papiers précédemment p ## Accéder au presse-papier -Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : +Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : ```js navigator.clipboard.readText().then( diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md index a6d23bbdf6..e128b97ef5 100644 --- a/files/fr/web/api/closeevent/index.md +++ b/files/fr/web/api/closeevent/index.md @@ -16,15 +16,15 @@ Un évènement `CloseEvent` est envoyé au client utilisant une [WebSocket](/fr/ ## Constructeur - {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} - - : Construit un nouvel événement `CloseEvent`. + - : Construit un nouvel événement `CloseEvent`. ## Propriétés -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.code")}} {{readOnlyInline}} - - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. + - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. <table class="standard-table"> <tbody> @@ -35,7 +35,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>0</code>–<code>999</code></td> - <td> </td> + <td></td> <td><strong>Reservé et inutilisé.</strong></td> </tr> <tr> @@ -72,7 +72,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1004</code></td> - <td> </td> + <td></td> <td> <strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur. @@ -82,7 +82,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1005</code></td> <td><code>CLOSE_NO_STATUS</code></td> <td> - <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un + <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu. </td> </tr> @@ -90,13 +90,13 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1006</code></td> <td><code>CLOSE_ABNORMAL</code></td> <td> - <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été + <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture). </td> </tr> <tr> <td><code>1007</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format @@ -105,7 +105,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1008</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est @@ -123,7 +123,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1010</code></td> - <td> </td> + <td></td> <td> Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait. @@ -131,7 +131,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1011</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête. @@ -139,7 +139,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td>–<code>1014</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -149,16 +149,16 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1015</code></td> - <td> </td> + <td></td> <td> - <strong>Réservé.</strong> Indique que la connexion a été fermée à cause + <strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié). </td> </tr> <tr> <td><code>1016</code>–<code>1999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -168,7 +168,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>2000</code>–<code>2999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -178,32 +178,32 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>3000</code>–<code>3999</code></td> - <td> </td> + <td></td> <td> Disponible pour être utilisé par des bibliothèques ou des frameworks. - Ces codes <strong>ne doivent pas</strong> être utilisés par des + Ces codes <strong>ne doivent pas</strong> être utilisés par des applications. </td> </tr> <tr> <td><code>4000</code>–<code>4999</code></td> - <td> </td> + <td></td> <td>Disponible pour être utilisés par des applications.</td> </tr> </tbody> </table> - {{domxref("CloseEvent.reason")}} {{readOnlyInline}} - - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. + - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. - {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}} - : Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non. ## Méthodes -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}} - - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. + - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. ## Spécifications diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md index 40f4ebe0de..62e4ee454a 100644 --- a/files/fr/web/api/comment/index.md +++ b/files/fr/web/api/comment/index.md @@ -14,7 +14,7 @@ L'interface **`Comment`** représente des annotations textuelles au sein du bali ## Propriétés -_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ +_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ ## Constructeur @@ -23,7 +23,7 @@ _Cette interface ne possède pas de propriétés spécifiques, mais en hérite ## Méthodes -_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")}}._ +_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")}}._ ## Spécifications diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md index f91b5a3815..be658e0eb2 100644 --- a/files/fr/web/api/compositionevent/index.md +++ b/files/fr/web/api/compositionevent/index.md @@ -36,8 +36,8 @@ _Cette interface hérite également des méthodes de son parent, {{domxref("UIEv | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | -| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md index 0b3aaddfaf..ae7237316d 100644 --- a/files/fr/web/api/console/assert/index.md +++ b/files/fr/web/api/console/assert/index.md @@ -28,13 +28,13 @@ Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'asse - `assertion` - : N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console. - `obj1` ... `objN` - - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. + - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. - `msg` - - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. + - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. - `subst1` ... `substN` - - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. + - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. -Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md index e0914af264..963e34b654 100644 --- a/files/fr/web/api/console/clear/index.md +++ b/files/fr/web/api/console/clear/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/Console/clear --- {{APIRef("Console API")}} -Vide la console. +Vide la console. Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared"). -À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). +À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). ## Syntaxe diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md index 7cb5fa0d25..3585fcc54a 100644 --- a/files/fr/web/api/console/count/index.md +++ b/files/fr/web/api/console/count/index.md @@ -13,13 +13,13 @@ translation_of: Web/API/Console/count --- {{APIRef("Console API")}} -Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. +Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. {{AvailableInWorkers}} Si un `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée pour ce `label` spécifiquempent. -Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. +Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. Ci-dessous, un exemple d'utilisation : @@ -44,9 +44,9 @@ La console affichera les lignes suivantes : "<no label>: 3" "<no label>: 1" -A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. +A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. -Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : +Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : ```js function greet() { @@ -69,7 +69,7 @@ La console affichera les lignes suivantes : "alice: 2" "alice: 3" -Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. +Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. ## Syntaxe @@ -78,7 +78,7 @@ Nous obtenons maintenant deux compteurs distinct basés sur un libellé différe ## Paramètres - `label` - - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. + - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. ## Spécifications diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md index 3fb703d448..26da32c5f2 100644 --- a/files/fr/web/api/console/countreset/index.md +++ b/files/fr/web/api/console/countreset/index.md @@ -30,11 +30,11 @@ Si aucun label n'as été specifié ### Warnings -Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : +Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : Counter "counter-name" doesn’t exist. -Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : +Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : Counter "default" doesn’t exist. @@ -69,7 +69,7 @@ Le retour de la console ressemblera à ceci : Pour information l'appel à `console.counterReset()` remet à zero la valeur du compteur par défaut. -S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : +S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : ```js var user = ""; @@ -96,7 +96,7 @@ On obtiendra ce retour dans la console "bob: 0" "alice: 3" -Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. +Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. ## Specifications diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md index 58ccae6929..56f3d17e6a 100644 --- a/files/fr/web/api/console/error/index.md +++ b/files/fr/web/api/console/error/index.md @@ -35,7 +35,7 @@ Affiche un message d'erreur dans la console du navigateur. - `subst1` ... `substN` - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md index aa84ded541..07097f5ee3 100644 --- a/files/fr/web/api/console/groupcollapsed/index.md +++ b/files/fr/web/api/console/groupcollapsed/index.md @@ -18,7 +18,7 @@ Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxre Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent. -Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. +Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md index 8729a7f1cb..4beb3f1a20 100644 --- a/files/fr/web/api/console/groupend/index.md +++ b/files/fr/web/api/console/groupend/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Console/groupEnd --- {{APIRef("Console API")}} -Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. +Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md index 35cf36b6fa..cde6c8f71d 100644 --- a/files/fr/web/api/console/index.md +++ b/files/fr/web/api/console/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Console L'objet **`console`** donne accès à la console de débogage du navigateur (par exemple, la [Console Web](/fr/docs/Tools/Web_Console) dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base. -La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : +La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : ```js console.log("Failed to open the specified link") @@ -61,7 +61,7 @@ Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'obj - {{domxref("Console.table()")}} - : Affiche des données tabulaires comme un tableau. - {{domxref("Console.time()")}} - - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. + - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. - {{domxref("Console.timeEnd()")}} - : Arrête le [chronomètre](/fr/docs/Web/API/console#Timers) spécifié et affiche le temps écoulé en millisecondes depuis son démarrage. - {{domxref("Console.timeStamp()")}} {{Non-standard_inline}} @@ -104,7 +104,7 @@ console.info("My first car was a", car, ". The object is: ", someObject); L'affichage ressemblera à ceci : - [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) + [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) #### Utiliser les caractères de substitution @@ -149,7 +149,7 @@ Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substit Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple : for (var i=0; i<5; i++) { - console.log("Hello, %s. You've called me %d times.", "Bob", i+1); + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); } L'affichage ressemblera à ceci : @@ -199,7 +199,7 @@ L'affichage ressemblera à ceci : {{h3_gecko_minversion("Timers", "10.0")}} -Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. +Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. Par exemple, voici ce code : @@ -224,10 +224,10 @@ L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le foo(); function foo() { - function bar() { - console.trace(); - } - bar(); + function bar() { + console.trace(); + } + bar(); } L'affichage dans la console ressemblera à ceci : diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md index 03466b8172..50a4f87e40 100644 --- a/files/fr/web/api/console/profileend/index.md +++ b/files/fr/web/api/console/profileend/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Console/profileEnd --- {{APIRef("Console API")}}{{Non-standard_header}} -> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). +> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). -La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. +La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils. diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md index d10348512f..470915e720 100644 --- a/files/fr/web/api/console/table/index.md +++ b/files/fr/web/api/console/table/index.md @@ -18,7 +18,7 @@ Cette fonction prend un argument obligatoire `data`, qui doit être un tableau ( Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet) -La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) +La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) {{AvailableInWorkers}} @@ -38,8 +38,8 @@ console.table(["apples", "oranges", "bananas"]); // un objet dont les propriétés sont des chaînes de caractères function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; + this.firstName = firstName; + this.lastName = lastName; } var me = new Person("John", "Smith"); diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md index af170f9326..b5f513a857 100644 --- a/files/fr/web/api/console/time/index.md +++ b/files/fr/web/api/console/time/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/Console/time --- {{APIRef("Console API")}} -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. +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. -Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. +Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. ## Syntaxe @@ -32,7 +32,7 @@ Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domx | ------------------------------------------------------------------------ | -------------------------------- | ------------------- | | {{SpecName("Console API", "#time", "console.time()")}} | {{Spec2("Console API")}} | Définition initiale | -## Compatibilité des navigateurs +## Compatibilité des navigateurs {{Compat("api.Console.time")}} diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md index b8fb84bc0c..efd290013a 100644 --- a/files/fr/web/api/console/timelog/index.md +++ b/files/fr/web/api/console/timelog/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Console/timeLog Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}} -Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails +Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails {{AvailableInWorkers}} @@ -34,7 +34,7 @@ Si aucun label n'est inclus default: 1042ms -Si un `label` est inclus: +Si un `label` est inclus: timer name: 1242ms @@ -60,7 +60,7 @@ Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fe  -Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté +Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté ## Spécifications diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md index 26433b17b0..6fad1f1130 100644 --- a/files/fr/web/api/credential/index.md +++ b/files/fr/web/api/credential/index.md @@ -15,9 +15,9 @@ L'interface **`Credential`**, rattachée à l'[API Credential Management](/fr/do ## Propriétés -- {{domxref("Credential.id")}} {{readonlyInline}} +- {{domxref("Credential.id")}} {{readonlyInline}} - : Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique. -- {{domxref("Credential.type")}} {{readonlyInline}} +- {{domxref("Credential.type")}} {{readonlyInline}} - : Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md index a322b56e71..009e899da4 100644 --- a/files/fr/web/api/credentialscontainer/create/index.md +++ b/files/fr/web/api/credentialscontainer/create/index.md @@ -33,14 +33,14 @@ La méthode **`create()`**, rattachée à l'interface {{domxref("CredentialsCont - `id`: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `password`: (required) {{domxref("USVString")}} - federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : - `id`: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `provider`: (required) {{domxref("USVString")}} - `protocol`: {{optional_inline}} {{domxref("USVString")}} diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md index cee2fcb61c..9dd9a64eae 100644 --- a/files/fr/web/api/credentialscontainer/get/index.md +++ b/files/fr/web/api/credentialscontainer/get/index.md @@ -17,7 +17,7 @@ La méthode **`get()`**, rattachée à l'interface {{domxref("CredentialsContain Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument **`options`**). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information. -Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. +Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. > **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md index 6ca704fc70..03b53401d9 100644 --- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md +++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CredentialsContainer/preventSilentAccess --- {{APIRef("")}}{{SeeCompatTable}} -La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. +La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine. diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md index 073f4faa25..127a5affc1 100644 --- a/files/fr/web/api/crossoriginisolated/index.md +++ b/files/fr/web/api/crossoriginisolated/index.md @@ -6,9 +6,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated --- {{APIRef()}}{{SeeCompatTable}} -La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. +La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. -Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. +Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. ## Syntaxe diff --git a/files/fr/web/api/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md index 57e9c02508..220ae419fc 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.md +++ b/files/fr/web/api/crypto/getrandomvalues/index.md @@ -24,11 +24,11 @@ Pour garantir une performance suffisante, les implémentations n’utilisent pas ### Paramètres - _typedArray_ - - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. + - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. ### Exceptions -- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. +- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. ## Exemple @@ -40,7 +40,7 @@ window.crypto.getRandomValues(array); console.log("Your lucky numbers:"); for (var i = 0; i < array.length; i++) { - console.log(array[i]); + console.log(array[i]); } ``` @@ -56,5 +56,5 @@ for (var i = 0; i < array.length; i++) { ## Voir aussi -- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. +- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. - {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires. diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md index 2f968ce1ff..359d529773 100644 --- a/files/fr/web/api/crypto_property/index.md +++ b/files/fr/web/api/crypto_property/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Window/crypto --- {{APIRef}} -La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. +La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. ## Syntaxe diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md index fa771b7c25..c56d64655c 100644 --- a/files/fr/web/api/cryptokey/index.md +++ b/files/fr/web/api/cryptokey/index.md @@ -19,11 +19,11 @@ Un objet `CryptoKey` peut être obtenu en utilisant : {{domxref("SubtleCrypto.ge _Cette interface n'hérite d'aucune propriété._ - {{domxref("CryptoKey.type")}} - - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) + - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) - {{domxref("CryptoKey.extractable")}} - : Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non. - {{domxref("CryptoKey.algorithm")}} - - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. + - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. - {{domxref("CryptoKey.usages")}} - : Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée. diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md index 017510ce92..b4aba0224b 100644 --- a/files/fr/web/api/css_font_loading_api/index.md +++ b/files/fr/web/api/css_font_loading_api/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/CSS_Font_Loading_API L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices. -> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). +> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). ## Interfaces diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md index a462fb28d2..7f2131520b 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -23,7 +23,7 @@ A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` ## Quelle est la taille du contenu affiché ? -Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) : +Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) :  diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md index e4d30ca91e..abbb92efb9 100644 --- a/files/fr/web/api/css_object_model/index.md +++ b/files/fr/web/api/css_object_model/index.md @@ -49,7 +49,7 @@ Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS d - {{domxref("StylesheetList")}} - {{domxref("TransitionEvent")}} -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")}}. +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")}}. ## Tutoriels @@ -60,17 +60,17 @@ Quelques autres interfaces sont également étentues par les spécifications rel | Spécification | Statut | Commentaire | | ------------------------------------------------ | -------------------------------------------- | ----------- | -| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | -| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | -| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | -| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | -| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | -| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | -| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | -| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | -| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | -| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | +| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | +| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | +| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | +| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | +| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | +| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | +| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | +| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | +| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | +| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | ## Notes sur la compatibilité des navigateurs -Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. +Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md index 3af0577eb9..d9e1f30897 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md @@ -139,7 +139,7 @@ screen.addEventListener("orientationchange", function () { Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}. -{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). +{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). ```js screen.lockOrientation('landscape'); diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md index eab131b831..da0e43683f 100644 --- a/files/fr/web/api/css_properties_and_values_api/index.md +++ b/files/fr/web/api/css_properties_and_values_api/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CSS_Properties_and_Values_API ## Exemples -L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : ```js window.CSS.registerProperty({ @@ -25,7 +25,7 @@ window.CSS.registerProperty({ }); ``` -Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --ma-couleur { diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md index b16fdeb972..e3bf59727a 100644 --- a/files/fr/web/api/cssmediarule/index.md +++ b/files/fr/web/api/cssmediarule/index.md @@ -35,7 +35,7 @@ En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSG | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------- | -| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | +| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | | {{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSSOM') }} | Aucun changement par rapport à {{SpecName('DOM2 Style')}} | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }} | {{ Spec2('DOM2 Style') }} | | diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md index bf637d5319..379fbb1ddd 100644 --- a/files/fr/web/api/cssrulelist/index.md +++ b/files/fr/web/api/cssrulelist/index.md @@ -10,7 +10,7 @@ A `CSSRuleList` est un objet de type tableau contenant une collection ordonnée ## Description -Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. +Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. ## Exemple diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md index da6bbcc30d..c58e945a28 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.md +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md @@ -7,7 +7,7 @@ A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRul {{APIRef("CSSOM") }} -**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) +**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) ## Syntaxe diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md index 56ddcfcab1..d071804a69 100644 --- a/files/fr/web/api/cssstyledeclaration/index.md +++ b/files/fr/web/api/cssstyledeclaration/index.md @@ -12,10 +12,10 @@ translation_of: Web/API/CSSStyleDeclaration --- {{ APIRef("CSSOM") }} -`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : +`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : -- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; -- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; +- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; +- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; - `CSSStyleDeclaration` est également une interface en **lecture seule** pour le résultat de [window.getComputedStyle()](/fr/docs/Web/API/Window/getComputedStyle). ## Attributs @@ -68,5 +68,5 @@ Le bloc de déclaration est la partie de la règle de mise en forme qui apparaî | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale. | diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md index 4e7b4c9cd0..e22916eec4 100644 --- a/files/fr/web/api/cssstylerule/index.md +++ b/files/fr/web/api/cssstylerule/index.md @@ -12,8 +12,8 @@ CSSStyleRule représente une règle de style CSS unique. Il implémente l'interf La syntaxe est décrite à l'aide du format WebIDL. interface CSSStyleRule : CSSRule { - attribute DOMString selectorText; - readonly attribute CSSStyleDeclaration style; + attribute DOMString selectorText; + readonly attribute CSSStyleDeclaration style; }; ## Properties @@ -28,7 +28,7 @@ La syntaxe est décrite à l'aide du format WebIDL. | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | | {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }} | pas de changement | -| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | +| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md index 678068ac0d..2d8390a365 100644 --- a/files/fr/web/api/cssvaluelist/index.md +++ b/files/fr/web/api/cssvaluelist/index.md @@ -23,13 +23,13 @@ Les éléments dans `CSSValueList` sont accessibles par un index integral commen _Hérite des propriétés de son parent {{domxref("CSSValue")}}_. -- {{domxref("CSSValueList.length")}} {{readonlyInline}} +- {{domxref("CSSValueList.length")}} {{readonlyInline}} - : Un `unsigned long` représentant le nombre de `CSSValues` (_valeurs CSS_) dans la liste. ## Méthodes - {{domxref("CSSValueList.item()")}} - - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. + - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. ## Spécifications diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md index 4c2246a9f8..020ef1466b 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.md +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DataTransfer/clearData 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. -> **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. +> **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. ## Syntaxe @@ -154,7 +154,7 @@ window.addEventListener('DOMContentLoaded', function () { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML5.1')}} | Définition initiale | ## Compatibilité diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md index 3be3abd508..e4db594b1c 100644 --- a/files/fr/web/api/datatransfer/files/index.md +++ b/files/fr/web/api/datatransfer/files/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DataTransfer/files --- {{APIRef("HTML Drag and Drop API")}} -La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. +La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur. @@ -34,7 +34,7 @@ Voici deux exemples : | Specification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md index 817fe3ae82..e210b7691c 100644 --- a/files/fr/web/api/datatransfer/index.md +++ b/files/fr/web/api/datatransfer/index.md @@ -6,9 +6,9 @@ tags: - Glisser-deposer translation_of: Web/API/DataTransfer --- -L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). +L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). -Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. +Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. ## Aperçu des proprietés @@ -191,52 +191,52 @@ Cet objet est disponible depuis la propriété `dataTransfer` de tous les év ### dropEffect -L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. +L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. -Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. +Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. -Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. +Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. -Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. +Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. Valeurs possibles: - **copy**: Une copie de l'élément source est faite au nouvel emplacement. - **move**: Un élément est déplacé vers un nouvel emplacement. -- **link**: Un lien est établi depuis la source vers le nouvel emplacement. +- **link**: Un lien est établi depuis la source vers le nouvel emplacement. - **none**: L'élément ne peut pas être déposé. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### effectAllowed -Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. +Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. Valeurs possibles: - **copy**: Une copie de l'élément source peut être faite à son nouvel emplacement. - **move**: Un élément peut être déplacé vers un nouvel emplacement. -- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. -- **copyLink**: Une opération copy ou link est autorisée. +- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. +- **copyLink**: Une opération copy ou link est autorisée. - **copyMove**: Une opération copy ou move est autorisée. -- **linkMove**: Une opération link ou move est autorisée. -- **all**: Toutes les opérations sont autorisées. +- **linkMove**: Une opération link ou move est autorisée. +- **all**: Toutes les opérations sont autorisées. - **none**: l'élément ne peut être déposé. -- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. +- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### files -Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. +Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. #### Exemple -Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> +Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> ### types -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. +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. 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. @@ -253,27 +253,27 @@ L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisé ### mozItemCount -Le nombre d'éléments glissés. +Le nombre d'éléments glissés. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozSourceNode -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. +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. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozUserCancelled -Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. +Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ## Methods ### addElement() -Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. +Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. void addElement( in Element element @@ -286,7 +286,7 @@ Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet ### clearData() -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. +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. void clearData( [optional] in String type @@ -299,9 +299,9 @@ Supprime les données associées au type spécifié. L'argument type est facult ### getData() -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. +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. -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. +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. void getData( in String type @@ -314,7 +314,7 @@ Une erreur de sécurité se produira si vous tentez de récupérer des données ### setData() -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. +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. void setData( in String type, @@ -330,11 +330,11 @@ Définit une donnée pour le type spécifié. Si des données pour le type n'e ### setDragImage() -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é. +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é. -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. +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. -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. +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. void setDragImage( in Element image, @@ -353,15 +353,15 @@ Les coordonnées spécifient le décalage à l'intérieur de l'image spécifia ### mozClearDataAt() -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. +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. Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant `mozItemCount` par un. -Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. +Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. void mozClearDataAt( [optional] in String type, @@ -377,9 +377,9 @@ Si la liste `format` est vide, alors les données associées à tous les format ### mozGetDataAt() -Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. +Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. nsIVariant mozGetDataAt( [optional] in String type, @@ -395,11 +395,11 @@ Récupère les données associées au format donné pour un élément à l'index ### mozSetDataAt() -Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. +Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. -Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. +Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. -La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). +La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). > **Note :** Cette méthode est spécifique à Gecko. @@ -420,7 +420,7 @@ La donnée doit être une chaîne, ou un type primitif booléen, ou un type n ### mozTypesAt() -Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. +Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. > **Note :** Cette méthode est spécifique à Gecko. diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md index 6f8edf15bd..d0be63d3e4 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/DedicatedWorkerGlobalScope --- {{APIRef("Web Workers API")}} -L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). +L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). ## Propriétés _Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ - {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}} - - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. + - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. ### Propriétés héritées de WorkerGlobalScope @@ -43,7 +43,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalSco - {{domxref("WorkerGlobalScope.close()")}} - : Annule toute tâche en attente dans la boucle d'événement du `WorkerGlobalScope`, mettant alors fin à ce contexte précis. - {{domxref("DedicatedWorkerGlobalScope.postMessage")}} - - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. + - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. ### Héritées de WorkerGlobalScope diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md index 1082fed843..3eacb52494 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope/name --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. +La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. ## Syntaxe @@ -41,7 +41,7 @@ self.name | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md index b2ac98e787..40d3950896 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity --- {{ ApiRef("Device Orientation Events") }} -La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. +La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. -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. +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. ## Syntaxe diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md index b72ca21c2d..ac1a931119 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md @@ -26,7 +26,7 @@ Le constructeur **`DeviceMotionEvent`** crée un nouveau {{domxref("DeviceMotion - : Les options sont les suivantes : - - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) + - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) <sup>2</sup> diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md index f23131a75f..37cf4ab26b 100644 --- a/files/fr/web/api/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/index.md @@ -40,7 +40,7 @@ translation_of: Web/API/DeviceMotionEvent ```js window.addEventListener('devicemotion', function(event) { - console.log(event.acceleration.x + ' m/s2'); + console.log(event.acceleration.x + ' m/s2'); }); ``` diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md index 80f4374fac..4d69fc0266 100644 --- a/files/fr/web/api/devicemotionevent/interval/index.md +++ b/files/fr/web/api/devicemotionevent/interval/index.md @@ -19,7 +19,7 @@ La propriété **`interval`** renvoie la granularité temporelle, exprimée en m | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md index 6fead5a4c6..aee893522d 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.md +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/DeviceOrientationEvent.absolute --- {{ ApiRef() }} -Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. +Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md index 4c0b77dcab..96f5cf3108 100644 --- a/files/fr/web/api/deviceorientationevent/index.md +++ b/files/fr/web/api/deviceorientationevent/index.md @@ -36,7 +36,7 @@ L'évènement `DeviceOrientationEvent` met à la disposition du développeur des ```js window.addEventListener('deviceorientation', function(event) { - console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); + console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); }); ``` diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md index c96fba2151..11abff3fb4 100644 --- a/files/fr/web/api/document/adoptnode/index.md +++ b/files/fr/web/api/document/adoptnode/index.md @@ -21,7 +21,7 @@ Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans leq node = document.adoptNode(externalNode); - `node` - - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. + - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. - `externalNode` - : est le noeud à adopter existant dans un autre document. diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md index 6962f0342e..11b4d50036 100644 --- a/files/fr/web/api/document/alinkcolor/index.md +++ b/files/fr/web/api/document/alinkcolor/index.md @@ -11,22 +11,22 @@ translation_of: Web/API/Document/alinkColor --- {{APIRef("DOM")}}{{Deprecated_header}} -Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. +Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. ## Syntaxe var color = document.alinkColor; document.alinkColor = color; -*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) +*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) ## Notes -La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. +La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. -`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. +`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. -Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. +Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. [Gecko](/fr/docs/Glossary/Gecko) supporte `alinkColor`/`:active` et [`:focus`](/fr/docs/Web/CSS/:focus). Internet Explorer 6 et 7 supportent `alinkColor`/`:active` seulement pour la [balise HTML des liens (`<a>`)](/fr/docs/Web/HTML/Element/a) et le comportement est le même que `:focus` sur Gecko. Il n'y a pas de support pour `:focus` dans IE. diff --git a/files/fr/web/api/document/anchors/index.md b/files/fr/web/api/document/anchors/index.md index dca923de8e..d023a61896 100644 --- a/files/fr/web/api/document/anchors/index.md +++ b/files/fr/web/api/document/anchors/index.md @@ -4,7 +4,7 @@ slug: Web/API/Document/anchors translation_of: Web/API/Document/anchors original_slug: Web/API/Document/Document.anchors --- -{{APIRef("DOM")}} {{deprecated_header()}} +{{APIRef("DOM")}} {{deprecated_header()}} `anchors` retourne une liste de toutes les ancres du document. @@ -21,7 +21,7 @@ if ( document.anchors.length >= 5 ) { } ``` -L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : +L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : ```html <!DOCTYPE html> @@ -73,7 +73,7 @@ function init() { ## Notes -Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. +Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. ## Spécification diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md index 2969fbf7ed..3773488d4d 100644 --- a/files/fr/web/api/document/bgcolor/index.md +++ b/files/fr/web/api/document/bgcolor/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/bgColor --- {{APIRef("DOM")}} {{ Deprecated_header() }} -La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. +La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. ## Syntaxe @@ -22,9 +22,9 @@ La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (back ## Notes -La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). +La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). -`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. +`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a9fd2392a8..5620723d03 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -45,32 +45,32 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame ```js function insertBreakAtPoint(e) { - var range; - var textNode; - var offset; - - if (document.caretPositionFromPoint) { - range = document.caretPositionFromPoint(e.clientX, e.clientY); - textNode = range.offsetNode; - offset = range.offset; - - } else if (document.caretRangeFromPoint) { - range = document.caretRangeFromPoint(e.clientX, e.clientY); - textNode = range.startContainer; - offset = range.startOffset; - } - - // divise seulement les TEXT_NODE (noeuds texte) - if (textNode && textNode.nodeType == 3) { - var replacement = textNode.splitText(offset); - var br = document.createElement('br'); - textNode.parentNode.insertBefore(br, replacement); - } + var range; + var textNode; + var offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositi + textNode = range.offset + offset = range.offset; + + } else if (document.caretRangeFromPo + range = document.caretRange + + offset = range.startOffset; + } + + // divise seulement les TEXT_NODE (noeuds + if (textNode && textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } } var paragraphs = document.getElementsByTagName("p"); for (i=0 ; i < paragraphs.length; i++) { - paragraphs[i].addEventListener("click", insertBreakAtPoint, false); + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); } ``` diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md index e2ccc567e9..87e3d76c1b 100644 --- a/files/fr/web/api/document/clear/index.md +++ b/files/fr/web/api/document/clear/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Document/clear Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla. -Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. +Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. ## Syntaxe diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md index e0a238c8fd..b0a0da7dfa 100644 --- a/files/fr/web/api/document/compatmode/index.md +++ b/files/fr/web/api/document/compatmode/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Document/compatMode --- {{ ApiRef("DOM") }} -Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. +Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. ## Syntaxe @@ -18,16 +18,16 @@ Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mo ## Valeurs -- `"BackCompat"` si le document est a ffiché en mode "quirks" ; +- `"BackCompat"` si le document est a ffiché en mode "quirks" ; <!----> - mode - - : est une valeur énumérée qui peut être : + - : est une valeur énumérée qui peut être : <!----> -- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). +- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). <!----> diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md index 21309bbf71..6e1bcf036a 100644 --- a/files/fr/web/api/document/contenttype/index.md +++ b/files/fr/web/api/document/contenttype/index.md @@ -22,7 +22,7 @@ Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-t ## Notes -La propriété n'est pas affectée par les balises META. +La propriété n'est pas affectée par les balises META. ## Spécifications diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md index 42bd4f5991..e7a3015206 100644 --- a/files/fr/web/api/document/createattribute/index.md +++ b/files/fr/web/api/document/createattribute/index.md @@ -28,7 +28,7 @@ Un nœud {{domxref("Attr")}}. ### Exceptions levées -- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. +- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. ## Exemples diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index 98fcfd0f37..791aae2d6f 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -83,7 +83,7 @@ class ExpandingList extends HTMLUListElement { customElements.define('expanding-list', ExpandingList, { extends: 'ul' }); ``` -Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : +Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : ```js let expandingList = document.createElement('ul', { is : 'expanding-list' }) @@ -97,7 +97,7 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs @@ -114,4 +114,4 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ - {{domxref("Node.appendChild()")}} - {{domxref("Node.insertBefore()")}} - {{domxref("Node.hasChildNodes()")}} -- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. +- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md index d374570e70..5b543c6c3e 100644 --- a/files/fr/web/api/document/createelementns/index.md +++ b/files/fr/web/api/document/createelementns/index.md @@ -30,7 +30,7 @@ var element = document.createElementNS(namespaceURI, qualifiedName[, options]); - `qualifiedName` - : est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété [nodeName](/fr/docs/Web/API/Node/nodeName) de l'élément créé est initialisée avec la valeur de `qualifiedName` - `Options` {{Optional_Inline}} - - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. + - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. ### Valeur de retour @@ -84,7 +84,7 @@ Cet exemple crée un nouvel élément \<div> dans l'espace de noms [XHTML](/fr/d | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md index c89db358cf..945a292136 100644 --- a/files/fr/web/api/document/createnodeiterator/index.md +++ b/files/fr/web/api/document/createnodeiterator/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Document/createNodeIterator --- {{APIRef("DOM")}} -Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). +Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). ## Syntaxe @@ -147,9 +147,9 @@ var nodeIterator = document.createNodeIterator(root, whatToShow, filter); ```js var nodeIterator = document.createNodeIterator( - document.body, - NodeFilter.SHOW_ELEMENT, - function(node) { + document.body, + NodeFilter.SHOW_ELEMENT, + function(node) { return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; } ); @@ -157,7 +157,7 @@ var pars = []; var currentNode; while (currentNode = nodeIterator.nextNode()) { - pars.push(currentNode); + pars.push(currentNode); } ``` diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md index b4284bf5c7..d8eae2515e 100644 --- a/files/fr/web/api/document/creatensresolver/index.md +++ b/files/fr/web/api/document/creatensresolver/index.md @@ -26,7 +26,7 @@ Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les dé ## Notes -Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. +Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` ([cette approche](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace) fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur [comment créer un résolveur d'espace de nom défini par l'utilisateur](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur) si vous souhaitez adopter cette dernière approche. diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md index 48fd8b5010..1e0050e526 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.md +++ b/files/fr/web/api/document/createprocessinginstruction/index.md @@ -23,7 +23,7 @@ translation_of: Web/API/Document/createProcessingInstruction ### Paramètres - `Processing Instruction node` est un noeud {{domxref("ProcessingInstruction")}}. -- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). +- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). - `data` est une string (_chaîne de caractères_) contenant les données à ajouter aux données du noeud. ### Exceptions diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md index c40f105f7f..6efa380e69 100644 --- a/files/fr/web/api/document/createrange/index.md +++ b/files/fr/web/api/document/createrange/index.md @@ -16,7 +16,7 @@ Retourne un objet {{domxref("Range")}}. range = document.createRange(); -`range` devient un objet {{domxref("Range")}}. +`range` devient un objet {{domxref("Range")}}. ## Exemple @@ -29,7 +29,7 @@ range.setEnd(endNode, endOffset); ## Notes -Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. +Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. ## Spécification diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md index 030d29723b..230aebed60 100644 --- a/files/fr/web/api/document/createtreewalker/index.md +++ b/files/fr/web/api/document/createtreewalker/index.md @@ -166,7 +166,7 @@ while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | +| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md index cd9cfbe64a..9c4536274d 100644 --- a/files/fr/web/api/document/documentelement/index.md +++ b/files/fr/web/api/document/documentelement/index.md @@ -36,9 +36,9 @@ Pour tout document HTML non vide, `document.documentElement` sera toujours un é | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | -| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | -| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | +| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | +| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md index b3ee14255f..3021cc10dc 100644 --- a/files/fr/web/api/document/documenturi/index.md +++ b/files/fr/web/api/document/documenturi/index.md @@ -27,7 +27,7 @@ Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie l | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md index 88c81d247b..e66799067d 100644 --- a/files/fr/web/api/document/documenturiobject/index.md +++ b/files/fr/web/api/document/documenturiobject/index.md @@ -24,7 +24,7 @@ var uri = doc.documentURIObject; ## Exemple - // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », + // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », // en supposant que ce code s'exécute dans le contexte de browser.xul var uriObj = content.document.documentURIObject; diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md index 0f050e51e7..f4542e2c55 100644 --- a/files/fr/web/api/document/domain/index.md +++ b/files/fr/web/api/document/domain/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/domain --- {{ApiRef}} -Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). +Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). ## Syntaxe @@ -39,19 +39,19 @@ var domaine = document.domain; ## Notes -Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. +Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. -Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". +Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". -Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. +Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. -Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). +Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). ## Spécification -- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) -- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) +- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) +- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) ## Voir aussi -- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) +- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 787f2a1d16..34fea14e97 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -90,7 +90,7 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet ```css hidden body { display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .controls { diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md index f285e0a7b1..3a1ed6992a 100644 --- a/files/fr/web/api/document/drag_event/index.md +++ b/files/fr/web/api/document/drag_event/index.md @@ -134,7 +134,7 @@ L'événement drag est déclenché lorsqu'un élément ou une section de texte e | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md index 9c76951378..8ac8132e1e 100644 --- a/files/fr/web/api/document/dragend_event/index.md +++ b/files/fr/web/api/document/dragend_event/index.md @@ -132,7 +132,7 @@ L'événement **dragend** est déclenché lorsque une opération de glissement e | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateurs diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md index 4aff1b3c8d..c1bde307af 100644 --- a/files/fr/web/api/document/dragenter_event/index.md +++ b/files/fr/web/api/document/dragenter_event/index.md @@ -134,7 +134,7 @@ L'événement **dragenter** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatiblités navigateurs diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md index 6c5b8849bd..3cd24e1463 100644 --- a/files/fr/web/api/document/dragleave_event/index.md +++ b/files/fr/web/api/document/dragleave_event/index.md @@ -132,7 +132,7 @@ L'événement **dragleave** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md index c189df61a0..9c1a7b27e4 100644 --- a/files/fr/web/api/document/dragover_event/index.md +++ b/files/fr/web/api/document/dragover_event/index.md @@ -134,7 +134,7 @@ L'événement **dragover** est déclenché lorsqu'un élément ou une sélection | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 152aeaeb86..afaa26a6a2 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -51,7 +51,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> + </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> @@ -61,77 +61,77 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él ### CSS Content ```css - #draggable { - width: 200px; - height: 20px; - text-align: center; - background: white; - } - - .dropzone { - width: 200px; - height: 20px; - background: blueviolet; - margin-bottom: 10px; - padding: 10px; - } + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } ``` ### JavaScript Content ```js - var dragged; - - /* Les événements sont déclenchés sur les objets glissables */ - document.addEventListener("drag", function( event ) { - - }, false); - - 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.addEventListener("dragend", function( event ) { - // reset de la transparence - event.target.style.opacity = ""; - }, false); - - /* 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.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"; - } - - }, false); - - 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 = ""; - } - - }, false); - - 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 ); - } - - }, false); + var dragged; + + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { + + }, false); + + 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.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); + + /* 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.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"; + } + + }, false); + + 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 = ""; + } + + }, false); + + 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 ); + } + + }, false); ``` {{ EmbedLiveSample('Exemple_dropzone') }} @@ -140,7 +140,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md index 539c0d9ce2..ebeb951ef1 100644 --- a/files/fr/web/api/document/drop_event/index.md +++ b/files/fr/web/api/document/drop_event/index.md @@ -134,7 +134,7 @@ L'événement **drop** est déclenché lorsqu'un élément ou une sélection de | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}} | {{Spec2("HTML5.1")}} | Première définition | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md index cbd5891099..fcee637525 100644 --- a/files/fr/web/api/document/elementfrompoint/index.md +++ b/files/fr/web/api/document/elementfrompoint/index.md @@ -57,4 +57,4 @@ Si le point spécifié est en dehors de la portion visible du document ou que l' ### Spécification -- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) +- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index 275ad2f1e8..637b6f42b3 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). +La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). ## Syntaxe @@ -82,4 +82,4 @@ if (document.elementsFromPoint) { ## Voir aussi - {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}} -- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} +- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md index ac899fc8c4..f5a8b65ad3 100644 --- a/files/fr/web/api/document/enablestylesheetsforset/index.md +++ b/files/fr/web/api/document/enablestylesheetsforset/index.md @@ -26,7 +26,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Notes - Les correspondances de titre sont sensibles à la casse. -- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. +- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. - Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode. - Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}. @@ -36,7 +36,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Spécifications -- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md index 44ea0ed1da..39de25eb09 100644 --- a/files/fr/web/api/document/evaluate/index.md +++ b/files/fr/web/api/document/evaluate/index.md @@ -26,17 +26,17 @@ La méthode **`evaluate()`** renvoie un {{domxref("XPathResult")}} basé sur une - `xpathExpression` est une chaîne de caractères représentant le XPath à évaluer. - `contextNode` spécifie le noeud de contexte pour la requête (voir [XPath specification](http://www.w3.org/TR/xpath)) . Il est courant de transmettre un document en tant que nœud de contexte. - `namespaceResolver` est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. `null` est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé. -- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. -- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult +- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. +- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult ## Exemples ```js - var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); + 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 ( ) ; - var alertText = "Level 2 headings in this document are:\n" ; + var thisHeading = headings . iterateNext ( ) ; + var alertText = "Level 2 headings in this document are:\n" ; while ( thisHeading ) { alertText + = thisHeading . textContent + "\n" ; thisHeading = headings . iterateNext ( ) ; @@ -52,9 +52,9 @@ Une optimisation supplémentaire peut être obtenue en utilisant soigneusement l document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); ``` -Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) +Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) -Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. +Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. ## Notes diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md index 9331ece590..d8f7419e5d 100644 --- a/files/fr/web/api/document/forms/index.md +++ b/files/fr/web/api/document/forms/index.md @@ -90,7 +90,7 @@ var selectFormElement = document.forms[index].elements[index]; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 9deb984230..9d8c81d41c 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} -La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. +La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. 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")}}. @@ -56,9 +56,9 @@ function changeColor(newColor) { ## Notes d'utilisation -L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. +L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. -Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. +Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. ## Autre exemple @@ -96,7 +96,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el vaudra null ! ``` -**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. +**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. ## Spécification @@ -107,7 +107,7 @@ var el = document.getElementById('testqq'); // el vaudra null ! | {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM3 Core')}} | Remplace DOM 2 | | {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} | {{Spec2('DOM WHATWG')}} | Remplacera DOM 3 | -Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) +Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md index 02659c2a50..93148bfffb 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.md +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -23,15 +23,15 @@ Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les ## Exemples -Trouve tous les éléments ayant la classe « test » : +Trouve tous les éléments ayant la classe « test » : document.getElementsByClassName('test') -Trouve tous les éléments ayant les classes « rouge » et « test » : +Trouve tous les éléments ayant les classes « rouge » et « test » : document.getElementsByClassName('rouge test') -Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : +Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : document.getElementById('main').getElementsByClassName('test') @@ -46,7 +46,7 @@ var testDivs = Array.prototype.filter.call(testElements, function(testElement){ XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code> -## Obtenir la classe des éléments test +## Obtenir la classe des éléments test C'est la méthode d'opération la plus couramment utilisée. diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md index dd734d067d..f4f90ae38b 100644 --- a/files/fr/web/api/document/getelementsbyname/index.md +++ b/files/fr/web/api/document/getelementsbyname/index.md @@ -54,7 +54,7 @@ La méthode **getElementsByName** fonctionne différemment dans différents navi | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale | ## Voir aussi diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md index 5ba9a313ba..77710b3537 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.md +++ b/files/fr/web/api/document/getelementsbytagname/index.md @@ -17,9 +17,9 @@ Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise var elements = document.getElementsByTagName(name); - `elements` est une liste de nœuds (`NodeList`) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre. -- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». +- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». -> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. +> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. ## Exemple @@ -94,7 +94,7 @@ Lorsqu'elle est appelée sur un document HTML, `getElementsByTagName()` classe s ## Spécifications -- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) +- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) ## Voir aussi diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md index e57571e2f3..be2cbd7104 100644 --- a/files/fr/web/api/document/hasfocus/index.md +++ b/files/fr/web/api/document/hasfocus/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/hasFocus --- {{ ApiRef() }} -La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. +La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. > **Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus. diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md index 2aaeb008e4..427820b99a 100644 --- a/files/fr/web/api/document/images/index.md +++ b/files/fr/web/api/document/images/index.md @@ -32,5 +32,5 @@ for(var i = 0; i < listeimg.length; i++) { ## Spécification -- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) -- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) +- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) +- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md index 65c30cb570..c933fd88bb 100644 --- a/files/fr/web/api/document/importnode/index.md +++ b/files/fr/web/api/document/importnode/index.md @@ -52,7 +52,7 @@ Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Doc | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | | {{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md index 273a712654..483e85f3b4 100644 --- a/files/fr/web/api/document/index.md +++ b/files/fr/web/api/document/index.md @@ -71,13 +71,13 @@ _Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref(" - {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}} - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place. - {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}} - - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. + - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. - {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}} - : retourne un {{jsxref("Boolean")}} qui est `true` _(vrai)_ seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire. -- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} +- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - : L'élément qui est actuellement affiché en mode plein écran pour ce document. - {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. + - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. - {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}} - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document. - {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}} @@ -107,7 +107,7 @@ L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} : ### Extensions du document HTML -L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. +L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. - {{domxref("Document.activeElement")}} {{readonlyinline}} - : Renvoie l'élément courant qui a la focus. @@ -123,7 +123,7 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref <!----> - {{domxref("Document.body")}} - - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. + - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. - {{domxref("Document.cookie")}} - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie. @@ -162,15 +162,15 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant. - {{domxref("Document.plugins")}} {{readonlyinline}} - : Renvoie une liste des plugins disponibles. -- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} +- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} - : retourne l'état du chargement du document. - {{domxref("Document.referrer")}} {{readonlyinline}} - : Renvoie l'URI de la page qui a amené à cette page. - {{domxref("Document.scripts")}} {{readonlyinline}} - - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. + - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. - {{domxref("Document.title")}} - : Renvoie le titre du document courant. -- {{domxref("Document.URL")}} {{readonlyInline}} +- {{domxref("Document.URL")}} {{readonlyInline}} - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant. <!----> @@ -191,12 +191,12 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.oncut")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} . - {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. - {{domxref("Document.onfullscreenerror")}} {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. - {{domxref("Document.onpaste")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} . @@ -207,9 +207,9 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}} - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} . - {{domxref("Document.onselectionchange")}} {{experimental_inline}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. - {{domxref("Document.onvisibilitychange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. - {{domxref("Document.onwheel")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} . @@ -313,7 +313,7 @@ L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} : - {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}} - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés. -L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : +L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : - {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}} - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). @@ -322,7 +322,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") - {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}} - : évalue l'expression XPath . -### Extensions pour les documents HTML +### Extensions pour les documents HTML - {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}} - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien. @@ -365,7 +365,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") | {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | en vue de remplacer DOM 3 | | {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}} | {{Spec2('HTML WHATWG')}} | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` | | {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}} | {{Spec2('DOM3 XPath')}} | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document. | -| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | +| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | | {{SpecName('HTML Editing','#dom-document-getselection','Document')}} | {{Spec2('HTML Editing')}} | Étend l'interface `Document` | | {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM View')}} | Étend l'interface `Document` | | {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM')}} | Étend l'interface `Document` | @@ -380,7 +380,7 @@ Mozilla définit un ensemble de propriétés non-standard créées seulement pou - {{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution. - {{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}} - - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). + - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). - {{domxref("document.popupNode")}} - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle. - {{domxref("document.tooltipNode")}} @@ -402,7 +402,7 @@ Mozilla a également défini quelques méthodes non standard : Microsoft a défini quelques propriétés non standard : - {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}} - - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). + - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document : diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md index 98da11d1ce..1e43deab33 100644 --- a/files/fr/web/api/document/lastmodified/index.md +++ b/files/fr/web/api/document/lastmodified/index.md @@ -20,13 +20,13 @@ alert(document.lastModified); // renvoie: 11/28/2015 16:11:15 ``` -### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) +### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) ```js var oLastModif = new Date(document.lastModified); ``` -### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. +### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. ```js var nLastModif = Date.parse(document.lastModified); @@ -38,8 +38,8 @@ Veuillez noter qu'en tant que chaîne de caractères, `lastModified` ne peut êt ```js if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - alert("Cette page a changé !"); + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + alert("Cette page a changé !"); } ``` @@ -48,20 +48,20 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:( ```js var - nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), - nLastModif = Date.parse(document.lastModified); + nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), + nLastModif = Date.parse(document.lastModified); if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - if (isFinite(nLastVisit)) { - alert("Cette page a changé !"); - } + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + if (isFinite(nLastVisit)) { + alert("Cette page a changé !"); + } } ``` -> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) +> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) -Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). +Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). ## Spécification diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md index c0fb8e8080..5a991bfa3d 100644 --- a/files/fr/web/api/document/laststylesheetset/index.md +++ b/files/fr/web/api/document/laststylesheetset/index.md @@ -27,7 +27,7 @@ var lastSheetSet = document.lastStyleSheetSet; if (!lastSheetSet) { lastSheetSet = "Sheet not yet changed"; } -console.log("The last sheet set is: " + lastSheetSet); +console.log("The last sheet set is: " + lastSheetSet); ``` ## Voir aussi @@ -39,4 +39,4 @@ console.log("The last sheet set is: " + lastSheetSet); ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md index 5b9fabd4e9..a92f7d73dd 100644 --- a/files/fr/web/api/document/location/index.md +++ b/files/fr/web/api/document/location/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Document/location --- La propriété en lecture seule **`Document.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location), contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL. -Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. +Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. -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. +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. Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est _null_. diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md index c91cbf97fd..f5e689a2a2 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.md +++ b/files/fr/web/api/document/mozsetimageelement/index.md @@ -43,7 +43,7 @@ Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque foi </style> ``` -Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. +Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. ```js var c = 0x00; diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md index 8a9529ff35..7f2646f759 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.md +++ b/files/fr/web/api/document/mozsyntheticdocument/index.md @@ -25,7 +25,7 @@ Il peut être utile, si vous avez un élément de menu contextuel que vous souha var isSynthetic = document.mozSyntheticDocument; if (isSynthetic) { - /* insert your menu item here */ + /* insert your menu item here */ } ## Spécifications diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md index c2bdbdf88f..41c55f6646 100644 --- a/files/fr/web/api/document/ononline/index.md +++ b/files/fr/web/api/document/ononline/index.md @@ -20,12 +20,12 @@ Un évènement "`online`" est lancé sur le `<body>` (_corps_) de chaque page qu Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles : - en utilisant [`addEventListener`](/en/DOM/element.addEventListener) sur `window`, `document` ou `document.body` -- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). -- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. +- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). +- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. ## Exemple -Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. +Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. ## Références diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md index c427d5df05..7832387d17 100644 --- a/files/fr/web/api/document/open/index.md +++ b/files/fr/web/api/document/open/index.md @@ -32,7 +32,7 @@ Par ailleurs, un appel automatique à `document.open()` est réalisé lorsque [d Cette méthode ne doit pas être confondue avec [window.open()](/fr/docs/Web/API/Window/open). `document.open` permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que `window.open` fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme `window` est l'objet, si on appelle juste `open(...)`, il sera traité comme un appel à `window.open(...)`. Le document ouvert peut être fermé à l'aide de [document.close()](/fr/docs/Web/API/Document/close). -Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. +Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. Si vous ne voulez pas créer une entrée d'historique, remplacez `open()` par `open("text/html", "replace")`. diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md index 326c3eef82..b2a08c557c 100644 --- a/files/fr/web/api/document/origin/index.md +++ b/files/fr/web/api/document/origin/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/origin --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. +La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. ## Exemples diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md index c27b61b7a9..50606d7e56 100644 --- a/files/fr/web/api/document/popupnode/index.md +++ b/files/fr/web/api/document/popupnode/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/popupNode > **Note :** À partir de Gecko 2.0, les auteurs sont encouragés à utiliser la propriété `triggerNode` de `menupopup` à la place. -Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. +Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs `popup` ou `context`. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode [showPopup](/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup) de la fenêtre contextuelle, vous pouvez définir la propriété `popupNode` directement au préalable. diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md index 9dabb35946..41df97cc20 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.md +++ b/files/fr/web/api/document/preferredstylesheetset/index.md @@ -34,7 +34,7 @@ if (document.preferredStyleSheetSet) { ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md index 5b3e19ea84..1829792eb0 100644 --- a/files/fr/web/api/document/queryselector/index.md +++ b/files/fr/web/api/document/queryselector/index.md @@ -14,9 +14,9 @@ translation_of: Web/API/Document/querySelector --- {{ ApiRef("DOM") }} -La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. +La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. -> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. +> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. ## Syntaxe @@ -27,13 +27,13 @@ element = document.querySelector(sélecteurs); ### Paramètres - `selectors` (sélecteurs) - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. > **Note :** les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations. ### Valeur retournée -Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. +Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. 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. @@ -44,13 +44,13 @@ Si vous avez besoin d'une liste de tous les éléments correspondant aux sélect ## Notes d'utilisation -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é. +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é. Les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) CSS ne retourneront jamais aucun élément, comme spécifié dans l'[API des sélecteurs](http://www.w3.org/TR/selectors-api/#grammar) (en). ### Caractère spécial d'échappement -Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : +Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : ```html <div id="machin\bidule"></div> @@ -73,7 +73,7 @@ Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte p ### Trouver le premier élément correspondant à une classe -Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : +Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : ```js var el = document.querySelector(".maclasse"); @@ -81,7 +81,7 @@ var el = document.querySelector(".maclasse"); ### Un sélecteur plus complexe -Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : +Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : ```js var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']"); @@ -91,7 +91,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | -| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | +| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | | {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition initiale | ## Compatibilité des navigateurs @@ -101,7 +101,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i ## Voir aussi - [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) -- {{domxref("document.querySelectorAll()")}} ; -- {{domxref("element.querySelector()")}} ; -- {{domxref("element.querySelectorAll()")}} ; +- {{domxref("document.querySelectorAll()")}} ; +- {{domxref("element.querySelector()")}} ; +- {{domxref("element.querySelectorAll()")}} ; - [Extraits de code pour `querySelector`](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md index 07088e2c73..fcc315b3ea 100644 --- a/files/fr/web/api/document/queryselectorall/index.md +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/Document/querySelectorAll --- {{APIRef("DOM")}} -La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. +La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. -> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . +> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . ## Syntaxe @@ -24,7 +24,7 @@ elementList = parentNode.querySelectorAll(selectors); ### Paramètres - `selecteurs` - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. > **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations. @@ -32,7 +32,7 @@ elementList = parentNode.querySelectorAll(selectors); 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 . -> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. +> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. ### Exceptions @@ -41,13 +41,13 @@ Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} p ## Exemples -Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : +Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : ```js const matches = document.querySelectorAll("p"); ``` -Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : +Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : ```js const matches = document.querySelectorAll("div.note, div.alert"); @@ -89,7 +89,7 @@ highlightedItems.forEach(function(userItem) { ## Notes d'utilisation -`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. +`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. ### HTML @@ -144,4 +144,4 @@ inner.length; // 0 - {{domxref("document.querySelector")}} - {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}} - {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}} -- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) +- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md index 527d72e815..c256925113 100644 --- a/files/fr/web/api/document/readystate/index.md +++ b/files/fr/web/api/document/readystate/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Document/readyState --- {{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }} -La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. +La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. -À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. +À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. ## Syntaxe @@ -20,14 +20,14 @@ La valeur **Document.readyState** est une propriété de {{ domxref("document") ### Valeurs -La variable `readyState` peut valoir : +La variable `readyState` peut valoir : - **`loading`** - : Le {{ domxref("document") }} est encore en chargement. - **`interactive`** - - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. + - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. - **`complete`** - - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. + - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. ## Exemples @@ -51,7 +51,7 @@ switch (document.readyState) { } ``` -### readystatechange comme alternative à DOMContentLoaded +### readystatechange comme alternative à DOMContentLoaded ```js // alternative à DOMContentLoaded @@ -62,7 +62,7 @@ document.onreadystatechange = function () { } ``` -### readystatechange comme alternative à load +### readystatechange comme alternative à load ```js // alternative à load @@ -73,7 +73,7 @@ document.onreadystatechange = function () { } ``` -### 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 ```js // Modification du document <body> dès que possible en utilisant un script externe @@ -96,11 +96,11 @@ document.addEventListener('readystatechange', bootstrap, false); {{Compat("api.Document.readyState")}} -\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). +\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). -\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. +\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. -\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. +\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. ## Voir aussi diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md index 8de026571e..e516c6b2a7 100644 --- a/files/fr/web/api/document/readystatechange_event/index.md +++ b/files/fr/web/api/document/readystatechange_event/index.md @@ -49,7 +49,7 @@ document.onreadystatechange = function () { ## Navigateur compatible -Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). +Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). ## Les événements liés diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md index cb59bff3ef..71c47298d4 100644 --- a/files/fr/web/api/document/registerelement/index.md +++ b/files/fr/web/api/document/registerelement/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Document/registerElement {{draft}} -La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. +La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. -> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). +> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). ## Syntaxe @@ -27,7 +27,7 @@ La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [ ### Paramètres - _nom-tag_ - - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. + - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. - _options {{optional_inline}}_ - : Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre. diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md index 8ec18bf3a4..c41e7f5566 100644 --- a/files/fr/web/api/document/selectedstylesheetset/index.md +++ b/files/fr/web/api/document/selectedstylesheetset/index.md @@ -28,7 +28,7 @@ La définition de la valeur de cette propriété équivaut à appeler {{ domxref ## Exemple ```js -console.log("Current style sheet set: " + document.selectedStyleSheetSet); +console.log("Current style sheet set: " + document.selectedStyleSheetSet); document.selectedStyleSheetSet = "Some other style sheet"; ``` @@ -44,4 +44,4 @@ document.selectedStyleSheetSet = "Some other style sheet"; ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md index 194e6044aa..635d0059f6 100644 --- a/files/fr/web/api/document/stylesheets/index.md +++ b/files/fr/web/api/document/stylesheets/index.md @@ -21,8 +21,8 @@ Il s'agit d'une collection ordonnée d'objets [`CSSStyleSheet`](/fr/docs/Web/API | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | -| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | +| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | ## Voir aussi diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md index abcabe2e9a..3cef3453fe 100644 --- a/files/fr/web/api/document/title/index.md +++ b/files/fr/web/api/document/title/index.md @@ -11,11 +11,11 @@ Obtient ou défini le titre de la page. var docTitle = document.title; -`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). +`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). document.title = newTitle; -`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). +`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). ## Exemple @@ -39,11 +39,11 @@ alert(document.title); // Affiche "Goodbye World!" ## Notes -Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. +Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. -Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. +Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. -En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). +En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). ## Spécification diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md index c962feeb7d..8b368ac63e 100644 --- a/files/fr/web/api/document/transitionend_event/index.md +++ b/files/fr/web/api/document/transitionend_event/index.md @@ -34,13 +34,13 @@ L’évènement **`transitionend`** est émis quand une [transition CSS](/fr/doc </tbody> </table> -L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. +L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. La cible originale pour cet évènement est l’[`Element`](/en-US/docs/Web/API/Element) sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page [HTMLElement: transitionend](/fr/docs/Web/Events/transitionend). ## Exemples -Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : +Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : ```js document.addEventListener('transitionend', () => { @@ -48,7 +48,7 @@ document.addEventListener('transitionend', () => { }); ``` -La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : +La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : ```js document.ontransitionend = () => { @@ -72,7 +72,7 @@ document.ontransitionend = () => { - Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}} - L’interface {{domxref("TransitionEvent")}} -- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} -- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) -- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) -- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) +- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} +- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) +- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) +- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md index 454dde3afb..d77a3890b9 100644 --- a/files/fr/web/api/document/url/index.md +++ b/files/fr/web/api/document/url/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/URL --- {{APIRef("DOM")}} -Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). +Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). ## Syntaxe diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md index 51d43852c7..9087043978 100644 --- a/files/fr/web/api/document/visibilitystate/index.md +++ b/files/fr/web/api/document/visibilitystate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/visibilityState La propriété en lecture seule **`Document.visibilityState`** renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont : - **`'visible'`** : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite. -- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. +- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. - **`'prerender'`** (_prérendu_) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de [`document.hidden`](/en-US/docs/Web/API/Document/hidden)). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif. - **`'unloaded`'** (_déchargé_) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif. diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md index bd02da9607..9ac2720827 100644 --- a/files/fr/web/api/document/width/index.md +++ b/files/fr/web/api/document/width/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Document/width > **Note :** À partir de {{Gecko("6.0")}},` document.width `n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}. -Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. +Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. Non pris en charge par Internet Explorer. diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md index d0655d473b..36fae8aeb0 100644 --- a/files/fr/web/api/document/write/index.md +++ b/files/fr/web/api/document/write/index.md @@ -38,7 +38,7 @@ function nouveauContenu() { alert("chargement du nouveau contenu"); document.open(); -document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); +document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); document.close(); } @@ -55,7 +55,7 @@ document.close(); Écrire dans un document qui a déjà été chargé sans appeler [document.open()](/fr/docs/Web/API/Document/open) provoquera un appel automatique à `document.open`. Une fois l'écriture terminée, il est recommandé d'appeler [document.close()](/fr/docs/Web/API/Document/close) pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément `h1` devient un nœud dans le document. -Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : +Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : ```html <script> @@ -65,7 +65,7 @@ Si l'appel à `document.write()` est intégré directement dans le code HTML, il > **Note :** `document.write` et [`document.writeln`](/fr/docs/Web/API/Document/writeln) ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur « Operation is not supported \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] » dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier `.xhtm` ou pour tout document servi avec une `application/xhtml+xml` de [type MIME](/fr/docs/Glossary/MIME_type). Plus d'informations disponibles dans la [foire aux questions W3C XHTML (en anglais)](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite). -> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. +> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. > **Note :** Dans Edge seulement, appeler plusieurs fois `document.write` dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." _(autorisation refusée)_. diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md index 73b9895781..194f164a45 100644 --- a/files/fr/web/api/document/xmlversion/index.md +++ b/files/fr/web/api/document/xmlversion/index.md @@ -17,7 +17,7 @@ Renvoie le numéro de version comme spécifié dans la déclaration XML (par exe Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) : if (document.createElement("foo").tagName == "FOO") { - /* le document n'est pas XML */ + /* le document n'est pas XML */ } ## Spécifications diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md index b9a9de6176..c375012c2f 100644 --- a/files/fr/web/api/document_object_model/examples/index.md +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -9,9 +9,9 @@ original_slug: Web/API/Document_Object_Model/Exemples --- 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. -## Exemple 1 : _height_ (hauteur) et width _(largeur)_ +## Exemple 1 : _height_ (hauteur) et width _(largeur)_ -L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : +L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : ```html <!DOCTYPE html> @@ -67,7 +67,7 @@ function init() { </html> ``` -## Exemple 2 : attributs d'image +## Exemple 2 : attributs d'image ```html <!DOCTYPE html> @@ -99,7 +99,7 @@ function setBorderWidth(width) { </html> ``` -## Exemple 3 : manipulation de styles +## Exemple 3 : manipulation de styles 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. @@ -130,7 +130,7 @@ function changeText() { </html> ``` -## Exemple 4 : utilisation de feuilles de style +## Exemple 4 : utilisation de feuilles de style La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console. @@ -144,19 +144,19 @@ for(var i = 0; i < ss.length; i++) { } ``` -Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : +Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : BODY { background-color: darkblue; } P { font-face: Arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } -Ce script affiche les lignes suivantes : +Ce script affiche les lignes suivantes : BODY P #LUMPY -## Exemple 5 : propagation d'évènements +## Exemple 5 : propagation d'évènements Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau. @@ -205,7 +205,7 @@ function load() { </html> ``` -## Exemple 6 : getComputedStyle +## Exemple 6 : getComputedStyle Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference). @@ -266,9 +266,9 @@ function cStyles() { </html> ``` -## Exemple 7 : affichage des propriétés d'un objet `event` +## Exemple 7 : affichage des propriétés d'un objet `event` -Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. +Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires. @@ -338,11 +338,11 @@ window.onload = function(event){ </html> ``` -## Exemple 8 : utilisation de l'interface DOM Table +## Exemple 8 : utilisation de l'interface DOM Table 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")}} -Pour ajouter une ligne et quelques cellules à un tableau existant : +Pour ajouter une ligne et quelques cellules à un tableau existant : ```html <table id="table0"> diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md index ff8be434b7..bf3aeb8e06 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -12,7 +12,7 @@ Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR ### Créer dynamiquement un arbre DOM -Considérons le document XML suivant : +Considérons le document XML suivant : <?xml version="1.0"?> <people> @@ -28,7 +28,7 @@ Considérons le document XML suivant : </person> </people> -L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : +L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : var doc = document.implementation.createDocument("", "", null); var peopleElem = doc.createElement("people"); @@ -129,7 +129,7 @@ Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme i ### Et après ? -Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. +Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. 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. diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md index fffb6dd481..3eb4da7179 100644 --- a/files/fr/web/api/document_object_model/index.md +++ b/files/fr/web/api/document_object_model/index.md @@ -24,7 +24,7 @@ Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible - {{domxref("Document")}} - {{domxref("DocumentFragment")}} - {{domxref("DocumentType")}} -- {{domxref("DOMError")}} {{deprecated_inline}} +- {{domxref("DOMError")}} {{deprecated_inline}} - {{domxref("DOMException")}} - {{domxref("DOMImplementation")}} - {{domxref("DOMString")}} diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 6bef94aea1..b1c2d8f1d6 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -61,7 +61,7 @@ function generate_table() { {{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} -Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : +Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 1. On crée d'abord l'élément \<table>. 2. Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>. @@ -69,7 +69,7 @@ Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 4. Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>. 5. Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau. -Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : +Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : 1. On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant @@ -93,7 +93,7 @@ Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse. -Voici l'HTML généré par ce code JavaScript : +Voici l'HTML généré par ce code JavaScript : ... <table border="2"> @@ -102,7 +102,7 @@ Voici l'HTML généré par ce code JavaScript : </table> ... -Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants : +Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :  @@ -165,7 +165,7 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen  -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 : +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 : myP.style.background = "rgb(255,0,0)"; // ajoute une propriété de style inline @@ -186,15 +186,15 @@ En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous d myP.appendChild(noeudTexte); -En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document : +En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :  -> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. +> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. ### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)` -Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : +Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : nouveauNoeudBALISEP = document.createElement("p"); body.appendChild(nouveauNoeudBALISEP); @@ -203,15 +203,15 @@ Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `creat ### Suppression de nœuds avec la méthode `removeChild(...)` -Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : +Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : myP.removeChild(noeudTexte); -Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : +Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : nouveauNoeudBALISEP.appendChild(noeudTexte); -L'arborescence des objets se présente désormais comme ceci : +L'arborescence des objets se présente désormais comme ceci :  @@ -225,7 +225,7 @@ Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. L ### Création et insertion des éléments dans l'arborescence -On peut décomposer la création du tableau de Exemple1.html en trois étapes : +On peut décomposer la création du tableau de Exemple1.html en trois étapes : - Récupérer l'objet body (c'est le premier élément de l'objet document). - Créer tous les éléments. @@ -233,7 +233,7 @@ On peut décomposer la création du tableau de Exemple1.html en trois étapes : Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1. -> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. +> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. ```html <head> @@ -305,7 +305,7 @@ mybody.appendChild(currenttext); ### Récupérer la valeur d'un attribut -A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : +A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : ```html mytable.getAttribute("border"); @@ -328,7 +328,7 @@ Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez défini row = document.createElement("tr"); for(var i = 0; i < 2; i++) { cell = document.createElement("td"); - text = document.createTextNode("la cellule est :" + i + j); + text = document.createTextNode("la cellule est :" + i + j); cell.appendChild(text); row.appendChild(cell); // change la couleur de fond de la cellule diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 99b70402e6..76c73f3401 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -8,7 +8,7 @@ Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier ## Définition d'un arbre de contenu -Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : +Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : <html> <head> @@ -24,11 +24,11 @@ Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage. -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.) +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.) ## Ce que permet le DOM Level 1 Core -Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. +Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. ## Un exemple simple diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md index e20754093f..a31d9ee26d 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.md +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -7,12 +7,12 @@ translation_of: Web/API/Document_Object_Model/Whitespace --- ## Le problème -La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : +La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : - il y aura certains nœuds texte qui ne contiendront que du vide, et - certains nœuds texte commenceront ou se termineront par des blancs. -En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : +En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : <!-- My document --> <html> @@ -58,7 +58,7 @@ On peut formater leur code comme indiqué ci-dessous pour contourner le problèm ></div> ``` -Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : +Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : ```js /** @@ -76,7 +76,7 @@ Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipul /** * 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, + * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| * @return True (vrai) Si tout le contenu du texte du |nod| est un espace, * sinon false (faux). @@ -91,7 +91,7 @@ function is_all_ws( nod ) /** * Détermine si le nœud doit être ignoré par les fonctions d'itération. * - * @param nod Un objet implémentant l'interface DOM1 |Node|. + * @param nod Un objet implémentant l'interface DOM1 |Node|. * @return true (vrai) si le nœud est : * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| @@ -111,7 +111,7 @@ function is_ignorable( nod ) * un enfant du même parent, qui se produit immédiatement avant le * nœud référence.) * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 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 @@ -129,7 +129,7 @@ function node_before( sib ) * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 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 @@ -149,7 +149,7 @@ function node_after( sib ) * de tous les nœuds DOM qui donnent le dernier des nœuds contenus * directement dans le nœud de référence.) * - * @param sib Le nœud référence. + * @param sib Le nœud référence. * @return soit : * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -169,7 +169,7 @@ function last_child( par ) * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * - * @param sib le nœud référence. + * @param sib le nœud référence. * @return soit: * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -190,7 +190,7 @@ function first_child( par ) * 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.) * - * @param txt Le nœud de texte dont les données doivent être renvoyées + * @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é. */ diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md index 753d6f303c..b8094de37e 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.md +++ b/files/fr/web/api/documentfragment/documentfragment/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/DocumentFragment/DocumentFragment --- {{ApiRef("DOM")}}{{seeCompatTable}} -Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. +Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. ## Syntaxe diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md index c9b72f6c7b..f23d650ab6 100644 --- a/files/fr/web/api/documenttype/index.md +++ b/files/fr/web/api/documenttype/index.md @@ -27,7 +27,7 @@ _Cette interface hérite de propriétés de la part de son parent, {{domxref("No - {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}} - : Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "\<! ELEMENT foo (bar)"> - {{domxref("DocumentType.name")}} {{readonlyInline}} - - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. + - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. - {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}} - : une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}. - {{domxref("DocumentType.publicId")}} {{readonlyInline}} @@ -48,7 +48,7 @@ _Cette interface hérite de méthodes de la part de son parent, {{domxref("Node" | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}} | {{Spec2('DOM WHATWG')}} | Implémente désormais l'interface {{domxref("ChildNode")}}. Retrait des propriétés `internalSubset`, `entities` et `notation`. | | {{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | -| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | +| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | | {{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md index c0aa91a55b..2bb2691b16 100644 --- a/files/fr/web/api/domerror/index.md +++ b/files/fr/web/api/domerror/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMError --- {{ APIRef("DOM") }}{{deprecated_header}} -L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. +L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. ## Propriétés diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md index 0c3e390c86..350bd56375 100644 --- a/files/fr/web/api/domexception/index.md +++ b/files/fr/web/api/domexception/index.md @@ -37,45 +37,45 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `IndexSizeError` - : L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : `1` et nom de la constante héritée : `INDEX_SIZE_ERR`) - `HierarchyRequestError` - - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) + - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) - `WrongDocumentError` - - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) + - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) - `InvalidCharacterError` - - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) + - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) - `NoModificationAllowedError` - - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) + - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) - `NotFoundError` - - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) + - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) - `NotSupportedError` - - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) + - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) - `InvalidStateError` - - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) + - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) - `SyntaxError` - - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) + - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) - `InvalidModificationError` - - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) + - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) - `NamespaceError` - - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) + - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) - `InvalidAccessError` - - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) + - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) - `TypeMismatchError` {{deprecated_inline}} - - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. + - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. - `SecurityError` {{experimental_inline}} - - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) + - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) - `NetworkError` {{experimental_inline}} - - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) + - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) - `AbortError` {{experimental_inline}} - - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) + - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) - `URLMismatchError` {{experimental_inline}} - - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) + - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) - `QuotaExceededError` {{experimental_inline}} - - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) + - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) - `TimeoutError` {{experimental_inline}} - - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) + - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) - `InvalidNodeTypeError` {{experimental_inline}} - - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) + - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) - `DataCloneError` {{experimental_inline}} - - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) + - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) - `EncodingError` {{experimental_inline}} - : L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités). - `NotReadableError` {{experimental_inline}} @@ -95,7 +95,7 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `OperationError` {{experimental_inline}} - : L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités). - `NotAllowedError` {{experimental_inline}} - - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). + - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). ## Spécifications diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md index ac6b5e5805..a9155b492a 100644 --- a/files/fr/web/api/domhighrestimestamp/index.md +++ b/files/fr/web/api/domhighrestimestamp/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/DOMHighResTimeStamp --- {{APIRef("High Resolution Time")}} -Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. +Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. -L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. +L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde. ## Précision temporelle réduite -Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. -Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. +Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. +Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. ```js // précision temporelle réduite (2ms) dans Firefox 60 @@ -33,7 +33,7 @@ event.timeStamp; // ... ``` -Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. +Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. ## Propriétés @@ -41,19 +41,19 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la pré ### Valeur -La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. +La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. #### L'origine temporelle -L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : +L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : - Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit : - Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé. - Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable. - - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. + - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. -- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. +- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. - Dans tous les autres cas, l'origine temporelle est `undefined`. ## Méthodes diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md index 9c5aaa7d57..1e99f3a187 100644 --- a/files/fr/web/api/domimplementation/createdocumenttype/index.md +++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMImplementation/createDocumentType --- {{ ApiRef("DOM")}} -La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. +La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. ## Syntaxe @@ -40,7 +40,7 @@ var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'sv alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN ``` -## Spécifications +## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- | diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md index 05b850a02f..dffa2c45b9 100644 --- a/files/fr/web/api/domimplementation/createhtmldocument/index.md +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. +La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{do ### Paramètres -- *title* {{optional_inline}} (excepté dans IE) +- *title* {{optional_inline}} (excepté dans IE) - : C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML. ## Exemple diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md index 58d5e2eada..da4048b6d5 100644 --- a/files/fr/web/api/dommatrix/index.md +++ b/files/fr/web/api/dommatrix/index.md @@ -10,7 +10,7 @@ original_slug: Web/API/CSSMatrix --- {{APIRef("CSSOM")}}{{Non-standard_header}} -Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` +Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` ## Compatibilé des navigateurs @@ -20,6 +20,6 @@ Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est ## Voir aussi -- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) +- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) - [Safari Developer Library : Documentation sur WebKitCSSMatrix](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) -- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) +- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md index b1952e52f3..ab37e0cce5 100644 --- a/files/fr/web/api/domobject/index.md +++ b/files/fr/web/api/domobject/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/DOMObject --- {{APIRef("DOM")}}{{Obsolete_header}} -L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . +L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . ## Spécifications diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md index 95225b3515..3956bc37ea 100644 --- a/files/fr/web/api/dompoint/index.md +++ b/files/fr/web/api/dompoint/index.md @@ -44,7 +44,7 @@ _`DOMPoint` hérite des propriétés de son parent {{domxref("DOMPointReadOnly") ## Exemples -Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. +Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. ```js function setView() { diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md index 8685e88378..f0eb1a9a4b 100644 --- a/files/fr/web/api/dompointreadonly/index.md +++ b/files/fr/web/api/dompointreadonly/index.md @@ -16,14 +16,14 @@ L'interface **`DOMPointReadOnly`** spécifie les propriétés standard utilisée ## Constructeur - {{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}} - - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . + - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . ## Méthodes - {{domxref("DOMPointReadOnly.fromPoint")}} - : Traduit la position / perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.matrixTransform")}} - - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). + - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.toJSON()")}} - : Renvoie une représentation JSON de l'objet `DOMPointReadOnly`. diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md index 103be19e93..c5eb93d38f 100644 --- a/files/fr/web/api/domrect/index.md +++ b/files/fr/web/api/domrect/index.md @@ -39,9 +39,9 @@ _`DOMRect` hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}} - {{domxref("DOMRectReadOnly.top")}} - : Renvoie la valeur de la coordonnée supérieure de `DOMRect` (a la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative). - {{domxref("DOMRectReadOnly.right")}} - - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). + - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). - {{domxref("DOMRectReadOnly.bottom")}} - - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). + - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). - {{domxref("DOMRectReadOnly.left")}} - : Renvoie la valeur de la coordonnée de gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative). diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md index 2ea3072d6e..649ab42490 100644 --- a/files/fr/web/api/domstringlist/index.md +++ b/files/fr/web/api/domstringlist/index.md @@ -28,4 +28,4 @@ Un type renvoyé par certaines API contenant une liste de [DOMString](/fr/docs/W | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------- | -| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | +| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 7320b0432f..13d500a5e0 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} -La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. +La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. ## Syntaxe @@ -22,7 +22,7 @@ Vide. ## Exemples -Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. Tout d'abord, le code HTML : diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 784e530c17..0289af378e 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -17,7 +17,7 @@ Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. ## Exemples -Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. D'abord le HTML : diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 84e4fee3b2..ac02cc467c 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -34,7 +34,7 @@ La méthode **`forEach()`** de l'interface {{domxref("DOMTokenList")}} appelle l ## Exemple -Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. ### HTML diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8750f06b0b..b701e7a9f6 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -12,7 +12,7 @@ L'interface **`DOMTokenList`** représente un ensemble de marques (« <i la - {{domxref("DOMTokenList.length")}} {{ReadOnlyInline}} - : Un entier qui représente le nombre d'objets qui sont stockés dans l'objet. - {{domxref("DOMTokenList.value")}} {{ReadOnlyInline}} - - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ + - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ ## Méthodes diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md index 8fdc4d6e12..31de5d2d12 100644 --- a/files/fr/web/api/domtokenlist/supports/index.md +++ b/files/fr/web/api/domtokenlist/supports/index.md @@ -13,7 +13,7 @@ La méthode **`supports()`** de l'interface {{domxref("DOMTokenList")}} renvoie ## Syntaxe - var boolean = element.supports(token) + var boolean = element.supports(token) ### Paramètres diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index 3dd6bd44b9..9e09f19c88 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -5,16 +5,16 @@ tags: - API translation_of: Web/API/Element/animate --- -{{APIRef('Web Animations')}} {{SeeCompatTable}} +{{APIRef('Web Animations')}} {{SeeCompatTable}} -La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. +La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. -> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. +> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. ## Syntaxe ```js -element.animate(keyframes, options); +element.animate(keyframes, options); ``` ### Paramèters @@ -26,7 +26,7 @@ element.animate(keyframes, options); - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**: - `id {{optional_inline}}` - - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. + - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} @@ -36,20 +36,20 @@ Les options suivantes n'ont pas encore été implémentées, mais seront ajouté - `composite {{optional_inline}}` - - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. + - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. - - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. - - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. + - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. + - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. - `replace`, quand à elle, remplace la précédente valeur par la nouvelle. - `iterationComposite {{optional_inline}}` - - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. + - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. - `spacing {{optional_inline}}` - - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. + - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. - - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. - - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. + - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. + - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. ### Valeur de retour @@ -57,17 +57,17 @@ Retourne un objet de type {{domxref("Animation")}}. ## Exemple -Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. +Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. ```js document.getElementById("tunnel").animate([ - // keyframes - { transform: 'translateY(0px)' }, - { transform: 'translateY(-300px)' } + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } ], { - // timing options - duration: 1000, - iterations: Infinity + // timing options + duration: 1000, + iterations: Infinity }); ``` diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md index 8914f7d219..00b166916d 100644 --- a/files/fr/web/api/element/attachshadow/index.md +++ b/files/fr/web/api/element/attachshadow/index.md @@ -3,9 +3,9 @@ title: Element.attachShadow() slug: Web/API/Element/attachShadow translation_of: Web/API/Element/attachShadow --- -{{APIRef('Shadow DOM')}} {{SeeCompatTable}} +{{APIRef('Shadow DOM')}} {{SeeCompatTable}} -La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). +La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). ## Syntaxe @@ -15,15 +15,15 @@ La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un él - `shadowRootInit` - - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : + - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : - `mode` : une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes : - `open` : spécifie une encapsulation ouverte. - - `closed` : spécifie une encapsulation fermée. + - `closed` : spécifie une encapsulation fermée. ### Retour -Retourne un {{domxref("ShadowRoot")}}. +Retourne un {{domxref("ShadowRoot")}}. ## Spécifications diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md index bca756ce34..c1142654af 100644 --- a/files/fr/web/api/element/attributes/index.md +++ b/files/fr/web/api/element/attributes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/attributes --- {{ APIRef("DOM") }} -La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. +La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. ## Syntaxe diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md index 93395d4adc..b8330cf369 100644 --- a/files/fr/web/api/element/childelementcount/index.md +++ b/files/fr/web/api/element/childelementcount/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/ParentNode/childElementCount La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné. > **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}. -> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. +> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. ## Syntaxe diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md index 0674c2aa52..33dc2a5aab 100644 --- a/files/fr/web/api/element/classlist/index.md +++ b/files/fr/web/api/element/classlist/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/classList --- {{APIRef("DOM")}} -La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. +La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces. @@ -26,12 +26,12 @@ _elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représent - add( String \[, String] ) - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée. -- remove( String \[, String] ) +- remove( String \[, String] ) - : Supprime les classes spécifiées. **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs. - **item**( Number ) - : Renvoie la position d'une classe dans une collection. -- **toggle**( String \[, force] ) +- **toggle**( String \[, force] ) - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`. Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime. - contains( String ) @@ -86,7 +86,7 @@ La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité ```js // 1. String.prototype.trim polyfill -if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md index fc6162de3e..1304f960e3 100644 --- a/files/fr/web/api/element/classname/index.md +++ b/files/fr/web/api/element/classname/index.md @@ -34,9 +34,9 @@ if(elm.className === 'active'){ ## Notes -Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. +Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. -`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. +`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. ```js elm.setAttribute('class', elm.getAttribute('class')) diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index a805089953..8ccb34f33d 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -86,7 +86,7 @@ if (!Element.prototype.closest) }; ``` -Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : +Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : ```js if (window.Element && !Element.prototype.closest) { diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md index 3032e6c928..77974b2ec2 100644 --- a/files/fr/web/api/element/compositionend_event/index.md +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -50,7 +50,7 @@ Par exemple, cette événement pourrait être déclanché quand un utilisateur s body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index 55971fdc43..c9c4b8f3cc 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -62,7 +62,7 @@ inputElement.addEventListener('compositionstart', (event) => { body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index 1f0a577102..f884e24cd0 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -17,7 +17,7 @@ L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas - Spécification - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) - Interface - - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. + - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. - Propagation - : Non - Annulable @@ -49,6 +49,6 @@ Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. - {{domxref("GlobalEventHandlers.onerror")}} - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} - {{domxref("HTMLMediaElement.onerror")}} - - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . + - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . - {{domxref("MediaRecorder.onerror")}} - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md index fdd728353b..ab944ed9ed 100644 --- a/files/fr/web/api/element/getattribute/index.md +++ b/files/fr/web/api/element/getattribute/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/getAttribute --- {{APIRef("DOM")}} -`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. +`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md index f805ace861..d0dea38583 100644 --- a/files/fr/web/api/element/getattributenode/index.md +++ b/files/fr/web/api/element/getattributenode/index.md @@ -44,5 +44,5 @@ Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisa ## Spécification -- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) +- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md index 39c6079fbe..7a9efeb1ad 100644 --- a/files/fr/web/api/element/getattributens/index.md +++ b/files/fr/web/api/element/getattributens/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/getAttributeNS --- {{APIRef("DOM")}} -**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. +**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe @@ -25,7 +25,7 @@ translation_of: Web/API/Element/getAttributeNS ### Valeur de retour -La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. +La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. > **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants. @@ -76,7 +76,7 @@ Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` . -La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. +La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié. @@ -86,8 +86,8 @@ Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer un | Spécification | État | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | +| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | | {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 06630172c1..d365d82632 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -88,7 +88,7 @@ Remarquez aussi que les valeurs de `x`/`left`, L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [`ClientRect`](https://docs.microsoft.com/fr-fr/previous-versions/hh826029(v=vs.85)) qu'ils retournent empêche d'ajouter le support de `x` et `y`. -En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. +En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées. diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md index 1f729a405b..be9a8a9bb6 100644 --- a/files/fr/web/api/element/getelementsbyclassname/index.md +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -12,39 +12,39 @@ translation_of: Web/API/Element/getElementsByClassName --- {{APIRef("DOM")}} -La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. +La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. -À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. +À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. ## Syntaxe var elements = element.getElementsByClassName(names); -- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. -- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. -- *element* est n'importe quel {{domxref("Element")}} du document. +- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. +- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. +- *element* est n'importe quel {{domxref("Element")}} du document. ## Exemples -Obtient tous les élements ayant une classe `test`: +Obtient tous les élements ayant une classe `test`: ```js element.getElementsByClassName('test'); ``` -Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: +Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: ```js element.getElementsByClassName('red test'); ``` -Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: +Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: ```js document.getElementById('main').getElementsByClassName('test'); ``` -On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: +On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: ```js var testElements = document.getElementsByClassName('test'); diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 8fe3f15e3b..45395751aa 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -26,7 +26,7 @@ Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un ### Valeur -Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions @@ -71,7 +71,7 @@ document.documentElement.innerHTML = "<pre>" + #### Détails opérationnels -Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : +Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : 1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments. 2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `<template>` est remplacé par le nouveau `DocumentFragment` créé à l'étape 1. diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md index f13f332b60..81ba5d9deb 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.md +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -21,7 +21,7 @@ La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une - position - - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : + - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : - `'beforebegin'` : Avant `targetElement` lui-même. - `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant. @@ -76,7 +76,7 @@ afterBtn.addEventListener('click', function() { }); ``` -Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. +Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. ## Spécification diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md index fa6a26e810..b123e61350 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.md +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/insertAdjacentHTML --- {{APIRef("DOM")}} -`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. +`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. ## Syntaxe @@ -21,11 +21,11 @@ element.insertAdjacentHTML(position, text); ### Paramètres - `position` - - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : + - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : <!----> -- `'beforebegin'` : Avant l'`element` lui-même. +- `'beforebegin'` : Avant l'`element` lui-même. - `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant. - `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant. - `'afterend'` : Après `element` lui-même. @@ -33,7 +33,7 @@ element.insertAdjacentHTML(position, text); <!----> - `text` - - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. + - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. ### Visualisation des noms de position @@ -45,7 +45,7 @@ element.insertAdjacentHTML(position, text); </p> <!-- afterend --> -> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. ## Exemple diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md index 2ecca80491..0ceb55ad45 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.md +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -74,13 +74,13 @@ Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans I if (!Element.prototype.insertAdjacentText) Element.prototype.insertAdjacentText = function(type, txt){ - this.insertAdjacentHTML( + this.insertAdjacentHTML( type, (txt+'') // convertir en chaîne de caractères - .replace(/&/g, '&') // intégrer des symboles d'esperluette - .replace(/</g, '<') // intégrer les symboles "plus petit que" - ) - } + .replace(/&/g, '&') // intégrer des symboles d'esperluette + .replace(/</g, '<') // intégrer les symboles "plus petit que" + ) + } ## Spécification diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md index 2a57085dbf..13f9020898 100644 --- a/files/fr/web/api/element/outerhtml/index.md +++ b/files/fr/web/api/element/outerhtml/index.md @@ -24,14 +24,14 @@ element.outerHTML = htmlString; ### Valeur -La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions - `SyntaxError` - : Une tentative a été faite de définir la valeur de `outerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. - `NoModificationAllowedError` - - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. + - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. ## Exemples diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md index 3f362cfe95..5a10ca8817 100644 --- a/files/fr/web/api/element/removeattributenode/index.md +++ b/files/fr/web/api/element/removeattributenode/index.md @@ -33,10 +33,10 @@ d.removeAttributeNode(d_align); 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. -Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. +Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. {{ DOMAttributeMethods() }} ## Spécification -- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) +- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md index 58ce20f5c2..eb5a5ab3af 100644 --- a/files/fr/web/api/element/removeattributens/index.md +++ b/files/fr/web/api/element/removeattributens/index.md @@ -27,7 +27,7 @@ Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à // special:specialAlign="utterleft" width="200px" /> d = document.getElementById("div1"); d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); - // l'élément est devenu : <div id="div1" width="200px" /> + // l'élément est devenu : <div id="div1" width="200px" /> ## Notes diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md index 5cf2f6c4ef..5463e81dab 100644 --- a/files/fr/web/api/element/requestfullscreen/index.md +++ b/files/fr/web/api/element/requestfullscreen/index.md @@ -8,13 +8,13 @@ translation_of: Web/API/Element/requestFullScreen --- {{APIRef("Fullscreen API")}} -La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. +La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. -Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. +Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. 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. -> **Note :** 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. +> **Note :** 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. ## Syntaxe @@ -22,7 +22,7 @@ Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un cha ## Exemple -Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). +Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). tbd diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index 84bb1b7101..4b5ce90b35 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -127,23 +127,23 @@ Associée à l'événement [element.onscroll](/fr/docs/DOM/element.onscroll), l' <title>MDN Example</title> <script type="text/javascript"> function checkReading () { - if (checkReading.read) { return; } - checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; - document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; - checkReading.noticeBox.innerHTML = checkReading.read ? - "Merci." : - "Veuillez faire défiler la page et lire le texte qui suit."; + if (checkReading.read) { return; } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? + "Merci." : + "Veuillez faire défiler la page et lire le texte qui suit."; } 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); + 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); } ``` diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md index f36004773c..e8256d835b 100644 --- a/files/fr/web/api/element/scrollintoview/index.md +++ b/files/fr/web/api/element/scrollintoview/index.md @@ -32,7 +32,7 @@ La méthode **`Element.scrollIntoView()`** fait défiler la page de manière à - `behavior` {{optional_inline}} - : Définit l'animation de transition qui peut être `"auto"`, `"instant"` ou `"smooth"`. Par défaut : `"auto"`. - `block` {{optional_inline}} - - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. + - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. - `inline` {{optional_inline}} - : L'une des options `"start"`, `"center"`, `"end"` ou `"nearest"`. Par défaut : `"nearest"`. diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md index 115f89a128..3fafc4443a 100644 --- a/files/fr/web/api/element/scrollleft/index.md +++ b/files/fr/web/api/element/scrollleft/index.md @@ -22,7 +22,7 @@ _sLeft_ est un entier représentant le nombre de pixels dont _element_ a été d // Définit le nombre de pixels défilés element.scrollLeft = 10; -**scrollLeft** peut être n'importe quelle valeur entière, cependant : +**scrollLeft** peut être n'importe quelle valeur entière, cependant : - Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), `scrollLeft` est mis à 0. - S'il reçoit une valeur inférieure à 0, `scrollLeft` est mis à 0. diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md index fa23a3f747..147f9a341b 100644 --- a/files/fr/web/api/element/scrollleftmax/index.md +++ b/files/fr/web/api/element/scrollleftmax/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Element/scrollLeftMax --- {{APIRef("DOM")}}{{Non-standard_header}} -La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. +La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. ## Syntaxe diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md index 9e21bb6a0f..ecb4c81e21 100644 --- a/files/fr/web/api/element/scrollto/index.md +++ b/files/fr/web/api/element/scrollto/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/scrollTo --- {{ APIRef }} -La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. +La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. ## Syntaxe @@ -23,9 +23,9 @@ La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de fa - `x-coord` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche. - `y-coord` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche. -\- ou - +\- ou - -- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. +- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. ## Exemples @@ -35,7 +35,7 @@ En utilisant des coordonnées : element.scrollTo(0, 1000); ``` -Ou en utilisant `options` : +Ou en utilisant `options` : ```js element.scrollTo({ diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md index f14babcee9..4e9dd42383 100644 --- a/files/fr/web/api/element/scrollwidth/index.md +++ b/files/fr/web/api/element/scrollwidth/index.md @@ -30,7 +30,7 @@ _xScrollWidth_ est la largeur du contenu d'_element_ en pixels. Il n'y a pas de spécification du W3C pour **scrollWidth**. -Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) +Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) ### Références diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md index 064db39bed..eb359f0d7e 100644 --- a/files/fr/web/api/element/select_event/index.md +++ b/files/fr/web/api/element/select_event/index.md @@ -36,9 +36,9 @@ L'évènement `select` est déclenché quand du texte est sélectionné. L'évè ```html <input id="test" type="text" value="Sélectionnez-moi !" /> <script> - var elem = document.getElementById('test'); - elem.addEventListener('select', function() { - alert('La sélection a changé !'); - }, false); + var elem = document.getElementById('test'); + elem.addEventListener('select', function() { + alert('La sélection a changé !'); + }, false); </script> ``` diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index f86cbf065c..a34e4af814 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -63,7 +63,7 @@ Ceci démontre 2 choses : ## Spécifications -- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) +- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) - [HTML5 : API dans les documents HTML](http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md index 2b78429f15..95583dd69d 100644 --- a/files/fr/web/api/element/setattributenode/index.md +++ b/files/fr/web/api/element/setattributenode/index.md @@ -37,10 +37,10 @@ var replacedAttr = element.setAttributeNode(attribute); 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é. -Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. +Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. {{DOMAttributeMethods()}} ## Spécification -- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) +- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md index a93dd4f72e..6bb2a14bee 100644 --- a/files/fr/web/api/element/setattributenodens/index.md +++ b/files/fr/web/api/element/setattributenodens/index.md @@ -32,7 +32,7 @@ translation_of: Web/API/Element/setAttributeNodeNS var a = d1.getAttributeNodeNS(myns, "special-align"); d2.setAttributeNodeNS(a); - alert(d2.attributes[1].value) // renvoie : "utterleft" + alert(d2.attributes[1].value) // renvoie : "utterleft" ## Notes diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md index 26312d6014..80841d9c87 100644 --- a/files/fr/web/api/element/setattributens/index.md +++ b/files/fr/web/api/element/setattributens/index.md @@ -34,7 +34,7 @@ value) {{ DOMAttributeMethods() }} -`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. +`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. ## Spécification diff --git a/files/fr/web/api/encoding_api/index.md b/files/fr/web/api/encoding_api/index.md index 2e5901f1e7..92f5385c84 100644 --- a/files/fr/web/api/encoding_api/index.md +++ b/files/fr/web/api/encoding_api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Encoding_API L'`API Encoding` fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}. -L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. +L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. ## Interfaces diff --git a/files/fr/web/api/errorevent/index.md b/files/fr/web/api/errorevent/index.md index e0da9edb4a..f7db62cac5 100644 --- a/files/fr/web/api/errorevent/index.md +++ b/files/fr/web/api/errorevent/index.md @@ -9,27 +9,27 @@ translation_of: Web/API/ErrorEvent --- {{APIRef("HTML DOM")}} -L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. +L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. ## Propriétés _Hérite également des propriétés de son parent {{domxref("Event")}}_. - {{domxref("ErrorEvent.message")}} {{readonlyInline}} - - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. + - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. - {{domxref("ErrorEvent.filename")}} {{readonlyInline}} - : Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.lineno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.colno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}} - - : Un `Object` JavaScript qui est concerné par l'événement. + - : Un `Object` JavaScript qui est concerné par l'événement. ## Constructeur - {{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}} - - : Crée un événement `ErrorEvent` avec les paramètres fournis. + - : Crée un événement `ErrorEvent` avec les paramètres fournis. ## Méthodes @@ -39,7 +39,7 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | +| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | | {{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML5 W3C') }} | Définition initiale. | ## Compatibilité des navigateurs @@ -48,4 +48,4 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. ## Voir aussi -- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. +- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md index 2c869ea435..de6a8013bc 100644 --- a/files/fr/web/api/event/bubbles/index.md +++ b/files/fr/web/api/event/bubbles/index.md @@ -37,14 +37,14 @@ function goInput(e) { } ``` -> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. +> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md index a570c95c8c..a7df8f75a2 100644 --- a/files/fr/web/api/event/cancelable/index.md +++ b/files/fr/web/api/event/cancelable/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/cancelable --- {{ ApiRef("DOM") }} -La propriété _`cancelable`_ (_annulable_) 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é `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. +La propriété _`cancelable`_ (_annulable_) 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é `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. 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 `cancelable` avant d'appeler leurs méthodes `preventDefault()`. @@ -55,8 +55,8 @@ Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefaul | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md index c6cb47bf5d..9549d8b06f 100644 --- a/files/fr/web/api/event/cancelbubble/index.md +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -30,7 +30,7 @@ La propriété **`Event.cancelBubble`** est un alias historique de {{domxref("Ev | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md index efba95d88c..0d640f3db7 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.md +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -81,7 +81,7 @@ Il y a 5 cibles à considérer : </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 + 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, @@ -119,65 +119,65 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <title>Comparison of Event Targets</title> - <style> - table { - border-collapse: collapse; - height: 150px; - width: 100%; - } - td { - border: 1px solid #ccc; - font-weight: bold; - padding: 5px; - min-height: 30px; - } - .standard { - background-color: #99ff99; - } - .non-standard { - background-color: #902D37; - } - </style> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> </head> <body> - <table> - <thead> - <tr> - <td class="standard">Original target dispatching the event <small>event.target</small></td> - <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> - <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> - </tr> - </thead> - <tr> - <td id="target"></td> - <td id="currentTarget"></td> - <td id="relatedTarget"></td> - <td id="explicitOriginalTarget"></td> - <td id="originalTarget"></td> - </tr> + <table> + <thead> + <tr> + <td class="standard">Original target dispatching the event <small>event.target</small></td> + <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> + <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> </table> <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> <script> - function handleClicks(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('currentTarget').innerHTML = e.currentTarget; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; - document.getElementById('originalTarget').innerHTML = e.originalTarget; - } - - function handleMouseover(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - } - - document.addEventListener('click', handleClicks, false); - document.addEventListener('mouseover', handleMouseover, false); + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + + + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); </script> </body> </html> @@ -185,7 +185,7 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm ### Utilisation de `target` et `relatedTarget` -La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. +La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. | Type d'évènement | [event.target](/en/DOM/event.target) | [event.relatedTarget](/en/DOM/event.relatedTarget) | | ---------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md index 4ff41dfd07..db515795b4 100644 --- a/files/fr/web/api/event/defaultprevented/index.md +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -30,7 +30,7 @@ Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index 0fa5698321..954d1aa472 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -65,7 +65,7 @@ Ces valeurs décrivent quelle est la phase du flux d'événements actuellement <td> L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. - Les écouteurs d'événements enregistrés pour cette phase sont appelés à + Les écouteurs d'événements enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète. @@ -96,22 +96,22 @@ Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](htt ```html <h4>Event Propagation Chain</h4> <ul> - <li>Click 'd1'</li> - <li>Analyse event propagation chain</li> - <li>Click next div and repeat the experience</li> - <li>Change Capturing mode</li> - <li>Repeat the experience</li> + <li>Click 'd1'</li> + <li>Analyse event propagation chain</li> + <li>Click next div and repeat the experience</li> + <li>Change Capturing mode</li> + <li>Repeat the experience</li> </ul> <input type="checkbox" id="chCapture" /> <label for="chCapture">Use Capturing</label> - <div id="d1">d1 - <div id="d2">d2 - <div id="d3">d3 - <div id="d4">d4</div> - </div> - </div> - </div> - <div id="divInfo"></div> + <div id="d1">d1 + <div id="d2">d2 + <div id="d3">d3 + <div id="d4">d4</div> + </div> + </div> + </div> + <div id="divInfo"></div> ``` ### CSS @@ -195,8 +195,8 @@ function Clear() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md index cc0bf70366..133918065b 100644 --- a/files/fr/web/api/event/explicitoriginaltarget/index.md +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -16,7 +16,7 @@ Cette propriété représente la cible originale de l'évènement. Elle est spé Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas [`currentTarget`](/fr/docs/Web/API/Event/currentTarget) pointera vers le parent et `explicitOriginalTarget` vers le nœud texte. -À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. +À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. Voir aussi une [comparaison des cibles pour les évènements](/fr/docs/DOM/event/Comparison_of_Event_Targets). diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md index fceca59b46..4a83f40593 100644 --- a/files/fr/web/api/event/initevent/index.md +++ b/files/fr/web/api/event/initevent/index.md @@ -24,11 +24,11 @@ Les évènements initialisés par ce moyen ont été créés par la méthode {{d event.initEvent(type, bubbles, cancelable) - `type` - - : est une {{domxref("DOMString")}} qui définit le type d'évènement. + - : est une {{domxref("DOMString")}} qui définit le type d'évènement. - `bubbles` - - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. + - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. - `cancelable` - - : 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. + - : 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. ## Exemple diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md index cdb9b49165..42c0ee0970 100644 --- a/files/fr/web/api/event/istrusted/index.md +++ b/files/fr/web/api/event/istrusted/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/isTrusted --- {{APIRef("DOM")}} -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. +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. ## Syntaxe @@ -39,7 +39,7 @@ La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, {{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}} </td> <td>{{ Spec2('DOM WHATWG') }}</td> - <td> </td> + <td></td> </tr> <tr> <td> diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md index 39e7d7b781..adc3636f58 100644 --- a/files/fr/web/api/event/originaltarget/index.md +++ b/files/fr/web/api/event/originaltarget/index.md @@ -16,7 +16,7 @@ La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozill En présence de contenu anonyme [XBL](/fr/docs/XBL), ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir [Anonymous Content#Event_Flow_and_Targeting](/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting) pour plus de détails. -**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. +**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. Voir aussi [Comparaison des cibles d'évènements.](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements) diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md index 8bd412ca1b..d03babf373 100644 --- a/files/fr/web/api/event/stopimmediatepropagation/index.md +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -22,7 +22,7 @@ Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md index 193691c866..d24ea0cc25 100644 --- a/files/fr/web/api/event/stoppropagation/index.md +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -23,7 +23,7 @@ Voir la section Exemple 5 : [Propagation d'évènements](/fr/docs/Web/API/Docume ## Notes -Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). +Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). [preventDefault](/fr/docs/Web/API/Event/preventDefault) est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement. @@ -31,8 +31,8 @@ Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}} | {{Spec2("DOM2 Events")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md index 3e60e62d4a..57dea7f290 100644 --- a/files/fr/web/api/event/target/index.md +++ b/files/fr/web/api/event/target/index.md @@ -46,8 +46,8 @@ ul.addEventListener('click', hide, false); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} | {{Spec2("DOM2 Events")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -56,7 +56,7 @@ ul.addEventListener('click', hide, false); ## Notes concernant la compatibilité -Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. +Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. ```js function hide(e) { diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index fde4ad5b7d..36923099fa 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -73,8 +73,8 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la préc | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 4774093a5b..f61f4cba04 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/type --- {{APIRef}} -La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. +La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. L'argument `event` de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse. @@ -76,7 +76,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | | {{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md index 3846e79506..2497126c39 100644 --- a/files/fr/web/api/eventsource/close/index.md +++ b/files/fr/web/api/eventsource/close/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/EventSource/close --- {{APIRef('WebSockets API')}} -La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). +La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). > **Note :** Si la connexion est déjà fermé, la fonction n'agit pas. @@ -37,12 +37,12 @@ var bouton = document.querySelector('button'); var evtSource = new EventSource('sse.php'); bouton.onclick = function() { - console.log('Connection fermée'); - evtSource.close(); + console.log('Connection fermée'); + evtSource.close(); } ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventsource/open_event/index.md b/files/fr/web/api/eventsource/open_event/index.md index 44b9be5821..2a5513cd31 100644 --- a/files/fr/web/api/eventsource/open_event/index.md +++ b/files/fr/web/api/eventsource/open_event/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/EventSource/onopen --- {{APIRef('Server Sent Events')}} -La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. +La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. ## Syntaxe @@ -22,11 +22,11 @@ La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un { ```js evtSource.onopen = function() { - console.log("Connexion au serveur établie."); + console.log("Connexion au serveur établie."); }; ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index db55b600bd..df37cc7b12 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -16,7 +16,7 @@ Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} ```js target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); -target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement +target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement ``` ### Paramètres @@ -385,7 +385,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp ### Pourquoi utiliser addEventListener() ? -`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : +`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : - Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions. - Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation) @@ -757,7 +757,7 @@ for (let i=0, j=0 ; i<els.length ; i++) { // Cas 4 for (let i=0, j=0 ; i<els.length ; i++) { - /* faire des tas de choses avec j */ + /* faire des tas de choses avec j */ function processEvent(e) {/*faire quelque chose*/}; els[j].addEventListener("click", processEvent, false); } diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.md b/files/fr/web/api/eventtarget/dispatchevent/index.md index 854d476721..d6de9e575a 100644 --- a/files/fr/web/api/eventtarget/dispatchevent/index.md +++ b/files/fr/web/api/eventtarget/dispatchevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/EventTarget/dispatchEvent --- {{APIRef("DOM Events")}} -Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) 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 `dispatchEvent()`. +Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) 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 `dispatchEvent()`. ## Syntaxe @@ -24,7 +24,7 @@ Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} ### Valeur retournée -- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). +- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). La méthode `dispatchEvent` lance une exception `UNSPECIFIED_EVENT_TYPE_ERR` 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 `null` 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. diff --git a/files/fr/web/api/eventtarget/eventtarget/index.md b/files/fr/web/api/eventtarget/eventtarget/index.md index dee098e931..516ec923fa 100644 --- a/files/fr/web/api/eventtarget/eventtarget/index.md +++ b/files/fr/web/api/eventtarget/eventtarget/index.md @@ -30,7 +30,7 @@ Une instance d'objet {{domxref("EventTarget")}}. ```js class MyEventTarget extends EventTarget { constructor(mySecret) { - super(); + super(); this._secret = mySecret; } @@ -52,7 +52,7 @@ let newValue = myEventTarget.secret; // == 7 | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.md b/files/fr/web/api/eventtarget/removeeventlistener/index.md index 91761ef749..f601827c5b 100644 --- a/files/fr/web/api/eventtarget/removeeventlistener/index.md +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.md @@ -24,9 +24,9 @@ La méthode **`EventTarget.removeEventListener()`** supprime d'une {{domxref("Ev ### Paramètres - `type` - - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. + - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. - `listener` - - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. + - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. - `options` {{optional_inline}} - : Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : diff --git a/files/fr/web/api/extendableevent/extendableevent/index.md b/files/fr/web/api/extendableevent/extendableevent/index.md index cc87f30a32..33e1b13345 100644 --- a/files/fr/web/api/extendableevent/extendableevent/index.md +++ b/files/fr/web/api/extendableevent/extendableevent/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/ExtendableEvent/ExtendableEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. +Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. ## Syntaxe @@ -23,7 +23,7 @@ var myExtendableEvent = new ExtendableEvent(type, init); ### Paramètres - _type_ - - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. + - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. - _init_ {{optional_inline}} - : Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés. @@ -41,6 +41,6 @@ var myExtendableEvent = new ExtendableEvent(type, init); - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/extendablemessageevent/data/index.md b/files/fr/web/api/extendablemessageevent/data/index.md index ca1b492b22..d4f8dccd40 100644 --- a/files/fr/web/api/extendablemessageevent/data/index.md +++ b/files/fr/web/api/extendablemessageevent/data/index.md @@ -23,7 +23,7 @@ N'importe quel type de donnée. ## Exemples -Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. +Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md index 10ca279abb..ebfa830398 100644 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. +Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. ## Syntaxe @@ -25,11 +25,11 @@ Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'u - : Un objet d'initialisation, qui doit contenir les paramètres suivant: - - `data`: Les données de l'évènement — peut être de n'importe quel type. + - `data`: Les données de l'évènement — peut être de n'importe quel type. - `origin`: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant. - `lastEventId`: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source. - - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. - - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. + - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. + - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. ## Exemples @@ -55,7 +55,7 @@ var myEME = new ExtendableMessageEvent('message', init); ## Voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/index.md index 5cdfead701..1e0bf78fc3 100644 --- a/files/fr/web/api/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. +L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}. ## Constructeur - {{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}} - - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. + - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. ## Propriétés @@ -30,19 +30,19 @@ _Hérite des propriétés de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}} - : Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message. - {{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}} - - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. + - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. - {{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}} - : Retourne une référence vers le service worker qui envoie le message. - {{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}} - - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. + - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. ## Méthodes -_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. +_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. ## Exemples -Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. +Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.md b/files/fr/web/api/extendablemessageevent/lasteventid/index.md index cd1fc93d7f..ca6cee649d 100644 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.md +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/lastEventId --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. +La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/origin/index.md b/files/fr/web/api/extendablemessageevent/origin/index.md index 6179c94fa4..f10a85f86b 100644 --- a/files/fr/web/api/extendablemessageevent/origin/index.md +++ b/files/fr/web/api/extendablemessageevent/origin/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. +La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/ports/index.md b/files/fr/web/api/extendablemessageevent/ports/index.md index 994d3daaeb..904c036207 100644 --- a/files/fr/web/api/extendablemessageevent/ports/index.md +++ b/files/fr/web/api/extendablemessageevent/ports/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **ports** 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é). +La propriété en lecture seule **ports** 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é). ## Syntaxe @@ -21,11 +21,11 @@ La propriété en lecture seule **ports** de l'interface {{domxref("Extendable ### Value -Un tableau de {{domxref("MessagePort")}}. +Un tableau de {{domxref("MessagePort")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -58,6 +58,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.md b/files/fr/web/api/featurepolicy/allowedfeatures/index.md index 97a6ea6866..26371b8120 100644 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.md +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures --- {{APIRef("Feature Policy API")}}{{SeeCompatTable}} -La méthode **`allowedFeatures()`** 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 `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. +La méthode **`allowedFeatures()`** 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 `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. ## Syntaxe @@ -37,7 +37,7 @@ const featurePolicy = document.featurePolicy const permissions = featurePolicy.allowedFeatures() for (const directive of permissions) - console.log(directive) + console.log(directive) ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.md b/files/fr/web/api/featurepolicy/allowsfeature/index.md index 20c6aec1a6..74dc998ede 100644 --- a/files/fr/web/api/featurepolicy/allowsfeature/index.md +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.md @@ -26,7 +26,7 @@ ou Le nom de la directive associée à une fonctionnalité. -#### `Origine` {{Optional_inline}} +#### `Origine` {{Optional_inline}} Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée. @@ -36,7 +36,7 @@ Un {{JSxRef("Boolean")}} valant `true` si et seulement si la fonctionnalité est ## Exemple -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. +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. ```js // D'abord, récupère le Feature Policy @@ -46,10 +46,10 @@ const featurePolicy = document.featurePolicy const estPermise = featurePolicy.allowsFeature("camera") if (estPermise) - console.log("FP autorise l'appareil photo.") + console.log("FP autorise l'appareil photo.") else - console.log("FP n'autorise pas l'appareil photo.") + console.log("FP n'autorise pas l'appareil photo.") ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/features/index.md b/files/fr/web/api/featurepolicy/features/index.md index 19302a0345..7965533f4d 100644 --- a/files/fr/web/api/featurepolicy/features/index.md +++ b/files/fr/web/api/featurepolicy/features/index.md @@ -37,7 +37,7 @@ const fonctionnalitésSupportées = featurePolicy.features() // Affiche chaque directive dans la console for (const directive of fonctionnalitésSupportées) - console.log(directive) + console.log(directive) ``` ## Spécification diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md index cf155f8a07..ba5e463e28 100644 --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md @@ -32,7 +32,7 @@ La fonction jettera un avertissement si la directive de Feature Policy demandée ## Exemple -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. +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. ```js // D'abord, récupère l'objet Feature Policy @@ -42,7 +42,7 @@ const featurePolicy = document.featurePolicy const listePermissions = featurePolicy.getAllowlistForFeature("camera") for (const origine of listePermissions) - console.log(origine) + console.log(origine) ``` ## Spécification diff --git a/files/fr/web/api/federatedcredential/index.md b/files/fr/web/api/federatedcredential/index.md index 58a720bd98..37c3aadf39 100644 --- a/files/fr/web/api/federatedcredential/index.md +++ b/files/fr/web/api/federatedcredential/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FederatedCredential --- {{SeeCompatTable}}{{APIRef("Credential Management API")}} -L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. +L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété `credential` de l'objet `init` pour la méthode globale {{domxref('fetch')}}. @@ -23,7 +23,7 @@ Pour les navigateurs qui le prennent en charge, une instance de cette interface _Hérite des propriétés de l'interface parente : {{domxref("Credential")}}._ -- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} +- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} - : Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré. ### Gestionnaires d'évènements diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md index a6820a8437..e3ebd3c500 100644 --- a/files/fr/web/api/fetch/index.md +++ b/files/fr/web/api/fetch/index.md @@ -16,9 +16,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- {{APIRef("Fetch")}} -La méthode **`fetch()`** 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 `then` pour identifier les erreurs HTTP. +La méthode **`fetch()`** 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 `then` pour identifier les erreurs HTTP. -`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. +`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (`404`, etc.) Pour cela, un gestionnaire `then()` doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur `true` et/ou la valeur de la propriété {{domxref("Response.status")}}. @@ -58,7 +58,7 @@ La méthode `fetch()` est contrôlée par la directive `connect-src` de l'entêt - `redirect` - : Le mode de redirection à adopter pour cette requête : `follow` (suivre les redirections automatiquement), `error` (abandonner avec une erreur si une redirection a lieu), ou `manual` (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était `follow` avant Chrome 47, mais à partir de cette version, c'est `manual`. - `referrer` - - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. + - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. - `referrerPolicy` - : Spécifie la valeur de l'entête HTTP referer. Cela peut être `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin` ou `unsafe-url`. - `integrity` diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.md b/files/fr/web/api/fetch_api/basic_concepts/index.md index 83cc79609d..120995ff3a 100644 --- a/files/fr/web/api/fetch_api/basic_concepts/index.md +++ b/files/fr/web/api/fetch_api/basic_concepts/index.md @@ -61,7 +61,7 @@ When a new {{domxref("Headers")}} object is created using the {{domxref("Headers </tbody> </table> -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 `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if +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 `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if - guard is `request` and the header _name_ isn't a {{Glossary("forbidden header name")}} . - guard is `request-no-cors` and the header _name_/_value_ is a {{Glossary("simple header")}} . diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md index 7a6a5d82d2..0d46a66799 100644 --- a/files/fr/web/api/fetch_api/index.md +++ b/files/fr/web/api/fetch_api/index.md @@ -13,7 +13,7 @@ Fetch fournit une définition générique des objets {{domxref("Request")}} et { Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP _origin_, supplantant les définitions précédemment proposées ailleurs. -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. +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. La méthode `fetch()` prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options `init` comme second argument (voir {{domxref("Request")}}.) @@ -21,16 +21,16 @@ Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble d 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 _service workers_). -> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). +> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). ### Interrompre un fetch -Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. +Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. ## Les interfaces de Fetch - {{domxref("GlobalFetch")}} - - : La méthode `fetch()` est utilisée pour récuperer une ressource. + - : La méthode `fetch()` est utilisée pour récuperer une ressource. - {{domxref("Headers")}} - : Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat. - {{domxref("Request")}} @@ -41,7 +41,7 @@ Les navigateurs ont commencé à ajouter le support expérimental des interfaces ## Mixin de Fetch - {{domxref("Body")}} - - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. + - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. ## Spécifications diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md index 919d9496d2..922a290288 100644 --- a/files/fr/web/api/fetch_api/using_fetch/index.md +++ b/files/fr/web/api/fetch_api/using_fetch/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch L'[API Fetch](/fr/docs/Web/API/Fetch_API) 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. -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. +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. ## L'état actuel du support par les navigateurs @@ -48,7 +48,7 @@ const myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { - return response.blob(); + return response.blob(); }) .then(function(myBlob) { const objectURL = URL.createObjectURL(myBlob); @@ -56,7 +56,7 @@ fetch('flowers.jpg') }); ``` -Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). +Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). 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")}}). @@ -68,7 +68,7 @@ Les requêtes Fetch sont controllées par la directive `connect-src` du [Content ### Fournir des options à la requête -La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : +La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : ```js var myHeaders = new Headers(); @@ -198,7 +198,7 @@ Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu r ```js fetch(myRequest).then(function(response) { - var contentType = response.headers.get("content-type"); + var contentType = response.headers.get("content-type"); if(contentType && contentType.indexOf("application/json") !== -1) { return response.json().then(function(json) { // traitement du JSON @@ -280,7 +280,7 @@ fetch("/login", { }) ``` -Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. +Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. ## Spécifications diff --git a/files/fr/web/api/fetchevent/index.md b/files/fr/web/api/fetchevent/index.md index 14746adbfe..f87acd105b 100644 --- a/files/fr/web/api/fetchevent/index.md +++ b/files/fr/web/api/fetchevent/index.md @@ -5,43 +5,43 @@ translation_of: Web/API/FetchEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. +Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. ## Constructeur - {{domxref("FetchEvent.FetchEvent()")}} - - : Crée un nouvel objet `FetchEvent`. + - : Crée un nouvel objet `FetchEvent`. ## Propriétés _Hérite de son ancêtre, {{domxref("Event")}}_. -- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} - - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. -- {{domxref("FetchEvent.request")}} {{readonlyInline}} - - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. -- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} - - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} + - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. +- {{domxref("FetchEvent.request")}} {{readonlyInline}} + - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. +- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} + - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. ### Propriétés dépréciées -- {{domxref("FetchEvent.client")}} {{readonlyInline}} - - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.client")}} {{readonlyInline}} + - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. ## Méthodes _Hérite de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("FetchEvent.respondWith()")}} - - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). + - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). - {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}} - - : 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")}}. + - : 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")}}. ## Exemples -Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. +Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. -Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. +Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md index d5d6b5b6d7..ade4d94854 100644 --- a/files/fr/web/api/file/index.md +++ b/files/fr/web/api/file/index.md @@ -10,10 +10,10 @@ translation_of: Web/API/File L’interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus. -Les objets `File` sont généralements obtenus à partir de : +Les objets `File` sont généralements obtenus à partir de : -- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; -- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; +- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; +- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; - l’API `mozGetAsFile()` de l’élément {{domxref("HTMLCanvasElement")}}. Dans Gecko, le code privilégié peut créer des objets `File` représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.) @@ -40,7 +40,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ - {{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}} - : Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative. -`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : +`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : - {{domxref("File.size")}} {{readonlyinline}} - : Renvoie la taille du fichier en octets. @@ -49,7 +49,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ ## Méthodes -_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ +_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ - {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}} - : Renvoie un nouvel objet `Blob` contenant les données du blob source comprises dans l’intervalle d’octets spécifié. @@ -82,7 +82,7 @@ _L’interface `File` ne définit aucune méthode, mais hérite des méthodes de BlobPropertyBag properties ); -- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. +- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. ## Voir aussi diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md index c602bf4d7e..7f44245d7a 100644 --- a/files/fr/web/api/file/using_files_from_web_applications/index.md +++ b/files/fr/web/api/file/using_files_from_web_applications/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/File/Using_files_from_web_applications 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. -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 à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. +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 à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. ## Accéder au(x) fichier(s) sélectionné(s) -Examinez ce code HTML : +Examinez ce code HTML : ```html <input type="file" id="input"> @@ -26,13 +26,13 @@ L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objet Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}. -Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : +Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : ```js var fichierSelectionne = document.getElementById('input').files[0]; ``` -Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : +Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : ```js var fichierSelectionne = $('#input').get(0).files[0]; @@ -40,29 +40,29 @@ var fichierSelectionne = $('#input').get(0).files[0]; var fichierSelectionne = $('#input')[0].files[0]; ``` -> **Note :** Si vous rencontrez une erreur "`files is undefined`" : 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 "`files`". +> **Note :** Si vous rencontrez une erreur "`files is undefined`" : 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 "`files`". ## Accéder au(x) fichier(s) sélectionné(s) sur un événement _change_ -Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : +Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : ```html <input type="file" id="input" onchange="handleFiles(this.files)"> ``` -La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. +La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. -Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : +Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : ```html <input type="file" id="input" multiple onchange="handleFiles(this.files)"> ``` -La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. +La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. ### Ajouter dynamiquement un gestionnaire d'événement _change_ -Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : +Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : ```js var inputElement = document.getElementById("inputField"); @@ -72,17 +72,17 @@ function handleFiles() { } ``` -Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. +Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. ## Obtenir des informations sur le(s) fichier(s) sélectionné(s) -L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : +L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : ```js var numFiles = files.length; ``` -Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : +Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : ```js for (var i = 0, numFiles = files.length; i < numFiles; i++) { @@ -100,11 +100,11 @@ L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seul - `size` - : La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits. - `type` - - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. + - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. -### Exemple : Afficher la taille d'un ou plusieurs fichiers +### Exemple : Afficher la taille d'un ou plusieurs fichiers -L'exemple suivant montre une utilisation possible de la propriété `size` : +L'exemple suivant montre une utilisation possible de la propriété `size` : ```html <!DOCTYPE html> @@ -143,16 +143,16 @@ function updateSize() { ## Utiliser des éléments _input_ masqués de type _file_ avec l'événement `click` -Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. +Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. -Examinez cet extrait de code HTML : +Examinez cet extrait de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> ``` -Le code gérant l'événement `click` peut être écrit de cette façon : +Le code gérant l'événement `click` peut être écrit de cette façon : ```js var fileSelect = document.getElementById("fileSelect"), @@ -170,9 +170,9 @@ Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouve ## Utiliser un élément _label_ pour activer un élément _input_ masqué de type _file_ -Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). +Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). -Examinez ce morceau de code HTML : +Examinez ce morceau de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label> @@ -184,7 +184,7 @@ Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à `fileElem.click Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (_drag and drop_) des fichiers dans votre application web. -La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : +La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : ```js var dropbox; @@ -197,7 +197,7 @@ dropbox.addEventListener("drop", drop, false); Dans cet exemple, l'élément portant l'ID `dropbox` devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}. -Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : +Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : ```js function dragenter(e) { @@ -211,7 +211,7 @@ function dragover(e) { } ``` -La vraie magie est dans la fonction `drop()` : +La vraie magie est dans la fonction `drop()` : ```js function drop(e) { @@ -225,11 +225,11 @@ function drop(e) { } ``` -Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. +Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. -## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur +## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur -Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : +Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : ```js function handleFiles(files) { @@ -253,29 +253,29 @@ function handleFiles(files) { } ``` -La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. +La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. -La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. +La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. -Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. +Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. ## Utiliser un objet URLs -Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. +Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. -Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : +Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : ```js var objectURL = window.URL.createObjectURL(fileObj); ``` -L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : +L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : ```js window.URL.revokeObjectURL(objectURL); ``` -## Exemple : Utilisation de l'objet URLs pour afficher des images +## Exemple : Utilisation de l'objet URLs pour afficher des images Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles. @@ -291,7 +291,7 @@ Le code HTML qui présente l'interface ressemble à ceci: Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément `input` étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers. -Voici la méthode `handleFiles()` : +Voici la méthode `handleFiles()` : ```js window.URL = window.URL || window.webkitURL; @@ -333,28 +333,28 @@ function handleFiles(files) { } ``` -Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. +Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. -Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : +Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : -1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. +1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. 2. L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}. -3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : +3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : 1. Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}. 2. Création d'un nouvel élément image {{ HTMLElement("img") }}. 3. Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob. 4. Définition de la hauteur de l'image à 60 pixels. - 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. - 6. Ajout du nouvel élément à la liste. + 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. + 6. Ajout du nouvel élément à la liste. -## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur +## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (_upload_) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone. -### Créer les tâches de téléchargement +### Créer les tâches de téléchargement -En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : +En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : ```js function sendFiles() { @@ -366,11 +366,11 @@ function sendFiles() { } ``` -La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. +La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. ### Manipuler le processus de téléchargement pour un fichier -La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. +La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. ```js function FileUpload(img, file) { @@ -401,18 +401,18 @@ function FileUpload(img, file) { } ``` -La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. +La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. -Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : +Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : -1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. -2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. -3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. -4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. -5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. -6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. +1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. +2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. +3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. +4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. +5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. +6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. -> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. +> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. ### Gérer le processus de téléchargement d'un fichier de manière asynchrone @@ -420,63 +420,63 @@ Il est nécessaire de prévoir quelques étapes préparatoires avant le téléch <?php if (isset($_FILES['myFile'])) { // Exemple: - move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); - exit; + move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); + exit; } ?> <!DOCTYPE html> <html> <head> - <title>dnd binary upload</title> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <script type="text/javascript"> - function sendFile(file) { - var uri = "/index.php"; - var xhr = new XMLHttpRequest(); - var fd = new FormData(); - - xhr.open("POST", uri, true); - xhr.onreadystatechange = function() { - if (xhr.readyState == 4 && xhr.status == 200) { - // Handle response. - alert(xhr.responseText); // handle response. - } - }; - fd.append('myFile', file); - // Initiate a multipart/form-data upload - xhr.send(fd); - } - - window.onload = function() { - var dropzone = document.getElementById("dropzone"); - dropzone.ondragover = dropzone.ondragenter = function(event) { - event.stopPropagation(); - event.preventDefault(); - } - - dropzone.ondrop = function(event) { - event.stopPropagation(); - event.preventDefault(); - - var filesArray = event.dataTransfer.files; - for (var i=0; i<filesArray.length; i++) { - sendFile(filesArray[i]); - } - } - } - </script> + <title>dnd binary upload</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <script type="text/javascript"> + function sendFile(file) { + var uri = "/index.php"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + + + + + + + + + + + + } + + ndow + var d + dropzone.ondragover = dropz + + event.preventDefault(); + } + + dropzone.ond + event.stopPropagation(); + event.preventDefault(); + + v + + + + } + } + </script> </head> <body> - <div> - <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> - </div> + <div> + <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> + </div> </body> </html> ``` -## Exemple : Utiliser un objet URLs pour afficher un PDF +## Exemple : Utiliser un objet URLs pour afficher un PDF -Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. +Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie à `false` {{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. @@ -484,7 +484,7 @@ Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie <iframe id="viewer"> ``` -Et voici comment modifier la valeur de l'attribut `src` : +Et voici comment modifier la valeur de l'attribut `src` : ```js var obj_url = window.URL.createObjectURL(blob); @@ -493,9 +493,9 @@ iframe.setAttribute('src', obj_url); window.URL.revokeObjectURL(obj_url); ``` -## Exemple : Utiliser un objet URLs avec d'autres types de fichiers +## Exemple : Utiliser un objet URLs avec d'autres types de fichiers -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 : +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 : ```js var video = document.getElementById('video'); @@ -507,7 +507,7 @@ window.URL.revokeObjectURL(obj_url); ## Spécifications -- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) +- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) - [File API](http://www.w3.org/TR/FileAPI/) ## Voir aussi diff --git a/files/fr/web/api/file_and_directory_entries_api/index.md b/files/fr/web/api/file_and_directory_entries_api/index.md index 847709ebac..5d1c98d3c0 100644 --- a/files/fr/web/api/file_and_directory_entries_api/index.md +++ b/files/fr/web/api/file_and_directory_entries_api/index.md @@ -14,7 +14,7 @@ Deux API très simulaires existent en fonction du comportement asynchrone ou syn L'API asynchrone a les interfaces suivantes : -- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) 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 [window](/fr/docs/window) et le worker global scope. +- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) 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 [window](/fr/docs/window) et le worker global scope. - [FileSystem](/en/DOM/File_API/File_System_API/FileSystem) représente un fichier système. L'objet est la passerelle à votre API toute entière. - [Entry](/en/DOM/File_API/File_System_API/Entry) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntry](/en/DOM/File_API/File_System_API/DirectoryEntry) représente un dossier dans un fichier système. @@ -26,11 +26,11 @@ L'API asynchrone a les interfaces suivantes : L'API synchrone est utile avec les [WebWorkers](/En/Using_web_workers). Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs. -- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) 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. +- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) 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. - [FileSystemSync](/en/DOM/File_API/File_System_API/FileSystemSync) représente un fichier système. - [EntrySync](/en/DOM/File_API/File_System_API/EntrySync) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntrySync](/en/DOM/File_API/File_System_API/DirectoryEntrySync) représente un dossier dans un fichier système. -- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. +- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. - [FileEntrySync](/en/DOM/File_API/File_System_API/FileEntrySync) représente un fichier dans un fichier système. - [FileException](/en/DOM/File_API/File_System_API/FileException) est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones. diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md index 5e13f908c3..1f70ffaec3 100644 --- a/files/fr/web/api/filereader/filereader/index.md +++ b/files/fr/web/api/filereader/filereader/index.md @@ -8,9 +8,9 @@ tags: - Reference translation_of: Web/API/FileReader/FileReader --- -**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. +**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. -Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). +Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). ## Syntaxe @@ -24,15 +24,15 @@ Aucun. ## Exemple -L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: +L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: ```js function printFile(file) { var reader = new FileReader(); reader.onload = function(evt) { - console.log(evt.target.result); - }; - reader.readAsText(file); + console.log(evt.target.result); + }; + reader.readAsText(file); } ``` diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md index 418c9f4f88..e686044719 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.md +++ b/files/fr/web/api/filereader/readasbinarystring/index.md @@ -27,9 +27,9 @@ L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée. ```js var canvas = document.createElement('canvas'); var height = 200; -var width = 200; +var width = 200; -canvas.width = width; +canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); @@ -46,7 +46,7 @@ canvas.toBlob(function (blob) { console.log(reader.result); } - reader.readAsBinaryString(blob); + reader.readAsBinaryString(blob); }); ``` diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md index 63833ac3b9..c1bb3f7a83 100644 --- a/files/fr/web/api/filereader/readastext/index.md +++ b/files/fr/web/api/filereader/readastext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FileReader/readAsText --- {{APIRef("File API")}} -La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. +La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. ## Syntaxe @@ -20,7 +20,7 @@ La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob ### Parameters - `blob` - - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. + - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. - encoding {{optional_inline}} - : Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié. diff --git a/files/fr/web/api/filerequest/onprogress/index.md b/files/fr/web/api/filerequest/onprogress/index.md index 82f162eb8c..9f5f022f9e 100644 --- a/files/fr/web/api/filerequest/onprogress/index.md +++ b/files/fr/web/api/filerequest/onprogress/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FileRequest/onprogress --- {{APIRef("File System API")}} {{non-standard_header}} -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. +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. ## Syntaxe diff --git a/files/fr/web/api/force_touch_events/index.md b/files/fr/web/api/force_touch_events/index.md index 665399eaa6..9debb9689f 100644 --- a/files/fr/web/api/force_touch_events/index.md +++ b/files/fr/web/api/force_touch_events/index.md @@ -21,9 +21,9 @@ translation_of: Web/API/Force_Touch_events - {{event("webkitmouseforcedown")}} {{non-standard_inline}} - : Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force". - {{event("webkitmouseforceup")}} {{non-standard_inline}} - - : 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". + - : 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". - {{event("webkitmouseforcechanged")}} {{non-standard_inline}} - - : 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")}}. + - : 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")}}. ## Propriété des évènements diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md index bc20d3847b..4bd06c1e59 100644 --- a/files/fr/web/api/formdata/append/index.md +++ b/files/fr/web/api/formdata/append/index.md @@ -15,13 +15,13 @@ translation_of: Web/API/FormData/append La méthode **`append()`** de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet `FormData`, ou rajoute cette clé et cette valeur quand elle n'existe pas. -La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. +La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. > **Note :** Cette méthode est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API). ## Syntaxe -Il y a deux versions de cette méthode : avec deux ou trois paramètres +Il y a deux versions de cette méthode : avec deux ou trois paramètres ```js formData.append(name, value); @@ -33,11 +33,11 @@ formData.append(name, value, filename); - `name` - : Le nom de la clé dont les données sont contenues dans `value`. - `value` - - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). + - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). - `filename` {{optional_inline}} - - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. + - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. -> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. +> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. ### Retours @@ -45,20 +45,20 @@ Void. ## Exemple -La ligne suivante crée un objet `FormData` vide : +La ligne suivante crée un objet `FormData` vide : ```js var formData = new FormData(); // Actuellement vide ``` -Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: +Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: ```js formData.append('username', 'Chris'); formData.append('userpic', myFileInput.files[0], 'chris.jpg'); ``` -Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): +Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): ```js formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg'); diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md index b8c8df5899..39b2b84207 100644 --- a/files/fr/web/api/formdata/entries/index.md +++ b/files/fr/web/api/formdata/entries/index.md @@ -13,10 +13,10 @@ translation_of: Web/API/FormData/entries --- {{APIRef("XMLHttpRequest")}} -La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. -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")}}. +La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. +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")}}. -> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -24,7 +24,7 @@ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, ### Valeur retournée -Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. +Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. ## Exemple diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md index 44427eb965..d935583c84 100644 --- a/files/fr/web/api/formdata/formdata/index.md +++ b/files/fr/web/api/formdata/formdata/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/FormData/FormData --- {{APIRef("XMLHttpRequest")}} -Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. +Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. -> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -25,23 +25,23 @@ var formData = new FormData(form) ### Paramètres - `form` {{optional_inline}} - - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. + - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. ## Exemples -La ligne suivante crée un objet `FormData` vide: +La ligne suivante crée un objet `FormData` vide: ```js var formData = new FormData(); // Formulaire vide à cet instant ``` -Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : +Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : ```js formData.append('username', 'Chris'); ``` -Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : +Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : ```html <form id="myForm" name="myForm"> diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md index 80f00db03e..50c672e3be 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.md +++ b/files/fr/web/api/formdata/using_formdata_objects/index.md @@ -12,11 +12,11 @@ tags: translation_of: Web/API/FormData/Using_FormData_Objects original_slug: Web/API/FormData/Utilisation_objets_FormData --- -L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). 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 `multipart/form-data`. +L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). 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 `multipart/form-data`. ## Création intégrale d’un objet FormData -Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : +Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : ```js var formData = new FormData(); @@ -38,9 +38,9 @@ request.open("POST", "http://foo.com/submitform.php"); request.send(formData); ``` -> **Note :** 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 [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). +> **Note :** 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 [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). -Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` 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 `Blob`, 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 `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. +Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` 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 `Blob`, 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 `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. ## Récupération d’un objet FormData dans un formulaire HTML @@ -59,7 +59,7 @@ request.open("POST", "submitform.php"); request.send(new FormData(formElement)); ``` -Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : +Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : ```js var formElement = document.querySelector("form"); @@ -72,76 +72,76 @@ request.send(formData); Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier. -## Envoi de fichiers via un objet FormData +## Envoi de fichiers via un objet FormData -L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : +L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : ```html <form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Votre adresse électronique :</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Étiquette du fichier personnalisé :</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>Fichier à mettre de côté :</label> - <input type="file" name="file" required /> - <input type="submit" value="Mettez le fichier de côté." /> + <label>Votre adresse électronique :</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Étiquette du fichier personnalisé :</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>Fichier à mettre de côté :</label> + <input type="file" name="file" required /> + <input type="submit" value="Mettez le fichier de côté." /> </form> <div></div> ``` -Vous pouvez ensuite l’envoyer à l’aide du code suivant : +Vous pouvez ensuite l’envoyer à l’aide du code suivant : ```js var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { - var oOutput = document.querySelector("div"), + var oOutput = document.querySelector("div"), oData = new FormData(form); - oData.append("CustomField", "Données supplémentaires"); + oData.append("CustomField", "Données supplémentaires"); - var oReq = new XMLHttpRequest(); - oReq.open("POST", "stash.php", true); - oReq.onload = function(oEvent) { - if (oReq.status == 200) { - oOutput.innerHTML = "Envoyé !"; - } else { - oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; - } - }; + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Envoyé !"; + } else { + oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; + } + }; - oReq.send(oData); + oReq.send(oData); ev.preventDefault(); }, false); ``` > **Note :** 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(). -Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : +Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : ```js data.append("myfile", myBlob, "filename.txt"); ``` -Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. +Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. -Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : +Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : ```js var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "Données supplémentaires"); $.ajax({ - url: "stash.php", - type: "POST", - data: fd, - processData: false, // dire à jQuery de ne pas traiter les données - contentType: false // dire à jQuery de ne pas définir le contentType + url: "stash.php", + type: "POST", + data: fd, + processData: false, // dire à jQuery de ne pas traiter les données + contentType: false // dire à jQuery de ne pas définir le contentType }); ``` -## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` +## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` -Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. +Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. ## Voir aussi diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md index 554b01e01d..c4b6c094e7 100644 --- a/files/fr/web/api/fullscreen_api/index.md +++ b/files/fr/web/api/fullscreen_api/index.md @@ -23,12 +23,12 @@ Prenons cet élément {{ HTMLElement("video") }} : ```html <video controls id="myvideo"> - <source src="somevideo.webm"></source> - <source src="somevideo.mp4"></source> + <source src="somevideo.webm"></source> + <source src="somevideo.mp4"></source> </video> ``` -Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : +Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : ```js var elem = document.getElementById("myvideo"); @@ -43,8 +43,8 @@ Il est important de savoir qu'il y a une différence clef entre les implémentat ```css #myvideo:-webkit-full-screen { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } ``` @@ -52,48 +52,48 @@ Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko ### Notification -Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. +Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. ### Lorsqu'une demande de plein écran échoue -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 `mozfullscreenerror` . 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é. +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 `mozfullscreenerror` . 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é. > **Note :** Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées. ## Sortie du mode plein écran -L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . +L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . ## Autres informations -Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : +Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : - {{ domxref("document.fullscreenElement", "fullscreenElement") }} - - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. + - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. - {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }} - - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. + - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. ## Choses que vos utilisateurs doivent savoir -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. +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. -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. +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. ## Exemple -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. +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. [Voir l'exemple sur une page](/samples/domref/fullscreen.html) ### Action sur la touche <kbd>Entrée</kbd> -Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . +Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . ```js document.addEventListener("keydown", function(e) { - if (e.keyCode == 13) { - toggleFullScreen(); - } + if (e.keyCode == 13) { + toggleFullScreen(); + } }, false); ``` @@ -113,9 +113,9 @@ function toggleFullScreen() { } ``` -Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). 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()") }}. +Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). 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()") }}. -Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. +Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. ## Préfixes diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md index a31634b587..f377937e23 100644 --- a/files/fr/web/api/gainnode/index.md +++ b/files/fr/web/api/gainnode/index.md @@ -65,7 +65,7 @@ Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("Aud | Spécification | Statuts | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/gamepad/index.md b/files/fr/web/api/gamepad/index.md index 8fb2bd5cda..e52fe8886f 100644 --- a/files/fr/web/api/gamepad/index.md +++ b/files/fr/web/api/gamepad/index.md @@ -15,9 +15,9 @@ Un objet `Gamepad` peut être retourné de deux manières : ## Propriétés - {{domxref("Gamepad.axes")}} {{readonlyInline}} - - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). + - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). - {{domxref("Gamepad.buttons")}} {{readonlyInline}} - - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. + - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. - {{domxref("Gamepad.connected")}} {{readonlyInline}} - : Un booléen indiquant si la manette est toujours connectée au système. - {{domxref("Gamepad.displayId")}} {{readonlyInline}} diff --git a/files/fr/web/api/gamepad_api/index.md b/files/fr/web/api/gamepad_api/index.md index 2548f041e8..681df27f87 100644 --- a/files/fr/web/api/gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Gamepad_API --- {{DefaultAPISidebar("Gamepad API")}} -L'**API Gamepad** 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. +L'**API Gamepad** 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. ## Interfaces diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md index 5a152773d4..4004757091 100644 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md @@ -22,55 +22,55 @@ Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi : ```js window.addEventListener("gamepadconnected", function(e) { - console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", - e.gamepad.index, e.gamepad.id, - e.gamepad.buttons.length, e.gamepad.axes.length); + console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", + e.gamepad.index, e.gamepad.id, + e.gamepad.buttons.length, e.gamepad.axes.length); }); ``` -Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. +Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. > **Note :** À 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. ## Déconnexion du contrôleur -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") }}. +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") }}. ```js window.addEventListener("gamepaddisconnected", function(e) { - console.log("Contrôleur n°%d déconnecté : %s", - e.gamepad.index, e.gamepad.id); + console.log("Contrôleur n°%d déconnecté : %s", + e.gamepad.index, e.gamepad.id); }); ``` -La propriété `index` 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") }}. +La propriété `index` 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") }}. ```js var gamepads = {}; function gamepadHandler(event, connecting) { - var gamepad = event.gamepad; + var gamepad = event.gamepad; // Note : // gamepad === navigator.getGamepads()[gamepad.index] - if (connecting) { - gamepads[gamepad.index] = gamepad; - } else { - delete gamepads[gamepad.index]; - } + if (connecting) { + gamepads[gamepad.index] = gamepad; + } else { + delete gamepads[gamepad.index]; + } } window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false); window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false); ``` -Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. +Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. \[PAGE NON TRADUITE DEPUIS ICI...] ## Querying the Gamepad object -As you can see, the **gamepad** events discussed above include a `gamepad` 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. +As you can see, the **gamepad** events discussed above include a `gamepad` 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. 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. @@ -165,7 +165,7 @@ function pollGamepads() { } ``` -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 `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` 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. +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 `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` 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. After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again. @@ -213,107 +213,107 @@ This example shows how to use the {{ domxref("Gamepad") }} object, as well as th var haveEvents = 'GamepadEvent' in window; var controllers = {}; var rAF = window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.requestAnimationFrame; + window.webkitRequestAnimationFrame || + window.requestAnimationFrame; function connecthandler(e) { - addgamepad(e.gamepad); + addgamepad(e.gamepad); } function addgamepad(gamepad) { - controllers[gamepad.index] = gamepad; var d = document.createElement("div"); - d.setAttribute("id", "controller" + gamepad.index); - var t = document.createElement("h1"); - t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); - d.appendChild(t); - var b = document.createElement("div"); - b.className = "buttons"; - for (var i=0; i<gamepad.buttons.length; i++) { - var e = document.createElement("span"); - e.className = "button"; - //e.id = "b" + i; - e.innerHTML = i; - b.appendChild(e); - } - d.appendChild(b); - var a = document.createElement("div"); - a.className = "axes"; - for (var i=0; i<gamepad.axes.length; i++) { - var e = document.createElement("progress"); - e.className = "axis"; - //e.id = "a" + i; - e.setAttribute("max", "2"); - e.setAttribute("value", "1"); - e.innerHTML = i; - a.appendChild(e); - } - d.appendChild(a); - document.getElementById("start").style.display = "none"; - document.body.appendChild(d); - rAF(updateStatus); + controllers[gamepad.index] = gamepad; var d = document.createElement("div"); + d.setAttribute("id", "controller" + gamepad.index); + var t = document.createElement("h1"); + t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); + d.appendChild(t); + var b = document.createElement("div"); + b.className = "buttons"; + for (var i=0; i<gamepad.buttons.length; i++) { + var e = document.createElement("span"); + e.className = "button"; + //e.id = "b" + i; + e.innerHTML = i; + b.appendChild(e); + } + d.appendChild(b); + var a = document.createElement("div"); + a.className = "axes"; + for (var i=0; i<gamepad.axes.length; i++) { + var e = document.createElement("progress"); + e.className = "axis"; + //e.id = "a" + i; + e.setAttribute("max", "2"); + e.setAttribute("value", "1"); + e.innerHTML = i; + a.appendChild(e); + } + d.appendChild(a); + document.getElementById("start").style.display = "none"; + document.body.appendChild(d); + rAF(updateStatus); } function disconnecthandler(e) { - removegamepad(e.gamepad); + removegamepad(e.gamepad); } function removegamepad(gamepad) { - var d = document.getElementById("controller" + gamepad.index); - document.body.removeChild(d); - delete controllers[gamepad.index]; + var d = document.getElementById("controller" + gamepad.index); + document.body.removeChild(d); + delete controllers[gamepad.index]; } function updateStatus() { - if (!haveEvents) { - scangamepads(); - } - for (j in controllers) { - var controller = controllers[j]; - var d = document.getElementById("controller" + j); - var buttons = d.getElementsByClassName("button"); - for (var i=0; i<controller.buttons.length; i++) { - var b = buttons[i]; - var val = controller.buttons[i]; - var pressed = val == 1.0; - if (typeof(val) == "object") { - pressed = val.pressed; - val = val.value; - } - var pct = Math.round(val * 100) + "%" - b.style.backgroundSize = pct + " " + pct; - if (pressed) { - b.className = "button pressed"; - } else { - b.className = "button"; - } - } - - var axes = d.getElementsByClassName("axis"); - for (var i=0; i<controller.axes.length; i++) { - var a = axes[i]; - a.innerHTML = i + ": " + controller.axes[i].toFixed(4); - a.setAttribute("value", controller.axes[i] + 1); - } - } - rAF(updateStatus); + if (!haveEvents) { + scangamepads(); + } + for (j in controllers) { + var controller = controllers[j]; + var d = document.getElementById("controller" + j); + var buttons = d.getElementsByClassName("button"); + for (var i=0; i<controller.buttons.length; i++) { + var b = buttons[i]; + var val = controller.buttons[i]; + var pressed = val == 1.0; + if (typeof(val) == "object") { + pressed = val.pressed; + val = val.value; + } + var pct = Math.round(val * 100) + "%" + b.style.backgroundSize = pct + " " + pct; + if (pressed) { + b.className = "button pressed"; + } else { + b.className = "button"; + } + } + + var axes = d.getEl + for (var i=0; i<co + var a = axes[i]; + a.innerHTML = i + ": " + controller.axes[i].toFi + a.setAttribute("value", controller.axes[i] + 1); + } + } + rAF(updateStatus); } function scangamepads() { var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); - for (var i = 0; i < gamepads.length; i++) { - if (gamepads[i]) { - if (!(gamepads[i].index in controllers)) { - addgamepad(gamepads[i]); - } else { - controllers[gamepads[i].index] = gamepads[i]; - } - } - } + for (var i = 0; i < gamepads.length; i++) { + if (gamepads[i]) { + if (!(gamepads[i].index in controllers)) { + addgamepad(gamepads[i]); + } else { + controllers[gamepads[i].index] = gamepads[i]; + } + } + } } window.addEventListener("gamepadconnected", connecthandler); window.addEventListener("gamepaddisconnected", disconnecthandler); if (!haveEvents) { - setInterval(scangamepads, 500); + setInterval(scangamepads, 500); } ``` diff --git a/files/fr/web/api/geolocation/clearwatch/index.md b/files/fr/web/api/geolocation/clearwatch/index.md index e3cf88e859..26f9b600ff 100644 --- a/files/fr/web/api/geolocation/clearwatch/index.md +++ b/files/fr/web/api/geolocation/clearwatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Geolocation/clearWatch --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. +La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ress ### Paramètres - _id_ - - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. + - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. ## Exemple diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md index 035dbab103..e3d1a83624 100644 --- a/files/fr/web/api/geolocation/index.md +++ b/files/fr/web/api/geolocation/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/Geolocation --- {{APIRef("Geolocation API")}} -En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. +En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. -On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . +On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . -> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. +> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. ## Propriétés @@ -23,14 +23,14 @@ _L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété._ ## Méthodes -_L'interface de géolocalisation n'hérite d'aucune méthode._ +_L'interface de géolocalisation n'hérite d'aucune méthode._ - {{domxref("Geolocation.getCurrentPosition()")}} - - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. + - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. - {{domxref("Geolocation.watchPosition()")}} - - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. + - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. - {{domxref("Geolocation.clearWatch()")}} - - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. + - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. ## Spécifications diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md index 71ed0cfc2c..d09d9d224a 100644 --- a/files/fr/web/api/geolocation/watchposition/index.md +++ b/files/fr/web/api/geolocation/watchposition/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Geolocation/watchPosition --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. +La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. -Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. +Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. ## Syntaxe @@ -23,7 +23,7 @@ Cette méthode retourne une valeur ID de veille qui permet de libérer les fonct ### Paramètres - _success_ - - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. + - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. - _error_ {{optional_inline}} - : Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}. - _options_ {{optional_inline}} @@ -61,7 +61,7 @@ options = { id = navigator.geolocation.watchPosition(success, error, options); ``` -> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) 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. +> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) 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. ## Spécifications diff --git a/files/fr/web/api/geolocationpositionerror/index.md b/files/fr/web/api/geolocationpositionerror/index.md index 0a03eb4bee..988b078756 100644 --- a/files/fr/web/api/geolocationpositionerror/index.md +++ b/files/fr/web/api/geolocationpositionerror/index.md @@ -17,7 +17,7 @@ _L'interface `GeolocationPositionError` n'hérite d'aucune propriété._ | Valeur | Constante associée | Description | | ------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | + | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | | `2` | `POSITION_UNAVAILABLE` | L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne. | | `3` | `TIMEOUT` | Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu. | diff --git a/files/fr/web/api/globaleventhandlers/index.md b/files/fr/web/api/globaleventhandlers/index.md index 816fd6e0e6..c260b68027 100644 --- a/files/fr/web/api/globaleventhandlers/index.md +++ b/files/fr/web/api/globaleventhandlers/index.md @@ -115,7 +115,7 @@ Les propriétés des évènements, de la forme `onXYZ`, sont définies sur {{dom - {{domxref("GlobalEventHandlers.onmouseup")}} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché. - {{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}} - - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. + - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. - {{ domxref("GlobalEventHandlers.onwheel") }} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché. - {{domxref("GlobalEventHandlers.onpause")}} diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.md b/files/fr/web/api/globaleventhandlers/onabort/index.md index 85348853fa..6ac2842916 100644 --- a/files/fr/web/api/globaleventhandlers/onabort/index.md +++ b/files/fr/web/api/globaleventhandlers/onabort/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/GlobalEventHandlers/onabort --- {{ ApiRef("HTML DOM") }} -Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). +Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). Bien que le [standard pour l'abandon d'un chargement de document](https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document) 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 `window` qui déclencherait un appel à `onabort`. -À 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 `img`. +À 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 `img`. ## Syntaxe @@ -35,7 +35,7 @@ window.onabort = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.md b/files/fr/web/api/globaleventhandlers/onblur/index.md index 1ae6bb272a..286ccc3d95 100644 --- a/files/fr/web/api/globaleventhandlers/onblur/index.md +++ b/files/fr/web/api/globaleventhandlers/onblur/index.md @@ -16,7 +16,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte element.onblur = nomFonctionUtilisateur; -- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : +- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : <!----> @@ -26,7 +26,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte ### Exemple -Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. +Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. ```html <form> @@ -37,7 +37,7 @@ Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », var elem = document.getElementById("foo"); -// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, +// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, // il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction elem.onblur = afficherMessage; diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.md b/files/fr/web/api/globaleventhandlers/onchange/index.md index bb1eff3e49..669a38b5d6 100644 --- a/files/fr/web/api/globaleventhandlers/onchange/index.md +++ b/files/fr/web/api/globaleventhandlers/onchange/index.md @@ -19,7 +19,7 @@ La propriété `onchange` définit et renvoie le gestionnaire d'évènement `onC ### Notes -Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : +Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : control.onfocus = focus; control.onblur = blur; @@ -28,7 +28,7 @@ Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement ` } function blur () { - if (control.value != original_value) + if (control.value != original_value) control.onchange(); } @@ -40,4 +40,4 @@ Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'év ### Voir aussi -- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) +- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.md b/files/fr/web/api/globaleventhandlers/onclick/index.md index 3c09f4fd85..b2df3b5bc4 100644 --- a/files/fr/web/api/globaleventhandlers/onclick/index.md +++ b/files/fr/web/api/globaleventhandlers/onclick/index.md @@ -15,7 +15,7 @@ La propriété **onclick** représente le gestionnaire d'évènement onClick de où _functionRef_ est une fonction ou une expression de type _function._ Consulter la [référence des fonctions](/en-US/docs/JavaScript/Reference/Functions_and_function_scope) pour plus de détails. -Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. +Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. ### Exemple diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.md b/files/fr/web/api/globaleventhandlers/onclose/index.md index bf698535b2..a577479e5b 100644 --- a/files/fr/web/api/globaleventhandlers/onclose/index.md +++ b/files/fr/web/api/globaleventhandlers/onclose/index.md @@ -31,4 +31,4 @@ window.onclose = resetThatServerThing; | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.md b/files/fr/web/api/globaleventhandlers/ondblclick/index.md index db9380a8bd..a4ecb0a523 100644 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.md +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.md @@ -17,7 +17,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d element.ondblclick = nomDeFonction; -- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : +- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : <!----> @@ -35,7 +35,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d function initElement() { var p = document.getElementById("foo"); - // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, + // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction. p.ondblclick = showAlert; }; diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.md b/files/fr/web/api/globaleventhandlers/onerror/index.md index 0da6eab128..860a5f2b41 100644 --- a/files/fr/web/api/globaleventhandlers/onerror/index.md +++ b/files/fr/web/api/globaleventhandlers/onerror/index.md @@ -10,14 +10,14 @@ translation_of: Web/API/GlobalEventHandlers/onerror --- {{ApiRef("HTML DOM")}} -Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: +Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: -- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. -- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. +- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. +- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. ## Syntaxe -Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. +Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. ### window\.onerror @@ -25,23 +25,23 @@ Pour des raisons historiques, des arguments différents sont passés aux gestio window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... } ``` -Paramètres de la fonction : +Paramètres de la fonction : - `message` : message d'erreur (chaîne ou objet évènement). Disponible comme `event` (sic !) dans le gestionnaire de HTML `onerror=""`. - source : l'URL du script où l'erreur a été déclenchée (chaîne) -- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) -- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) -- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} +- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) +- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) +- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} -### element.onerror (et `window.addEventListener('error')`) +### element.onerror (et `window.addEventListener('error')`) element.onerror = function(event) { ... } -`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. +`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. ## Notes -Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), 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 **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) 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. +Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), 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 **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) 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. window.onerror = function (msg, url, noLigne, noColonne, erreur) { var chaine = msg.toLowerCase(); @@ -63,13 +63,13 @@ Quand une erreur de syntaxe**(?)** se produit dans un script chargé à parti return false; }; -Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. +Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md index 5401fc38c2..d5fa8d43f1 100644 --- a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md +++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md @@ -31,7 +31,7 @@ function init() { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | -| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | +| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.md b/files/fr/web/api/globaleventhandlers/onreset/index.md index 8227bf6d7a..31c306baa8 100644 --- a/files/fr/web/api/globaleventhandlers/onreset/index.md +++ b/files/fr/web/api/globaleventhandlers/onreset/index.md @@ -40,7 +40,7 @@ function hit() { <form> <input type="reset" value="reset" /> </form> - <div id="d"> </div> + <div id="d"> </div> </body> </html> ``` @@ -53,7 +53,7 @@ L'évènement `reset` est déclenché quand l'utilisateur clique sur le bouton d | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.md b/files/fr/web/api/globaleventhandlers/onresize/index.md index 3ee94157c2..b18387cce1 100644 --- a/files/fr/web/api/globaleventhandlers/onresize/index.md +++ b/files/fr/web/api/globaleventhandlers/onresize/index.md @@ -59,7 +59,7 @@ window.onresize = sayHi; ### Notes -Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` 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. +Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` 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. ### Spécification diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.md b/files/fr/web/api/globaleventhandlers/onwheel/index.md index 2c85e2e382..a645f6cb0e 100644 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.md +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/Element/onwheel --- {{ ApiRef("DOM") }} -La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. +La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. ## Syntaxe @@ -24,7 +24,7 @@ element.onwheel = function() { .. } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md index 88237327df..8219532411 100644 --- a/files/fr/web/api/headers/index.md +++ b/files/fr/web/api/headers/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Headers --- {{APIRef("Fetch API")}} -L'interface `Headers` 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 `Headers` a une liste `Headers` 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 `Headers` sont reliés à une séquence d'octets sensible à la case. +L'interface `Headers` 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 `Headers` a une liste `Headers` 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 `Headers` sont reliés à une séquence d'octets sensible à la case. -Pour des raisons de sécurité, les `Headers` 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)}}. +Pour des raisons de sécurité, les `Headers` 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)}}. -Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. +Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. Vous pouvez récuperer un objet `Header` via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet `Header` en utilisant le constructeur {{domxref("Headers.Headers()")}}. @@ -46,13 +46,13 @@ Un objet implémentant `Headers` peut directement être utilisé dans une struct - {{domxref("Headers.has()")}} - : Retourne un booléen indiquant si un objet `Headers` contient un certain header. - {{domxref("Headers.keys()")}} - - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. + - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. - {{domxref("Headers.set()")}} - : Définti une nouvelle valeur pour un header existant dans un objet `Headers`, ou ajoute le header s'il n'existe pas déjà. - {{domxref("Headers.values()")}} - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet. -> **Note :** 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. +> **Note :** 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. > **Note :** Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses. @@ -74,7 +74,7 @@ monHeader.append('Content-Type', 'text/xml'); monHeader.get('Content-Type') // doit retourner 'text/xml' ``` -La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. +La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. ```js var mesHeaders = new Headers({ diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md index d9951dcdcc..e830bbe66f 100644 --- a/files/fr/web/api/history/index.md +++ b/files/fr/web/api/history/index.md @@ -8,14 +8,14 @@ translation_of: Web/API/History --- {{APIRef}} -L'interface **`History`** 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. +L'interface **`History`** 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. ## Propriétés -*L'interface `History`* *n'hérite d'aucune propriété.* +*L'interface `History`* *n'hérite d'aucune propriété.* - {{domxref("History.length")}} {{readOnlyInline}} - - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. + - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. - {{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}. - {{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} @@ -23,15 +23,15 @@ L'interface **`History`** permet de manipuler l'historique de navigation du n - {{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation. - {{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }} - - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. + - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. ## Méthodes -_L‘interface `History`_ _n‘hérite d‘aucune méthode._ +_L‘interface `History`_ _n‘hérite d‘aucune méthode._ - {{domxref("History.back()")}} - - : 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 `history.go(-1)`. + - : 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 `history.go(-1)`. > **Note :** 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. @@ -42,18 +42,18 @@ _L‘interface `History`_ _n‘hérite d‘aucune méthode._ > **Note :** 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. - {{domxref("History.go()")}} - - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` 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 `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). + - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` 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 `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). - {{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }} - - : 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 [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : 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 [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** 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 [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** 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 [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. - {{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }} - - : 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 [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : 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 [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** 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 [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** 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 [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. ## Spécifications diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index a218dcba37..a9473b7582 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -4,26 +4,26 @@ slug: Web/API/History_API/Example translation_of: Web/API/History_API/Example original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example --- -Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : +Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : **page_un.php**: ```php <?php - $page_title = "Page un"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page un"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -36,21 +36,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>first_page.php</strong>.</p> + <p>This is the content of <strong>first_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -58,20 +58,20 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```php <?php - $page_title = "Page deux"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page deux"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -84,21 +84,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>second_page.php</strong>.</p> + <p>This is the content of <strong>second_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -106,19 +106,19 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```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>"; - - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - echo json_encode(array("page" => $page_title, "content" => $page_content)); - } else { + $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>"; + + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + echo json_encode(array("page" => $page_title, "content" => $page_content)); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -135,9 +135,9 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -145,22 +145,22 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```css #ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; } #ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; } ``` @@ -196,212 +196,212 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p var ajaxRequest = new (function () { - function closeReq () { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq () { - if (!bIsLoading) { return; } - oReq.abort(); - closeReq(); - } - - function ajaxError () { - alert("Unknown error."); - } - - function ajaxLoad () { - var vMsg, nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 100)) { - /* - case 1: - // Informational 1xx - console.log("Information code " + vMsg); - break; - case 2: - // Successful 2xx - console.log("Successful code " + vMsg); - break; - case 3: - // Redirection 3xx - console.log("Redirection code " + vMsg); - break; - */ - case 4: - /* Client Error 4xx */ - alert("Client Error #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } - } - closeReq(); - } - - function filterURL (sURL, sViewMode) { - return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); - } - - function getPage (sPage) { - if (bIsLoading) { return; } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { oPageInfo.url = filterURL(sPage, null); } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); - } - - function requestPage (sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink () { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; - } - - function init () { - oPageInfo.title = document.title; - for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); - } - - const - - /* customizable constants */ - sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - - /* not customizable constants */ - rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href - }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required" - }; - - var - - oReq, bIsLoading = false, bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; + function closeReq () { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq () { + if (!bIsLoadi + oReq.abort( + + } + + fu + alert("Unknown err + } + + function ajaxLoad + var vMsg, nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse + document.title = oPageInfo.title = vMsg.page; + document.getElementById + i + hi + + } + break; + ult: + vMsg = nSta + switch + /* + case 1: + // + consol + bre + 2: + // + consol + + + + con + + */ + case 4: + /* + alert( + bre + 5: + /* S + alert( + bre + + + + + } + closeReq(); + } + + function filterURL (sURL, sView + return sURL.replace(rSearch, + } + + function getPage (sPage) { + if (bIsLoading) { return; } + oReq = new XMLHttpRequest(); + bIsLoading = + oReq.onload = ajaxLoad; + + if (sPage) { oPageInfo.ur + oReq.open("get", filterU + oReq.send(); + oLoadingBox.parent + } + + function requestPage (sURL) { + i + + getPage(sURL); + se { + /* Ajax navigation is n + location.assi + } + } + + function processLi + if (this.className === sAjaxClass + requestPage(this.href); + + } + return true; + } + + function init () { + oPageInfo.title = document.title; + for (var oLin + } + + const + + /* customizable constants */ + sTargetId = "ajax-cont + + /* not customizable + rSearch = /\?.*$/, r + oLoadingBox = + oPageInfo = { + title: null, + url: location.href + HTTPStatus = /* + 100: "Continue" + 101: "Swit + 102: "Proc + 200: "OK", + 201: "Created + 202: "Accepted", + 203: "Non-Author + 204: "No Content + 205: "Reset Cont + 206: "Partial Conte + 207: "Multi-Sta + 208: "Already R + 226: "IM Used", + 300: "Multipl + 301: "Moved P + 302: "Found", + 303: "See Other", + 304: "Not Modifi + 305: "Use Proxy" + 306: "Reserv + 307: "Tempor + 308: "Perman + 400: "Bad Request", + 401: "Unauthorize + 402: "Payment Req + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allow + 406: "Not Acce + 407: "Proxy Au + 408: "Reques + 409: "Confli + 410: "Gone", + 411: "Length Requi + 412: "Precondition + 413: "Request Enti + 414: "Request-URI + 415: "Unsupported + 416: "Requested Range N + 417: "Expectat + 422: "Unproces + 423: "Locked", + 424: "Failed Depen + 425: "Unassigned", + 426: "Upgrade Requ + 427: "Unassigned", + 428: "Precondition + 429: "Too Many Req + 430: "Unassigned", + 431: "Request Header + + + + 503: "Service Unavailab + 504: "Gateway Time + 505: "HTTP Version + 506: "Variant Also Negot + 507: "Insufficient St + 508: "Loop Detecte + 509: "Unassigne + 510: "Not Exten + 511: "Network Authentication Requ + }; + + var + + oReq, bIsLoadi + + oLoadingBox.id = "aja + oCover.onclick = abortReq; + oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function ( + bUpdateURL = false; + oPageInfo.title = oEvent.state.ti + oPageInfo. + + }; + + window.addEventListener + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })(); ``` -> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **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 à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** +> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **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 à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** -Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). +Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). ## Lire également diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md index c829ef21fa..c41c73ac24 100644 --- a/files/fr/web/api/history_api/index.md +++ b/files/fr/web/api/history_api/index.md @@ -54,7 +54,7 @@ Vous pouvez déterminer le nombre de pages de l'historique en accédant à la va var numberOfEntries = window.history.length; ``` -> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. +> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. ## Ajouter et modifier des entrées de l'historique @@ -62,7 +62,7 @@ var numberOfEntries = window.history.length; HTML5 a introduit les méthodes [history.pushState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()>) et [history.replaceState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()>), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement [onpopstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate). -L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). +L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). ### Exemple de la méthode pushState() @@ -75,7 +75,7 @@ history.pushState(stateObj, "page 2", "bar.html"); Cela va provoquer l'apparition dans la barre de navigation de http\://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de `bar.html` ni même le test d'existence de `bar.html`. -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'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. +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'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. 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 `popstate`, 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 `popstate`. @@ -92,7 +92,7 @@ Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer On peut assimiler l'appel à `pushState()` à l'affectation `window.location = "#foo"`, 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 `pushState()` a quelques avantages : -- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. +- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. - Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter `window.location = "#foo";` crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas `#foo`. - Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte. @@ -137,7 +137,7 @@ Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation. ### Lire l'état courant -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 `pushState()` ou `replaceState()`) 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é. +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 `pushState()` ou `replaceState()`) 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é. Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement `popstate` en utilisant la propriété `history.state` comme ceci : diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md index 81c6ed2503..47a39ee34d 100644 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -14,13 +14,13 @@ Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peu En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés. -Pour rendre un autre élément HTML glissable, deux choses doivent être faites : +Pour rendre un autre élément HTML glissable, deux choses doivent être faites : - Définissez l'attribut `{{htmlattrxref("draggable")}}` à `true` sur l'élément que vous voulez rendre glissable. - Ajoutez un scrutateur sur l'événement `{{event("dragstart")}}` et définissez les données du glissement dans ce scrutateur. - {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment. -Voici un exemple qui permet à une section de contenu d'être glissée : +Voici un exemple qui permet à une section de contenu d'être glissée : <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"> Ce texte <strong>peut</strong> être glissé. @@ -44,7 +44,7 @@ Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilis Ce texte <strong>peut</strong> être glissé. </div> -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. +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. ## Donnée de glissement @@ -52,13 +52,13 @@ Tous les événements de glissement ont une propriété appelée [dataTransfer]( 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. -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 [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) 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 `dragenter` et `dragover` 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 [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). 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. +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 [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) 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 `dragenter` et `dragover` 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 [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). 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. Les types MIME habituels sont [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) ou [image/jpeg](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image), mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur [cette page](/Fr/GlisserD%C3%A9poser/Types_de_glissement). 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 [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text). La donnée n'en sera qu'une représentation sous la forme d'un texte. -Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : +Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : event.dataTransfer.setData("text/plain", "Texte à glisser"); @@ -89,7 +89,7 @@ Lorsqu'un glissement a lieu, une image translucide est générée à partir de l event.dataTransfer.setDragImage(image, xOffset, yOffset); -Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : +Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : function dragWithCustomImage(event) { @@ -121,7 +121,7 @@ Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au nive event.dataTransfer.effectAllowed = "copy"; -Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : +Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : - none - : Aucune opération permise @@ -183,15 +183,15 @@ Vous pouvez également définir une propriété [effectAllowed](/fr/GlisserD%C3% ## Retour d'information du dépôt -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é [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). 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. +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é [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). 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. -De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. +De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. .droparea:-moz-drag-over { border: 1px solid black; } -Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. +Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. For more complex visual effects, you can also perform other operations during the `dragenter` 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 [image](/en/XUL/image) or [separator](/en/XUL/separator) element for example, and simply insert it into the document during the `dragenter` event. diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md index 3fbbe9166e..1464203ab7 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/index.md @@ -56,7 +56,7 @@ Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs). -Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. +Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets. @@ -93,7 +93,7 @@ Voir [la page de référence sur l'attribut `draggable`](/fr/docs/Web/HTML/Globa Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut `type`) tel que `text/html`. -Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : +Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : ```js function dragstart_handler(ev) { diff --git a/files/fr/web/api/htmlbodyelement/index.md b/files/fr/web/api/htmlbodyelement/index.md index cc77e6c2b5..43e03fefd6 100644 --- a/files/fr/web/api/htmlbodyelement/index.md +++ b/files/fr/web/api/htmlbodyelement/index.md @@ -71,7 +71,7 @@ _Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hé | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML WHATWG')}} | Techniquement, les propriétés liées à l'événement, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onlanguagechange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, `onstorage` et `onunload`, ont été passées à {{domxref("WindowEventHandlers")}}, et `HTMLBodyElement` implémentant cette interface. | -| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5 W3C')}} | Les propriétés suivantes sont désormais obsolètes: `aLink`, `bgColor`, `background`, `link`, `text` Les propriétés suivantes ont été ajoutées:. `vLink`, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, et `onstorage`. | | {{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM2 HTML')}} | Ne change pas de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM1')}} | Définition initiale. | diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md index cb0d0fbc79..b0124d9055 100644 --- a/files/fr/web/api/htmlbrelement/index.md +++ b/files/fr/web/api/htmlbrelement/index.md @@ -16,7 +16,7 @@ _Hérite les propriétés de son parent : {{domxref("HTMLElement")}}._ | Nom | Type | Description | | -------------------------------- | -------------------------------- | ------------------------------------------------------ | -| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | +| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | ## Méthodes diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md index 06bf2eb44a..040bdace07 100644 --- a/files/fr/web/api/htmlbuttonelement/index.md +++ b/files/fr/web/api/htmlbuttonelement/index.md @@ -11,13 +11,13 @@ translation_of: Web/API/HTMLButtonElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLButtonElement`** 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. +L'interface **`HTMLButtonElement`** 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. {{InheritanceDiagram(600, 120)}} ## Propriétés -Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* +Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.accessKey")}} - : Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton. @@ -45,7 +45,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.name")}} - : 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. - {{domxref("HTMLButtonElement.tabIndex")}} - - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . + - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . - {{domxref("HTMLButtonElement.type")}} - : : Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: @@ -62,7 +62,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.value")}} - : Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton. - {{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}} - - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . + - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . ## Les méthodes @@ -98,9 +98,9 @@ Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - mo | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | -| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | -| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | +| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | +| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | +| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM1')}} | . Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.md b/files/fr/web/api/htmlcanvaselement/getcontext/index.md index 3f61afbe7c..77920ac0c8 100644 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.md +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCanvasElement/getContext --- {{APIRef("Canvas API")}} -La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. +La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. ## Syntaxe @@ -21,18 +21,18 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - typeDeContexte - - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : + - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : - - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. - - `"webgl"` (ou `"experimental-webgl"`) 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 [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). - - "`webgl2`" 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 [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. - - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. + - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. + - `"webgl"` (ou `"experimental-webgl"`) 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 [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). + - "`webgl2`" 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 [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. + - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. - Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). + Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). - `attributsDeContexte` - - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : + - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : ```js canvas.getContext('webgl', @@ -54,28 +54,28 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - **`antialias`** : booléen indiquant si un anti-aliasing doit être effectué ou non. - **`premultipliedAlpha`** : booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié. - **`preserveDrawingBuffer`** : si la valeur est `true`, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur. - - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. + - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. ### Valeur retournée : Un {{domxref("RenderingContext")}}, qui est soit un -- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, -- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, -- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou -- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. +- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, +- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, +- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou +- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. -Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. +Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. ## Exemples -Étant donné l'élément {{HTMLElement("canvas")}} : +Étant donné l'élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : +vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : ```js var canvas = document.getElementById('canvas'); @@ -83,15 +83,15 @@ var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... } ``` -Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. +Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | +| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité navigateurs @@ -99,6 +99,6 @@ Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRe ## Voir aussi -- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. +- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. - {{domxref("OffscreenCanvas.getContext()")}}. -- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. +- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. diff --git a/files/fr/web/api/htmlcanvaselement/height/index.md b/files/fr/web/api/htmlcanvaselement/height/index.md index 647a45f107..342329cc6b 100644 --- a/files/fr/web/api/htmlcanvaselement/height/index.md +++ b/files/fr/web/api/htmlcanvaselement/height/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/HTMLCanvasElement/height --- {{APIRef("Canvas API")}} -La propriété **`HTMLCanvasElement.height`** 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 `150` is utilisée. +La propriété **`HTMLCanvasElement.height`** 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 `150` is utilisée. -C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. +C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. ## Syntaxe @@ -21,13 +21,13 @@ C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir la hauteur du canevas avec le code suivant : +vous pouvez obtenir la hauteur du canevas avec le code suivant : ```js var canvas = document.getElementById('canvas'); @@ -39,7 +39,7 @@ console.log(canvas.height); // 300 | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcollection/index.md b/files/fr/web/api/htmlcollection/index.md index 94d2f75eba..d2e9197464 100644 --- a/files/fr/web/api/htmlcollection/index.md +++ b/files/fr/web/api/htmlcollection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCollection L'interface **HTMLCollection** est constituée d'une collection générique (à la manière d'un tableau similaire à [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) 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. -**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). +**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change. @@ -25,11 +25,11 @@ Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le do - {{domxref("HTMLCollection.item()")}} - : Retourne le nœud spécifique à l'`index` basé sur zéro donné dans la liste. Retourne `null` si l'`index` est hors de portée. - {{domxref("HTMLCollection.namedItem()")}} - - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. + - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. ## Utilisation en JavaScript -`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. +`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. Par exemple, en supposant qu'il y ait un élément `<form>` _(formulaire)_ dans le document et que son `id` soit `"myForm"` : @@ -59,8 +59,8 @@ Certains navigateurs se comportent différemment quand il y a plus d'un élémen | Specification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | +| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | | {{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/htmlcollection/item/index.md b/files/fr/web/api/htmlcollection/item/index.md index d1c5d2cea5..c25813184e 100644 --- a/files/fr/web/api/htmlcollection/item/index.md +++ b/files/fr/web/api/htmlcollection/item/index.md @@ -18,7 +18,7 @@ L'élement à la position spécifiée, ou null si la position est inférieure à ## Description -La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. +La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. ## Exemple diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md index c34b0e1a69..d1945bbed0 100644 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/HTMLContentElement/getDistributedNodes --- {{ APIRef("Web Components") }} -La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. +La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Syntaxe @@ -27,7 +27,7 @@ var nodes = myContentObject.getDistributedNodes(); | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/index.md b/files/fr/web/api/htmlcontentelement/index.md index 51df4a127b..d03ca6a742 100644 --- a/files/fr/web/api/htmlcontentelement/index.md +++ b/files/fr/web/api/htmlcontentelement/index.md @@ -11,27 +11,27 @@ translation_of: Web/API/HTMLContentElement --- {{ APIRef("Web Components") }} -L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). +L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). ## Propriétés -_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ +_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.select")}} - - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. + - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Méthodes -_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ +_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.getDistributedNodes()")}} - - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. + - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/select/index.md b/files/fr/web/api/htmlcontentelement/select/index.md index c639c24316..a11d49dfa0 100644 --- a/files/fr/web/api/htmlcontentelement/select/index.md +++ b/files/fr/web/api/htmlcontentelement/select/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLContentElement/select --- {{ APIRef("Web Components") }} -La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. +La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Syntaxe @@ -28,7 +28,7 @@ myContentObject.select = "h1 .error"; | Specification | Status | Comment | | -------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmldocument/index.md b/files/fr/web/api/htmldocument/index.md index e9f6331602..45ef36b0b8 100644 --- a/files/fr/web/api/htmldocument/index.md +++ b/files/fr/web/api/htmldocument/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLDocument --- {{ APIRef("HTML DOM") }} -**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) 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). +**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) 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). -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. +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. ## Spécification diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md index d73b519dbd..c8ef315786 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.md +++ b/files/fr/web/api/htmlelement/accesskey/index.md @@ -14,6 +14,6 @@ original_slug: Web/API/Element/accessKey --- {{APIRef("DOM")}} -La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. +La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. -> **Note :** La propriété `Element.accessKey` 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). +> **Note :** La propriété `Element.accessKey` 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). diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index b37e99d8f3..cd699a2379 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -82,4 +82,4 @@ function updateValue(e) { ## Voir aussi -- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) +- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index a3bd13be95..540f203276 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -33,7 +33,7 @@ L'événement **change** est déclenché pour les éléments {{HTMLElement("inpu En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent : - Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`_(case à cocher_). -- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). +- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). - Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou `<input type="text">`). Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du \<select> (voir {{bug("126379")}}). diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md index 9bd9f6704c..c4572a76d6 100644 --- a/files/fr/web/api/htmlelement/click/index.md +++ b/files/fr/web/api/htmlelement/click/index.md @@ -44,7 +44,7 @@ D'autres implémentations du DOM peuvent se comporter différemment. | Spécification | Statut | Commentaires | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md index e90cf402d7..10b57f9664 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.md +++ b/files/fr/web/api/htmlelement/contenteditable/index.md @@ -14,8 +14,8 @@ translation_of: Web/API/HTMLElement/contentEditable La propriété **`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs : - `"true"` _(vrai)_ indique que l'élément est éditable. -- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. -- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. +- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. +- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}. diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md index 5cfee0d797..e6aba0d240 100644 --- a/files/fr/web/api/htmlelement/dir/index.md +++ b/files/fr/web/api/htmlelement/dir/index.md @@ -33,11 +33,11 @@ para.dir = "rtl"; ## Notes -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). +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). -Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. +Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. -Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. +Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. {{ gecko_callout_heading("7.0") }} @@ -47,4 +47,4 @@ Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renv | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 6c2121924c..1937f8240a 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -42,8 +42,8 @@ Voici un exemple où un bloc caché est utilisé pour contenir un message de rem ```js document.getElementById("boutonOk") .addEventListener("click", function() { - document.getElementById("bienvenue").hidden = true; - document.getElementById("impressionnant").hidden = false; + document.getElementById("bienvenue").hidden = true; + document.getElementById("impressionnant").hidden = false; }, false); ``` diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md index 77f521cae9..2a4ebc18d0 100644 --- a/files/fr/web/api/htmlelement/index.md +++ b/files/fr/web/api/htmlelement/index.md @@ -19,10 +19,10 @@ translation_of: Web/API/HTMLElement | {{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | La touche de navigation clavier assignée à l'élément. | | {{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | Une chaîne de caractères définissant la touche de navigation clavier assignée. | | {{domxref("element.className", "className")}} | {{domxref("DOMString")}} | Le nom de la classe [CSS](/fr/docs/CSS) définie pour l'élément. | -| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | +| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | | {{domxref("element.dir", "dir")}} | {{domxref("DOMString")}} | L'attribut `dir` de l'élément. | | {{domxref("element.id", "id")}} | {{domxref("DOMString")}} | L'ID de l'élément. | -| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | +| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | | {{domxref("element.title", "title")}} | {{domxref("DOMString")}} | L'attribut `title` de l'élément. | ## Méthodes @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLElement | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md index 3f639cd672..9749e10c9e 100644 --- a/files/fr/web/api/htmlelement/innertext/index.md +++ b/files/fr/web/api/htmlelement/innertext/index.md @@ -8,7 +8,7 @@ original_slug: Web/API/Node/innerText ## Sommaire -**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. +**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. {{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux. diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md index d70e1d9447..41eee8858b 100644 --- a/files/fr/web/api/htmlelement/input_event/index.md +++ b/files/fr/web/api/htmlelement/input_event/index.md @@ -8,9 +8,9 @@ tags: - HTML5 translation_of: Web/API/HTMLElement/input_event --- -L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). +L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). -De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "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 [`designMode`](/fr/docs/Web/API/Document/designMode) . +De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "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 [`designMode`](/fr/docs/Web/API/Document/designMode) . ## Information générale diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 65b63c9c97..92aa4fc4ca 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -40,7 +40,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de la dernière image, {{SpecName('HTML5.1')}} | | {{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5.1')}} | L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | +| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md index 3d17dce396..980247a301 100644 --- a/files/fr/web/api/htmlelement/lang/index.md +++ b/files/fr/web/api/htmlelement/lang/index.md @@ -35,7 +35,7 @@ if (document.documentElement.lang === "en") { ## Notes -Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). 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 `unknown` (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. +Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). 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 `unknown` (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. Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. @@ -43,4 +43,4 @@ Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md index 9ea5546329..794d246dc8 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.md +++ b/files/fr/web/api/htmlelement/offsetheight/index.md @@ -35,7 +35,7 @@ L'exemple d'image ci-avant montre une barre de défilement et un décalage `offs ### Notes -`offsetHeight` 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). +`offsetHeight` 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). ### Références diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md index 7aab29ee95..b0f7aff57a 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.md +++ b/files/fr/web/api/htmlelement/offsetleft/index.md @@ -21,7 +21,7 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare ### Note -`offsetLeft` 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 **span** 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é `offsetLeft` 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 à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. +`offsetLeft` 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 **span** 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é `offsetLeft` 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 à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. ### Exemple @@ -29,16 +29,16 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare var tOLeft = colorTable.offsetLeft; if (tOLeft > 5) { - // grand décalage à gauche : faire quelque chose ici + // grand décalage à gauche : faire quelque chose ici } ### Exemple -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. +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.  -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. +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. ```html <div style="width: 300px; border-color:blue; diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md index 93a25485bf..71a075b8ac 100644 --- a/files/fr/web/api/htmlelement/offsetparent/index.md +++ b/files/fr/web/api/htmlelement/offsetparent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLElement/offsetParent ### Résumé -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'**offsetParent**. +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'**offsetParent**. ### Syntaxe diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md index 66bde2526f..f5a6b3f465 100644 --- a/files/fr/web/api/htmlelement/offsetwidth/index.md +++ b/files/fr/web/api/htmlelement/offsetwidth/index.md @@ -29,7 +29,7 @@ Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures d ### Notes -`offsetWidth` est une propriété du modèle objet DHTML 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). +`offsetWidth` est une propriété du modèle objet DHTML 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). ### Références diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md index fc7fe6a2eb..f52e7b5ca7 100644 --- a/files/fr/web/api/htmlelement/outertext/index.md +++ b/files/fr/web/api/htmlelement/outertext/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLElement/outerText ## Résumé -**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. +**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. ## Exemple diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md index 4746016d01..ea06935e79 100644 --- a/files/fr/web/api/htmlelement/title/index.md +++ b/files/fr/web/api/htmlelement/title/index.md @@ -36,7 +36,7 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', '#dom-title', 'title')}} | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs @@ -45,4 +45,4 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t ## Voir aussi -- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). +- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md index 2ab87e6a9e..30a0e624fa 100644 --- a/files/fr/web/api/htmlelement/transitionend_event/index.md +++ b/files/fr/web/api/htmlelement/transitionend_event/index.md @@ -38,7 +38,7 @@ L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/e </tbody> </table> -L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. +L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. ## Propriétés @@ -118,7 +118,7 @@ el.addEventListener('transitioncancel', function() { }); el.addEventListener('transitionend', function() { - message.textContent = 'transitionend fired'; + message.textContent = 'transitionend fired'; }); ``` diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.md b/files/fr/web/api/htmlformelement/acceptcharset/index.md index 57663cfbef..3ff909eb93 100644 --- a/files/fr/web/api/htmlformelement/acceptcharset/index.md +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLFormElement/acceptCharset --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.acceptCharset`** 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. +La propriété **`HTMLFormElement.acceptCharset`** 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. ## Syntaxe @@ -20,6 +20,6 @@ La propriété **`HTMLFormElement.acceptCharset`** représente une liste des co ## Spécification -[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) +[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) [DOM Level 2 HTML: acceptCharset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795) diff --git a/files/fr/web/api/htmlformelement/action/index.md b/files/fr/web/api/htmlformelement/action/index.md index 612ca4a371..84b6bb9ba4 100644 --- a/files/fr/web/api/htmlformelement/action/index.md +++ b/files/fr/web/api/htmlformelement/action/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/action --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. 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. diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md index 917df92fce..582fe668d5 100644 --- a/files/fr/web/api/htmlformelement/elements/index.md +++ b/files/fr/web/api/htmlformelement/elements/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/elements --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. +La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. Vous pouvez accéder à un élément particulier en utilisant soit un index soit le `name` ou l'`id` de l'élément. diff --git a/files/fr/web/api/htmlformelement/encoding/index.md b/files/fr/web/api/htmlformelement/encoding/index.md index a148520e2d..6ea6cc9a55 100644 --- a/files/fr/web/api/htmlformelement/encoding/index.md +++ b/files/fr/web/api/htmlformelement/encoding/index.md @@ -5,4 +5,4 @@ translation_of: Web/API/HTMLFormElement/encoding --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. +La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. diff --git a/files/fr/web/api/htmlformelement/enctype/index.md b/files/fr/web/api/htmlformelement/enctype/index.md index 71107a5efa..9215596bc7 100644 --- a/files/fr/web/api/htmlformelement/enctype/index.md +++ b/files/fr/web/api/htmlformelement/enctype/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/enctype --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. -Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". +Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/index.md b/files/fr/web/api/htmlformelement/index.md index 8850ffaf60..3ed96ee05c 100644 --- a/files/fr/web/api/htmlformelement/index.md +++ b/files/fr/web/api/htmlformelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLFormElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. +L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. {{InheritanceDiagram(600,120)}} @@ -62,7 +62,7 @@ _Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElemen ### Obtention d'un objet élément de formulaire -Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) 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")}}. +Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) 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")}}. {{domxref("Document.forms")}} renvoie un tableau des objets `HTMLFormElement` listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel : @@ -79,7 +79,7 @@ Vous pouvez accéder à la liste des éléments contenant des données dans le f ### Éléments considérés comme des contrôles de formulaire -Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : +Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : - {{HTMLElement("button")}} (_bouton_) - {{HTMLElement("fieldset")}} (*champ*s) diff --git a/files/fr/web/api/htmlformelement/length/index.md b/files/fr/web/api/htmlformelement/length/index.md index 1f497f191c..4cee034019 100644 --- a/files/fr/web/api/htmlformelement/length/index.md +++ b/files/fr/web/api/htmlformelement/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/length --- {{APIRef("HTML DOM")}} -La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. +La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/method/index.md b/files/fr/web/api/htmlformelement/method/index.md index 43eaa9c50a..7f253d80e2 100644 --- a/files/fr/web/api/htmlformelement/method/index.md +++ b/files/fr/web/api/htmlformelement/method/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/method --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. +La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/name/index.md b/files/fr/web/api/htmlformelement/name/index.md index 3256e5be65..508b688a9f 100644 --- a/files/fr/web/api/htmlformelement/name/index.md +++ b/files/fr/web/api/htmlformelement/name/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/name --- {{APIRef("HTML DOM")}} -La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. +La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. -Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, 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 `createElement()` à partir de la propriété `name`. +Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, 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 `createElement()` à partir de la propriété `name`. ## Syntaxe @@ -19,12 +19,12 @@ Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ```js var form1name = document.getElementById("form1").name; -if (form1name != document.form.form1) { +if (form1name != document.form.form1) { // browser doesn't support this form of reference } ``` ## Spécification -- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) +- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) - [DOM Level 2 HTML: name](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454) diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.md b/files/fr/web/api/htmlformelement/reportvalidity/index.md index d54f17148d..73a936beec 100644 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.md +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/HTMLFormElement/reportValidity --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . +La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . ## Syntax @@ -34,7 +34,7 @@ document.forms['myform'].addEventListener('submit', function() { | Specification | Status | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlformelement/submit/index.md b/files/fr/web/api/htmlformelement/submit/index.md index 2630092001..64feae672e 100644 --- a/files/fr/web/api/htmlformelement/submit/index.md +++ b/files/fr/web/api/htmlformelement/submit/index.md @@ -9,15 +9,15 @@ translation_of: Web/API/HTMLFormElement/submit --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné +La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné 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: - Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire -- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . +- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . - [Constraint validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) n'est pas déclenché . -Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. +Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. ## Syntax diff --git a/files/fr/web/api/htmlformelement/target/index.md b/files/fr/web/api/htmlformelement/target/index.md index b5c5dcc6c7..e1c63b2d5e 100644 --- a/files/fr/web/api/htmlformelement/target/index.md +++ b/files/fr/web/api/htmlformelement/target/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/target --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). +La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). ## Syntaxe diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.md b/files/fr/web/api/htmliframeelement/contentdocument/index.md index 178b02027f..6dadd42b5d 100644 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.md +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.md @@ -4,7 +4,7 @@ slug: Web/API/HTMLIFrameElement/contentDocument translation_of: HTMLIFrameElement.contentDocument browser-compat: api.HTMLIFrameElement.contentDocument --- -Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. +Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. ## Exemples diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md index 07b28b66bc..5b651f7ceb 100644 --- a/files/fr/web/api/htmlimageelement/index.md +++ b/files/fr/web/api/htmlimageelement/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/HTMLImageElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . +L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . ## Propriétés _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.align")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ - {{domxref("HTMLImageElement.alt")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image. - {{domxref("HTMLImageElement.border")}} {{obsolete_inline}} @@ -22,7 +22,7 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.crossOrigin")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ représentant le paramètre CORS défini pour cet élément image. Voir [Attributs de règlage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus de détails. - {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). + - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). - {{domxref("HTMLImageElement.height")}} - : Est un `unsigned long` _(non signé long)_ qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS. - {{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}} @@ -30,29 +30,29 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.isMap")}} - : Est un {{domxref("Boolean")}} _(booléen)_ qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur. - {{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. - {{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. - {{domxref("HTMLImageElement.name")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. - {{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}} - - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. + - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. - {{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. - {{domxref("HTMLImageElement.src")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. - {{domxref("HTMLImageElement.sizes")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. - {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. - {{domxref("HTMLImageElement.useMap")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. - {{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}} - : Est un `long` représentant l'espace au-dessus et en-dessous de l'image. - {{domxref("HTMLImageElement.width")}} - : Est un `unsigned long` qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS. - {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. + - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. - {{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}} - : Retourne un `long` représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. @@ -61,16 +61,16 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ _Hérite les propriétés de son parent, {{domxref("HTMLElement")}}._ - {{domxref("HTMLImageElement.Image()", "Image()")}} - - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long` , qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. + - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long`, qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. ## Erreurs Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris : -- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. -- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. +- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. +- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. - L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée. -- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. +- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. - L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}". ## Exemple diff --git a/files/fr/web/api/htmlinputelement/index.md b/files/fr/web/api/htmlinputelement/index.md index 7240d27edb..91f36c0bbc 100644 --- a/files/fr/web/api/htmlinputelement/index.md +++ b/files/fr/web/api/htmlinputelement/index.md @@ -571,7 +571,7 @@ The **`HTMLInputElement`** interface provides special properties and methods for <code><em>string</em></code ><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works - with<strong> </strong>{{htmlattrxref("min","input")}} and + with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.md b/files/fr/web/api/htmlmediaelement/abort_event/index.md index 77cf2c3790..b54fec6b1b 100644 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.md +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event --- {{APIRef}} -L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. +L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. <table class="properties"> <tbody> diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.md b/files/fr/web/api/htmlmediaelement/canplay_event/index.md index 3c40a18ea7..cea254a75b 100644 --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.md +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.md @@ -3,7 +3,7 @@ title: 'HTMLMediaElement: canplay' slug: Web/API/HTMLMediaElement/canplay_event translation_of: Web/API/HTMLMediaElement/canplay_event --- -L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). +L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). ## Informations Générales diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.md b/files/fr/web/api/htmlmediaelement/capturestream/index.md index 73ef52ce23..f5ac60456a 100644 --- a/files/fr/web/api/htmlmediaelement/capturestream/index.md +++ b/files/fr/web/api/htmlmediaelement/capturestream/index.md @@ -38,7 +38,7 @@ Dans cet exemple, un écouteur d'événement est mise en place, permettant la ca document.querySelector('.playAndRecord').addEventListener('click', function() { var playbackElement = document.getElementById("playback"); var captureStream = playbackElement.captureStream(); - playbackElement.play(); + playbackElement.play(); }); ``` @@ -56,12 +56,12 @@ Voir [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/R ### Firefox-notes spécifiques -Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. +Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. Cependant, `captureStream()` reste préfixé `mozCaptureStream()` sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées : - Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}. -- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. +- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. - Repasser la source en `MediaStream` ajoute des pistes au flux et fonctionne de nouveau comme prévu. - L'appel à `mozCaptureMediaStream()` sur un élément avec une source `MediaStream` retourne un flux qui contient uniquement les pistes jouées par un `MediaStream`. - Si vous appellez `mozCaptureMediaStream()` sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un `MediaStream`, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment. diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md index ae4bf10a8b..fa8b25d7e2 100644 --- a/files/fr/web/api/htmlmediaelement/index.md +++ b/files/fr/web/api/htmlmediaelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. +L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. ## Propriétés @@ -45,7 +45,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.defaultPlaybackRate")}} - : est un `double` indiquant le taux de lecture par défaut pour le média. - {{domxref("HTMLMediaElement.disableRemotePlayback")}} - - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. + - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. - {{domxref("HTMLMediaElement.duration")}}{{readonlyinline}} - : renvoie un `double` indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible. - {{domxref("HTMLMediaElement.ended")}}{{readonlyinline}} @@ -55,25 +55,25 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.loop")}} - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (_boucle_), lequel indique si l'élément média doit recommencer quand il arrive à la fin. - {{domxref("HTMLMediaElement.mediaGroup")}} - - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. + - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. - {{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}} - - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. + - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. - {{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}} - - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. + - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. - {{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}} - : est un `double` qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour `currentSrc`, sinon il est égal à la durée du média. -- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} - : est un `unsigned long` qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement `MozAudioAvailable`. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux \* 1024 (c'est-à-dire, 2 canaux \* 1024 échantillons = total 2048). La propriété `mozFrameBufferLength` peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée _doit_ être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement [loadedmetadata](/en-US/docs/Web/Events/loadedmetadata), lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements `MozAudioAvailable` aient commencé à se déclencher. -- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. +- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} + - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. - {{domxref("HTMLMediaElement.muted")}} - : est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. `true` (_vrai_) si l'audio est coupé et `false` (_faux_) sinon. - {{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}} - - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. + - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. - {{domxref("HTMLMediaElement.paused")}}{{readonlyinline}} - : renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause. - {{domxref("HTMLMediaElement.playbackRate")}} @@ -85,7 +85,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} - : est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à `false` (_faux_), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (`mozPreservesPitch`) et WebKit (`webkitPreservesPitch`). - {{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}} - - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. + - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. - {{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}} - : Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant. - {{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}} @@ -120,7 +120,7 @@ Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un na - {{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}} - : renvoie un `double` qui indique la position de lecture initiale en secondes. -- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - : renvoie un `double` représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo). ### Gestionnaires d'évènements obsolètes @@ -137,7 +137,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle - {{domxref("HTMLMediaElement.addTextTrack()")}} - : Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média. - {{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}} - - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. + - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. - {{domxref("HTMLMediaElement.canPlayType()")}} - : Détermine si le type de média spécifié peut être lu. - {{domxref("HTMLMediaElement.fastSeek()")}} @@ -166,7 +166,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge. - {{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}} - - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. + - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. ## Spécifications diff --git a/files/fr/web/api/htmlmediaelement/play/index.md b/files/fr/web/api/htmlmediaelement/play/index.md index 5ec797381e..82eb34932b 100644 --- a/files/fr/web/api/htmlmediaelement/play/index.md +++ b/files/fr/web/api/htmlmediaelement/play/index.md @@ -13,9 +13,9 @@ tags: - play translation_of: Web/API/HTMLMediaElement/play --- -{{APIRef("HTML DOM")}} {{SeeCompatTable}} +{{APIRef("HTML DOM")}} {{SeeCompatTable}} -La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). +La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). ## Syntaxe @@ -31,7 +31,7 @@ Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou reje ### Exceptions -Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : +Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : - `NotAllowedError` - : Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play". @@ -42,7 +42,7 @@ D'autres types d'exceptions peuvent survenir selon l'implémentation du navigate ## Exemple -Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. +Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. ```js let myVideo = document.getElementById("myVideoElement"); @@ -61,7 +61,7 @@ myVideo.play().then(() => { | {{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}} | {{Spec2('HTML WHATWG')}} | Définition initiale; living specification. | | {{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | -> **Note :** 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. +> **Note :** 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. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlmediaelement/volume/index.md b/files/fr/web/api/htmlmediaelement/volume/index.md index 9f33840d7c..cf56cbe123 100644 --- a/files/fr/web/api/htmlmediaelement/volume/index.md +++ b/files/fr/web/api/htmlmediaelement/volume/index.md @@ -18,7 +18,7 @@ La propriété **`HTMLMediaElement.volume`** définit le volume auquel le média ## Syntaxe - var volume = video.volume; //1 + var volume = video.volume; //1 ### Valeur diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md index eb93cdf43a..37e86d54aa 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.md +++ b/files/fr/web/api/htmlselectelement/remove/index.md @@ -46,9 +46,9 @@ sel.remove(1); | Spécification | Status | Comment | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ | -| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML5 W3C')}} | Is a snapshot of {{SpecName("HTML WHATWG")}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | | {{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM1')}} | Initial definition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md index fb449d6b3e..be5650ae33 100644 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLSelectElement/setCustomValidity --- {{ APIRef("HTML DOM") }} -La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. +La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. ## Syntaxe @@ -15,7 +15,7 @@ ElmSelectionne.setCustomValidity(message); ### Paramètres -- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. +- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. ## Spécifications diff --git a/files/fr/web/api/htmlstyleelement/index.md b/files/fr/web/api/htmlstyleelement/index.md index 87e7e4d49b..b4b983a1d0 100644 --- a/files/fr/web/api/htmlstyleelement/index.md +++ b/files/fr/web/api/htmlstyleelement/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLStyleElement ### Notes -Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : +Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : - [L'objet DOM element.style](fr/DOM/element.style) - [L'objet DOM stylesheet](fr/DOM/stylesheet) @@ -35,7 +35,7 @@ ou directement sur cet élément à l'aide de `element.style.propertyName` (par De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété `border` écrasera les réglages définis ailleurs pour la propriété `border` de cet élément dans la section `head` du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme `padding`, `margin` ou `font` par exemple. -Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : +Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : ```html <html> @@ -82,7 +82,7 @@ L'objet `style` représente une règle de style individuelle. Contrairement aux _in-line_ d'un élément particulier. -Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : +Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> @@ -109,7 +109,7 @@ Les attributs **media** et **type** du style peuvent être donnés ou non. Notez var el = document.getElementById("un-element"); el.setAttribute("style", "background-color:darkblue;"); -Soyez cependant conscient que `setAttribute` é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 `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. +Soyez cependant conscient que `setAttribute` é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 `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. ##### Propriétés diff --git a/files/fr/web/api/htmltablecellelement/index.md b/files/fr/web/api/htmltablecellelement/index.md index 5e7f4bded8..e82e644cf5 100644 --- a/files/fr/web/api/htmltablecellelement/index.md +++ b/files/fr/web/api/htmltablecellelement/index.md @@ -62,4 +62,4 @@ _Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("H ## Voir aussi -- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. +- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. diff --git a/files/fr/web/api/htmltableelement/caption/index.md b/files/fr/web/api/htmltableelement/caption/index.md index 68308f7596..4978f7502b 100644 --- a/files/fr/web/api/htmltableelement/caption/index.md +++ b/files/fr/web/api/htmltableelement/caption/index.md @@ -27,5 +27,5 @@ Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau. ### Spécification -- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) +- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) - [Interface HTMLTableCaptionElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137)) diff --git a/files/fr/web/api/htmltableelement/insertrow/index.md b/files/fr/web/api/htmltableelement/insertrow/index.md index 6309720d21..4850f07779 100644 --- a/files/fr/web/api/htmltableelement/insertrow/index.md +++ b/files/fr/web/api/htmltableelement/insertrow/index.md @@ -12,16 +12,16 @@ translation_of: Web/API/HTMLTableElement/insertRow --- {{APIRef("HTML DOM")}} -La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. +La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. ## Syntaxe var ligne = HTMLTableElement.insertRow(optionnel indice = -1); - [`HTMLTableElement`](/en-US/docs/DOM/HTMLTableElement) est une référence à un élément table HTML. -- `indice` est l'indice de ligne de la nouvelle ligne. -- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` 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. -- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : +- `indice` est l'indice de ligne de la nouvelle ligne. +- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` 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. +- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : ` var tbody_particulier``=document.getElementById(id_tbody); var ligne=tbody_particulier.``insertRow(indice) ` ## Exemple @@ -57,13 +57,13 @@ ajouteLigne('TableA'); Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD. -Remarquez que `insertRow` 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 [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. +Remarquez que `insertRow` 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 [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM2 HTML")}} | Spécifie plus en détail où la ligne est insérée. | | {{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM1")}} | Définition initiale. | diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 4d9f632f14..015f1e77b5 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -70,7 +70,7 @@ addRow('my-table'); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -80,4 +80,4 @@ addRow('my-table'); ## Voir aussi - {{domxref("HTMLTableElement.insertRow()")}} -- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} +- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} diff --git a/files/fr/web/api/htmlunknownelement/index.md b/files/fr/web/api/htmlunknownelement/index.md index 5d240fe885..a3eeda7dfa 100644 --- a/files/fr/web/api/htmlunknownelement/index.md +++ b/files/fr/web/api/htmlunknownelement/index.md @@ -11,11 +11,11 @@ L’interface **`HTMLUnknownElement`** représente un élément HTML invalide et ## Propriétés -_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ ## Méthodes -_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ ## Spécifications @@ -30,5 +30,5 @@ _Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef( ## Voir aussi -- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} +- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} - {{DOMxRef("SVGUnknownElement")}} diff --git a/files/fr/web/api/idbcursor/advance/index.md b/files/fr/web/api/idbcursor/advance/index.md index 6b56ff6a70..b3f7f674f9 100644 --- a/files/fr/web/api/idbcursor/advance/index.md +++ b/files/fr/web/api/idbcursor/advance/index.md @@ -31,7 +31,7 @@ Aucune. ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : | Exception | Description | | -------------------------- | ---------------------------------------------------------------- | @@ -43,7 +43,7 @@ Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise `cursor.advance(2)` pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. `advance()`fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant. -On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). +On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). ```js function advanceResult() { @@ -69,7 +69,7 @@ function advanceResult() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/continue/index.md b/files/fr/web/api/idbcursor/continue/index.md index 7792e063da..53d6c951b2 100644 --- a/files/fr/web/api/idbcursor/continue/index.md +++ b/files/fr/web/api/idbcursor/continue/index.md @@ -27,7 +27,7 @@ curseur.continue(cléOptionnelle); ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : <table class="standard-table"> <thead> @@ -95,7 +95,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md index d471c41de2..cb9e8f7bf8 100644 --- a/files/fr/web/api/idbcursor/index.md +++ b/files/fr/web/api/idbcursor/index.md @@ -132,7 +132,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/close/index.md b/files/fr/web/api/idbdatabase/close/index.md index 4da6941350..a77ce80dd0 100644 --- a/files/fr/web/api/idbdatabase/close/index.md +++ b/files/fr/web/api/idbdatabase/close/index.md @@ -54,7 +54,7 @@ Aucune. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.md b/files/fr/web/api/idbdatabase/createobjectstore/index.md index a829b7c64a..39725c8b93 100644 --- a/files/fr/web/api/idbdatabase/createobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/createobjectstore/index.md @@ -97,7 +97,7 @@ var objectStore = db.createObjectStore(name, optionalParameters); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md index d3d72f60ca..5941d6e4fe 100644 --- a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md @@ -37,7 +37,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suiv | Exception | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | +| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | | `TransactionInactiveError` | Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur `InvalidStateError`, cela est désormais corrigé (cf. {{bug("1176165")}}). | | `NotFoundError` | Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse. | @@ -88,8 +88,8 @@ Dans cet exemple, on ouvre une connexion à la base de données et dans le gesti | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md index 99239a0809..45a82a7906 100644 --- a/files/fr/web/api/idbdatabase/index.md +++ b/files/fr/web/api/idbdatabase/index.md @@ -119,7 +119,7 @@ var objectStore = db.transaction('toDoList').objectStore('toDoList'); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md index eb40259dab..1ec782aecc 100644 --- a/files/fr/web/api/idbdatabase/name/index.md +++ b/files/fr/web/api/idbdatabase/name/index.md @@ -58,7 +58,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md index 5f96dfbd4d..055de5f183 100644 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.md +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBDatabase/objectStoreNames --- {{APIRef("IndexedDB")}} -La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. +La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. {{AvailableInWorkers}} @@ -55,7 +55,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md index a58db4d79d..10b1a6393d 100644 --- a/files/fr/web/api/idbdatabase/transaction/index.md +++ b/files/fr/web/api/idbdatabase/transaction/index.md @@ -176,7 +176,7 @@ var objectStore = transaction.objectStore("toDoList"); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/version/index.md b/files/fr/web/api/idbdatabase/version/index.md index 33c35d6c53..61200af313 100644 --- a/files/fr/web/api/idbdatabase/version/index.md +++ b/files/fr/web/api/idbdatabase/version/index.md @@ -49,7 +49,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/versionchange_event/index.md b/files/fr/web/api/idbdatabase/versionchange_event/index.md index 2476f4062d..072580f10d 100644 --- a/files/fr/web/api/idbdatabase/versionchange_event/index.md +++ b/files/fr/web/api/idbdatabase/versionchange_event/index.md @@ -65,7 +65,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbenvironment/index.md b/files/fr/web/api/idbenvironment/index.md index 9630e9b598..494e3949c8 100644 --- a/files/fr/web/api/idbenvironment/index.md +++ b/files/fr/web/api/idbenvironment/index.md @@ -39,7 +39,7 @@ function openDB() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md index 0ce4678d23..552a7a02bc 100644 --- a/files/fr/web/api/idbfactory/cmp/index.md +++ b/files/fr/web/api/idbfactory/cmp/index.md @@ -59,7 +59,7 @@ console.log( "Résultat de la comparaison : " + result ); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.md b/files/fr/web/api/idbfactory/deletedatabase/index.md index 45b1745eb8..8636c522f7 100644 --- a/files/fr/web/api/idbfactory/deletedatabase/index.md +++ b/files/fr/web/api/idbfactory/deletedatabase/index.md @@ -59,8 +59,8 @@ DBDeleteRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/index.md b/files/fr/web/api/idbfactory/index.md index fbcba34c21..5695a27aeb 100644 --- a/files/fr/web/api/idbfactory/index.md +++ b/files/fr/web/api/idbfactory/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/IDBFactory --- {{APIRef("IndexedDB")}} -L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. +L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md index 04d42ffe9c..b6e628b5e0 100644 --- a/files/fr/web/api/idbfactory/open/index.md +++ b/files/fr/web/api/idbfactory/open/index.md @@ -23,7 +23,7 @@ Cette méthode peut également émettre les évènements `upgradeneeded`, `block ## Syntaxe -La syntaxe standard est la suivante : +La syntaxe standard est la suivante : var IDBOpenDBRequest = indexedDB.open(nom); var IDBOpenDBRequest = indexedDB.open(nom, version); @@ -51,7 +51,7 @@ Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les diffé ### Exceptions -Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : +Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : | Exception | Description | | ----------- | -------------------------------------------------------------------------- | @@ -59,7 +59,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : ## Exemples -Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : +Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : ```js var request = window.indexedDB.open("toDoList", 4); @@ -101,8 +101,8 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs @@ -111,9 +111,9 @@ DBOpenRequest.onsuccess = function(event) { ## Voir aussi - [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB) -- Démarrer des transactions : {{domxref("IDBDatabase")}} -- Manipuler des transactions : {{domxref("IDBTransaction")}} -- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} -- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} -- Manipuler des curseurs : {{domxref("IDBCursor")}} -- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) +- Démarrer des transactions : {{domxref("IDBDatabase")}} +- Manipuler des transactions : {{domxref("IDBTransaction")}} +- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} +- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} +- Manipuler des curseurs : {{domxref("IDBCursor")}} +- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) diff --git a/files/fr/web/api/idbindex/count/index.md b/files/fr/web/api/idbindex/count/index.md index 67259dd4f7..d394b8ef10 100644 --- a/files/fr/web/api/idbindex/count/index.md +++ b/files/fr/web/api/idbindex/count/index.md @@ -104,8 +104,8 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md index 0fa82fd05a..5402f8cc03 100644 --- a/files/fr/web/api/idbindex/get/index.md +++ b/files/fr/web/api/idbindex/get/index.md @@ -28,11 +28,11 @@ var request = myIndex.get(key); ## Exceptions - `TransactionInactiveError` - - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. + - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. - `DataError` - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. ## Exemple @@ -89,7 +89,7 @@ function displayDataByIndex() { | Spécification | Ètat | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbindex/getall/index.md b/files/fr/web/api/idbindex/getall/index.md index caa5d1d798..0b71852bc8 100644 --- a/files/fr/web/api/idbindex/getall/index.md +++ b/files/fr/web/api/idbindex/getall/index.md @@ -38,7 +38,7 @@ On peut comparer cette méthode avec une recherche par curseur. Effectivement, i - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive. - `DataError` - - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. + - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. - `TypeError` diff --git a/files/fr/web/api/idbindex/getkey/index.md b/files/fr/web/api/idbindex/getkey/index.md index 0ca4b1cc15..cc08a06d61 100644 --- a/files/fr/web/api/idbindex/getkey/index.md +++ b/files/fr/web/api/idbindex/getkey/index.md @@ -112,7 +112,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md index 13379463fa..4fb79c0925 100644 --- a/files/fr/web/api/idbindex/keypath/index.md +++ b/files/fr/web/api/idbindex/keypath/index.md @@ -70,7 +70,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/multientry/index.md b/files/fr/web/api/idbindex/multientry/index.md index 30665f1d02..f4fb962511 100644 --- a/files/fr/web/api/idbindex/multientry/index.md +++ b/files/fr/web/api/idbindex/multientry/index.md @@ -69,7 +69,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md index 62d6b5ca7f..db43fd0aed 100644 --- a/files/fr/web/api/idbindex/name/index.md +++ b/files/fr/web/api/idbindex/name/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md index 3ca57791da..1e06ea97b3 100644 --- a/files/fr/web/api/idbindex/objectstore/index.md +++ b/files/fr/web/api/idbindex/objectstore/index.md @@ -72,7 +72,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md index 7216e38d94..efc19c4443 100644 --- a/files/fr/web/api/idbindex/opencursor/index.md +++ b/files/fr/web/api/idbindex/opencursor/index.md @@ -120,7 +120,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md index 9e5e8a9114..03343cf485 100644 --- a/files/fr/web/api/idbindex/openkeycursor/index.md +++ b/files/fr/web/api/idbindex/openkeycursor/index.md @@ -123,7 +123,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | ## Browser compatibility diff --git a/files/fr/web/api/idbindex/unique/index.md b/files/fr/web/api/idbindex/unique/index.md index 5914f7aab3..a9b0b8c2f6 100644 --- a/files/fr/web/api/idbindex/unique/index.md +++ b/files/fr/web/api/idbindex/unique/index.md @@ -68,7 +68,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/bound/index.md b/files/fr/web/api/idbkeyrange/bound/index.md index 36f8f75635..882a8d9f17 100644 --- a/files/fr/web/api/idbkeyrange/bound/index.md +++ b/files/fr/web/api/idbkeyrange/bound/index.md @@ -80,7 +80,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/includes/index.md b/files/fr/web/api/idbkeyrange/includes/index.md index dbef422d06..0dea371048 100644 --- a/files/fr/web/api/idbkeyrange/includes/index.md +++ b/files/fr/web/api/idbkeyrange/includes/index.md @@ -71,7 +71,7 @@ IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md index 0e1d98cfc8..05dc4b2a02 100644 --- a/files/fr/web/api/idbkeyrange/lower/index.md +++ b/files/fr/web/api/idbkeyrange/lower/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.md b/files/fr/web/api/idbkeyrange/lowerbound/index.md index 43945e77cf..afa0308e5b 100644 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.md +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/IDBKeyRange/lowerBound --- {{APIRef("IndexedDB")}} -La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. +La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche). @@ -72,7 +72,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md index cccd9f002a..f120a77299 100644 --- a/files/fr/web/api/idbkeyrange/loweropen/index.md +++ b/files/fr/web/api/idbkeyrange/loweropen/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/only/index.md b/files/fr/web/api/idbkeyrange/only/index.md index 574f4d7482..5e778c6498 100644 --- a/files/fr/web/api/idbkeyrange/only/index.md +++ b/files/fr/web/api/idbkeyrange/only/index.md @@ -66,7 +66,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md index 52fb657e00..59ef850bf0 100644 --- a/files/fr/web/api/idbkeyrange/upper/index.md +++ b/files/fr/web/api/idbkeyrange/upper/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.md b/files/fr/web/api/idbkeyrange/upperbound/index.md index fc8c458d23..61206cf48c 100644 --- a/files/fr/web/api/idbkeyrange/upperbound/index.md +++ b/files/fr/web/api/idbkeyrange/upperbound/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBKeyRange/upperBound --- {{APIRef("IndexedDB")}} -La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. +La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite). @@ -73,7 +73,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.md b/files/fr/web/api/idbkeyrange/upperopen/index.md index 48723184ae..99cac8651f 100644 --- a/files/fr/web/api/idbkeyrange/upperopen/index.md +++ b/files/fr/web/api/idbkeyrange/upperopen/index.md @@ -55,7 +55,7 @@ function displayData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md index 22877034f9..65a2264933 100644 --- a/files/fr/web/api/idbobjectstore/add/index.md +++ b/files/fr/web/api/idbobjectstore/add/index.md @@ -49,7 +49,7 @@ Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un d <tr> <td><code>TransactionInactiveError</code></td> <td> - La transaction pour cet objet {{domxref("IDBObjectStore")}} + La transaction pour cet objet {{domxref("IDBObjectStore")}} est inactive. </td> </tr> @@ -154,7 +154,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md index edaf50bab0..95960944cf 100644 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.md +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md @@ -47,14 +47,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -81,7 +81,7 @@ function addData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md index 0b373c0cd6..bba5c673f7 100644 --- a/files/fr/web/api/idbobjectstore/clear/index.md +++ b/files/fr/web/api/idbobjectstore/clear/index.md @@ -51,7 +51,7 @@ DBOpenRequest.onsuccess = function(event) { }; function clearData() { - // ouvre une transaction de lecture / écriture prête pour le nettoyage + // ouvre une transaction de lecture / écriture prête pour le nettoyage var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction @@ -83,7 +83,7 @@ function clearData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/count/index.md b/files/fr/web/api/idbobjectstore/count/index.md index bdbb5e7ebb..e9ca828cd6 100644 --- a/files/fr/web/api/idbobjectstore/count/index.md +++ b/files/fr/web/api/idbobjectstore/count/index.md @@ -56,7 +56,7 @@ countRequest.onsuccess = function() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/createindex/index.md b/files/fr/web/api/idbobjectstore/createindex/index.md index e5d27186b5..ba5077317c 100644 --- a/files/fr/web/api/idbobjectstore/createindex/index.md +++ b/files/fr/web/api/idbobjectstore/createindex/index.md @@ -89,7 +89,7 @@ L'{{domxref("IDBIndex","accès")}} au nouvel index. - : 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")}} `versionchange`. - `TransactionInactiveError` - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). - `ConstraintError` - : Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet. @@ -105,7 +105,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -121,7 +121,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -150,7 +150,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/delete/index.md b/files/fr/web/api/idbobjectstore/delete/index.md index f79aca9cd7..00ac3dcdb7 100644 --- a/files/fr/web/api/idbobjectstore/delete/index.md +++ b/files/fr/web/api/idbobjectstore/delete/index.md @@ -94,7 +94,7 @@ function deleteData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.md b/files/fr/web/api/idbobjectstore/deleteindex/index.md index 9f493d0d3a..747b2f4447 100644 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.md +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/IDBObjectStore/deleteIndex --- {{ APIRef("IndexedDB") }} -La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). +La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). -> **Note :** 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")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. +> **Note :** 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")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. {{AvailableInWorkers}} @@ -32,9 +32,9 @@ Void. - : 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")}}) [`versionchange`](/fr/docs/Web/API/IDBTransaction/mode#versionchange). - `TransactionInactiveError` - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). - `NotFoundError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. ## Exemple @@ -48,7 +48,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -64,7 +64,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -96,7 +96,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/get/index.md b/files/fr/web/api/idbobjectstore/get/index.md index 14fed16a99..c0c20b9c06 100644 --- a/files/fr/web/api/idbobjectstore/get/index.md +++ b/files/fr/web/api/idbobjectstore/get/index.md @@ -25,7 +25,7 @@ var request = objectStore.get(cle); ## Renvoie - Une {{domxref("IDBRequest","requête")}} - - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. + - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. ## Exceptions @@ -93,7 +93,7 @@ function deleteData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/getall/index.md b/files/fr/web/api/idbobjectstore/getall/index.md index 7749e9a1a7..c4afd0d18c 100644 --- a/files/fr/web/api/idbobjectstore/getall/index.md +++ b/files/fr/web/api/idbobjectstore/getall/index.md @@ -30,9 +30,9 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive. - `DataError` - - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. + - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. - `InvalidStateError` - - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. + - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. - `TypeError` - : Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif. @@ -40,7 +40,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs @@ -50,7 +50,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}} - {{domxref("IDBDatabase","Débuter une connexion")}} -- {{domxref("IDBTransaction","Utiliser les transactions")}} +- {{domxref("IDBTransaction","Utiliser les transactions")}} - {{domxref("IDBKeyRange","Définir l'intervalle des clés")}} - {{domxref("IDBObjectStore","Accès aux magasins d'objets")}} - {{domxref("IDBCursor","Utiliser les curseurs")}} diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.md b/files/fr/web/api/idbobjectstore/getallkeys/index.md index df2f4b69ce..6ffc62f82f 100644 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.md +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBObjectStore/getAllKeys --- {{APIRef("IndexedDB")}} -La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). +La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête. @@ -33,7 +33,7 @@ Pour différencier ces deux situations, on peut appeler la méthode {{domxref("I - `query` {{optional_inline}} - : Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}). - `count` {{optional_inline}} - - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. + - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. ### Valeur de retour diff --git a/files/fr/web/api/idbobjectstore/index.md b/files/fr/web/api/idbobjectstore/index.md index 4c761abec2..4af77216a9 100644 --- a/files/fr/web/api/idbobjectstore/index.md +++ b/files/fr/web/api/idbobjectstore/index.md @@ -133,7 +133,7 @@ objectStoreRequest.onsuccess = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/index/index.md b/files/fr/web/api/idbobjectstore/index/index.md index 2e677c3bae..beb85e8f07 100644 --- a/files/fr/web/api/idbobjectstore/index/index.md +++ b/files/fr/web/api/idbobjectstore/index/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.md b/files/fr/web/api/idbobjectstore/indexnames/index.md index f46c3122ca..2c4c6036ae 100644 --- a/files/fr/web/api/idbobjectstore/indexnames/index.md +++ b/files/fr/web/api/idbobjectstore/indexnames/index.md @@ -25,7 +25,7 @@ Une liste {{domxref("DOMStringList")}}. ## Exemples -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -84,7 +84,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/keypath/index.md b/files/fr/web/api/idbobjectstore/keypath/index.md index 703e7690d6..14fb85de5d 100644 --- a/files/fr/web/api/idbobjectstore/keypath/index.md +++ b/files/fr/web/api/idbobjectstore/keypath/index.md @@ -28,7 +28,7 @@ N'importe quel type de valeur. ## Exemple -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -86,7 +86,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/name/index.md b/files/fr/web/api/idbobjectstore/name/index.md index 982fb83d19..abbf7e9c25 100644 --- a/files/fr/web/api/idbobjectstore/name/index.md +++ b/files/fr/web/api/idbobjectstore/name/index.md @@ -90,7 +90,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.md b/files/fr/web/api/idbobjectstore/opencursor/index.md index 0b96ddad30..2b33c941b7 100644 --- a/files/fr/web/api/idbobjectstore/opencursor/index.md +++ b/files/fr/web/api/idbobjectstore/opencursor/index.md @@ -66,7 +66,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.md b/files/fr/web/api/idbobjectstore/openkeycursor/index.md index 230f9d0454..51d2090007 100644 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.md +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.md @@ -64,7 +64,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/put/index.md b/files/fr/web/api/idbobjectstore/put/index.md index 08ad1bc6a4..c013132dd1 100644 --- a/files/fr/web/api/idbobjectstore/put/index.md +++ b/files/fr/web/api/idbobjectstore/put/index.md @@ -75,12 +75,12 @@ Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} : </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le paramètre pour la + >), ne dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé. </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le chemin de clé du + >), ne dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide. </li> <li> @@ -148,7 +148,7 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/transaction/index.md b/files/fr/web/api/idbobjectstore/transaction/index.md index 75af9a1542..2c2dc66fb7 100644 --- a/files/fr/web/api/idbobjectstore/transaction/index.md +++ b/files/fr/web/api/idbobjectstore/transaction/index.md @@ -42,14 +42,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -76,7 +76,7 @@ function addData() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbopendbrequest/index.md b/files/fr/web/api/idbopendbrequest/index.md index 303e640f91..3a87aa54b5 100644 --- a/files/fr/web/api/idbopendbrequest/index.md +++ b/files/fr/web/api/idbopendbrequest/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/IDBOpenDBRequest --- {{APIRef("IndexedDB")}} -L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). +L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). {{AvailableInWorkers}} @@ -21,7 +21,7 @@ L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux rés ## Propriétés -_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. +_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. ### Évènements @@ -32,11 +32,11 @@ _Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref( ## Méthodes -_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ +_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ ## Exemple -Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` 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 [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) +Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` 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 [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) ```js var db; @@ -77,12 +77,12 @@ DBOpenRequest.onupgradeneeded = function(event) { // définit quels éléments de données l'objet de stockage contiendra. - objectStore.createIndex("hours", "hours", { unique: false }); - objectStore.createIndex("minutes", "minutes", { unique: false }); - objectStore.createIndex("day", "day", { unique: false }); - objectStore.createIndex("month", "month", { unique: false }); - objectStore.createIndex("year", "year", { unique: false }); - objectStore.createIndex("notified", "notified", { unique: false }); + objectStore.createIndex("hours", "hours", { unique: false }); + objectStore.createIndex("minutes", "minutes", { unique: false }); + objectStore.createIndex("day", "day", { unique: false }); + objectStore.createIndex("month", "month", { unique: false }); + objectStore.createIndex("year", "year", { unique: false }); + objectStore.createIndex("notified", "notified", { unique: false }); }; ``` @@ -91,7 +91,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | | {{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}} | {{Spec2('IndexedDB')}} | Définition initiale | -| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/error/index.md b/files/fr/web/api/idbrequest/error/index.md index 5377fc62db..9e57814d5d 100644 --- a/files/fr/web/api/idbrequest/error/index.md +++ b/files/fr/web/api/idbrequest/error/index.md @@ -80,7 +80,7 @@ objectStoreTitleRequest.onerror = function() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/index.md b/files/fr/web/api/idbrequest/index.md index ef33447c2f..e0a2ce05ad 100644 --- a/files/fr/web/api/idbrequest/index.md +++ b/files/fr/web/api/idbrequest/index.md @@ -18,7 +18,7 @@ L'interface **`IDBRequest`** de l'API IndexedDB donne accès par ses gestionnair Cet objet **`IDBRequest`** ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet **`IDBRequest`** utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition. -Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. +Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété `result` et un évènement `success` est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété `error` et un évènement `error` est lancé ({{domxref("IDBRequest.onerror")}}). @@ -41,7 +41,7 @@ _Hérite des propriétés de {{domxref("EventTarget")}}._ - {{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}} - : La propriété **`transaction`** de l'interface **`IDBRequest`** renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer `null` 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. - {{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}} - - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. + - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. ## Méthodes diff --git a/files/fr/web/api/idbrequest/onerror/index.md b/files/fr/web/api/idbrequest/onerror/index.md index edad1a851e..391df12467 100644 --- a/files/fr/web/api/idbrequest/onerror/index.md +++ b/files/fr/web/api/idbrequest/onerror/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/onsuccess/index.md b/files/fr/web/api/idbrequest/onsuccess/index.md index 201d7b58cf..5e872bcd42 100644 --- a/files/fr/web/api/idbrequest/onsuccess/index.md +++ b/files/fr/web/api/idbrequest/onsuccess/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/readystate/index.md b/files/fr/web/api/idbrequest/readystate/index.md index 710868b47b..0b33b98759 100644 --- a/files/fr/web/api/idbrequest/readystate/index.md +++ b/files/fr/web/api/idbrequest/readystate/index.md @@ -66,8 +66,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/source/index.md b/files/fr/web/api/idbrequest/source/index.md index 68ea7bf33d..d6a79a450a 100644 --- a/files/fr/web/api/idbrequest/source/index.md +++ b/files/fr/web/api/idbrequest/source/index.md @@ -23,7 +23,7 @@ La propriété **`source`** est une propriété en lecture seule, rattachée à ### Valeur -Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. +Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. ## Exemples @@ -67,8 +67,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/transaction/index.md b/files/fr/web/api/idbrequest/transaction/index.md index 1bbf05d769..98e0953986 100644 --- a/files/fr/web/api/idbrequest/transaction/index.md +++ b/files/fr/web/api/idbrequest/transaction/index.md @@ -58,7 +58,7 @@ objectStoreTitleRequest.onerror = function() { }; ``` -Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: +Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ```js var openRequest = indexedDB.open('db', 2); @@ -87,7 +87,7 @@ openRequest.onsuccess = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/abort/index.md b/files/fr/web/api/idbtransaction/abort/index.md index 53a6dbd6aa..ca40486ad8 100644 --- a/files/fr/web/api/idbtransaction/abort/index.md +++ b/files/fr/web/api/idbtransaction/abort/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/db/index.md b/files/fr/web/api/idbtransaction/db/index.md index 3032ed9c36..1be2d0e15f 100644 --- a/files/fr/web/api/idbtransaction/db/index.md +++ b/files/fr/web/api/idbtransaction/db/index.md @@ -25,7 +25,7 @@ Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la f ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. À la fin, la méthode **`db`** sert à renvoyer la connexion à la base de données associée à la transaction. @@ -55,7 +55,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>'; }; @@ -82,7 +82,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error/index.md b/files/fr/web/api/idbtransaction/error/index.md index 9684817483..6d197cba4e 100644 --- a/files/fr/web/api/idbtransaction/error/index.md +++ b/files/fr/web/api/idbtransaction/error/index.md @@ -30,7 +30,7 @@ Cette propriété vaut `null` si la transaction n'est pas terminée ou qu'elle e ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. La propriété **`error`** sert dans le bloc `transaction.onerror = function(event) {...}` afin d'afficher le type d'erreur qui est survenue. @@ -61,7 +61,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>'; }; @@ -85,7 +85,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error_event/index.md b/files/fr/web/api/idbtransaction/error_event/index.md index b8d6a070bf..dad1332ca4 100644 --- a/files/fr/web/api/idbtransaction/error_event/index.md +++ b/files/fr/web/api/idbtransaction/error_event/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/IDBDatabase/onerror --- {{APIRef("IndexedDB")}} -Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. +Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. {{AvailableInWorkers}} @@ -59,7 +59,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/index.md b/files/fr/web/api/idbtransaction/index.md index 7fc9a104d3..74d2580677 100644 --- a/files/fr/web/api/idbtransaction/index.md +++ b/files/fr/web/api/idbtransaction/index.md @@ -53,7 +53,7 @@ Cette interface hérite de {{domxref("EventTarget")}}. - {{domxref("IDBTransaction.onabort")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `abort` qui est déclenché lorsque la transaction a été interrompue. - {{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}} - - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. + - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. - {{domxref("IDBTransaction.onerror")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `error` qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement. diff --git a/files/fr/web/api/idbtransaction/mode/index.md b/files/fr/web/api/idbtransaction/mode/index.md index 82da774e36..9737c77599 100644 --- a/files/fr/web/api/idbtransaction/mode/index.md +++ b/files/fr/web/api/idbtransaction/mode/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstore/index.md b/files/fr/web/api/idbtransaction/objectstore/index.md index 2ccc74eb6c..0924e5d113 100644 --- a/files/fr/web/api/idbtransaction/objectstore/index.md +++ b/files/fr/web/api/idbtransaction/objectstore/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/IDBTransaction/objectStore La méthode **`objectStore()`**, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}. -Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. +Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. {{AvailableInWorkers}} @@ -40,7 +40,7 @@ Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets ## Exemple -Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. +Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. La méthode **`objectStore()`** permet d'accéder au magasin d'objets `"toDoList"`. @@ -98,7 +98,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.md b/files/fr/web/api/idbtransaction/objectstorenames/index.md index 6525fd7eb3..e5f1980404 100644 --- a/files/fr/web/api/idbtransaction/objectstorenames/index.md +++ b/files/fr/web/api/idbtransaction/objectstorenames/index.md @@ -24,7 +24,7 @@ Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/imagedata/data/index.md b/files/fr/web/api/imagedata/data/index.md index 58ac32657f..3cc3046f0a 100644 --- a/files/fr/web/api/imagedata/data/index.md +++ b/files/fr/web/api/imagedata/data/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/ImageData/data --- {{APIRef("Canvas API")}} -La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. +La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. ## Syntax @@ -22,7 +22,7 @@ imagedata.data; // Uint8ClampedArray[40000] | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/imagedata/index.md b/files/fr/web/api/imagedata/index.md index d87083c7a8..c671ae3f28 100644 --- a/files/fr/web/api/imagedata/index.md +++ b/files/fr/web/api/imagedata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ImageData --- {{APIRef("Canvas API")}} -L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. +L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. ## Constructeurs @@ -31,7 +31,7 @@ L'interface **`ImageData`** représente les données des pixels au sein d'une ce | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/index.md b/files/fr/web/api/index.md index dd3ccbf680..6a9c14cfa8 100644 --- a/files/fr/web/api/index.md +++ b/files/fr/web/api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API --- 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. -Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. +Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. ## Spécifications diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md index 025ba060ba..10f55e0222 100644 --- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md @@ -23,14 +23,14 @@ Même dans le même navigateur, en utilisant la même méthode de stockage, il e Généralement, les deux principaux types de stockage sont les suivants : -- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). -- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. +- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). +- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome). ### Spécificités de Firefox -Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : +Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : - ```js var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" }); @@ -45,14 +45,14 @@ Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue ve ### "Default storage" dans Firefox _(stockage par défaut)_ -C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. +C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. ## Où sont stockées les données ? Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) : - `<profile>/storage` — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " _(manager de quotas)_ (voir ci-dessous). -- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. +- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. - `<profile>/storage/temporary` — répertoire de stockage des données temporaires. - `<profile>/storage/default` — répertoire de stockage des données par défaut. @@ -66,11 +66,11 @@ Chaque type de stockage représente un référentiel distinct, voici la cartogra ## Limites de stockage -L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. +L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée **"origin eviction"** _(éviction d'origine)_ entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence. -Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. +Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. Par exemple : @@ -86,7 +86,7 @@ Les deux limites reagissent différemment quand la limite est atteinte : - La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine. - La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre. -> **Note :** 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 `QuotaExceededError`. +> **Note :** 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 `QuotaExceededError`. ## Politique LRU diff --git a/files/fr/web/api/indexeddb_api/index.md b/files/fr/web/api/indexeddb_api/index.md index 3a800fd428..3500a8e86a 100644 --- a/files/fr/web/api/indexeddb_api/index.md +++ b/files/fr/web/api/indexeddb_api/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/API_IndexedDB --- {{DefaultAPISidebar("IndexedDB")}} -IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. +IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. {{AvailableInWorkers}} @@ -23,8 +23,8 @@ IndexedDB est une API de bas niveau qui permet le stockage côté client de quan 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 **clef**; tout objet supporté par [l'algorithme de clônage structuré](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure) 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 **transactions**. - Plus d'informations sur les [concepts derrière IndexedDB](/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB). -- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). -- 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 [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). +- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). +- 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 [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). > **Note :** Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). 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. @@ -38,7 +38,7 @@ Il y a un certain nombre de technologies web pour stocker différents types de d ## Interfaces -Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. +Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. ### Se connecter à la base de données @@ -75,30 +75,30 @@ Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/A Cette spécification provoque des évènements avec les interfaces personnalisées suivantes: - {{domxref("IDBVersionChangeEvent")}} - - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. + - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. ### Interfaces obsolètes Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit : - {{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}} - - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. -- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} + - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. +- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} - : Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données. - {{domxref("IDBTransactionSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBTransaction")}}. - {{domxref("IDBObjectStoreSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBObjectStore")}}. - {{domxref("IDBIndexSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBIndex")}}. + - : Version synchrone de {{domxref("IDBIndex")}}. - {{domxref("IDBFactorySync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBFactory")}}. - {{domxref("IDBEnvironmentSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBEnvironment")}}. + - : Version synchrone de {{domxref("IDBEnvironment")}}. - {{domxref("IDBDatabaseSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBDatabase")}}. + - : Version synchrone de {{domxref("IDBDatabase")}}. - {{domxref("IDBCursorSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBCursor")}}. + - : Version synchrone de {{domxref("IDBCursor")}}. ## Exemples diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md index c7f9494867..a99042f762 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md @@ -68,9 +68,9 @@ var request = window.indexedDB.open("MyTestDatabase", 3); Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander". -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 `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) 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 [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). +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 `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) 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 [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). -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 `open()`, puis, un événement `onupgradeneeded` 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 `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. +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 `open()`, puis, un événement `onupgradeneeded` 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 `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. > **Attention :** Le numéro de version est un nombre "`unsigned long long`" 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 `upgradeneeded`. Par exemple, n'utilisez pas 2.4 comme un numéro de version : > `var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2` @@ -109,7 +109,7 @@ request.onsuccess = function(event) { #### Gérer les erreurs -Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : +Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : ```js db.onerror = function(event) { @@ -134,7 +134,7 @@ request.onupgradeneeded = function(event) { }; ``` -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 `keyPath`), 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. +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 `keyPath`), 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. Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. @@ -144,7 +144,7 @@ Blink/Webkit supporte la version courante de la spécification, telle que livré ### Structurer la base de données -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 [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. +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 [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. Le tableau suivant montre les différentes manières d'attribuer des clés. @@ -152,7 +152,7 @@ Le tableau suivant montre les différentes manières d'attribuer des clés. | ------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Non | Non | L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur. | | Oui | Non | L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path. | -| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | +| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | | Oui | Oui | L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé. | Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet. @@ -252,11 +252,11 @@ Pour plus de détails sur le générateur de clés, voyez ["W3C Key Generators"] Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: `readonly` _(lecture seule)_, `readwrite` _(lecture/écriture)_, et `versionchange` _(changement de version)_. -Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) +Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode `readonly`ou `readwrite`. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode `readwrite`. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les `storeNames` (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le `mode` (`readonly` ou `readwrite`) 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 `readonly`. -> **Note :** À 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 `readwrite` {{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 `complete` 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 `complete` 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 `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. +> **Note :** À 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 `readwrite` {{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 `complete` 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 `complete` 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 `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. 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 : @@ -343,7 +343,7 @@ db.transaction("customers").objectStore("customers").get("444-44-4444").onsucces 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 `"readwrite"`. Appeler une `transaction()` sans spécifier de mode nous donne une transaction `"readonly"`. 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é `result`. -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 : +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 : - Lors de la définition de la [scope](/fr/docs/IndexedDB/Using_IndexedDB$edit#scope) _(portée)_, 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. - 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" _(lecture/écriture)_ sur un objet de stockage. Pour en savoir plus, voir la définition relative aux [transactions in the Basic Concepts article](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction). @@ -399,7 +399,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -La fonction `openCursor()` 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" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` 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 `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. +La fonction `openCursor()` 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" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` 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 `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. 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 : @@ -418,7 +418,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` 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 : +> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` 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 : > > ```js > objectStore.getAll().onsuccess = function(event) { @@ -444,7 +444,7 @@ index.get("Donna").onsuccess = function(event) { }; ``` -Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . +Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . Si vous avez besoin d'accèder à toutes les entrées avec un `name` 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 : @@ -541,7 +541,7 @@ Voyez "[IDBCursor Constants](/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US& ## La version change alors qu'une application Web est ouverte dans un autre onglet -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 `open()` 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 `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : +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 `open()` 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 `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : ```js var openReq = mozIndexedDB.open("MyTestDatabase", 2); @@ -592,7 +592,7 @@ Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit 1. 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 `AbortError`. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction. 2. Une fois toutes les transactions terminées, la connexion à la base de données est fermée . -3. 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 . +3. 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 . 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). @@ -600,7 +600,7 @@ Avant ces versions de navigateurs, les transactions étaient interrompues silenc É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. -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. +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. Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload _(déchargement_). 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. @@ -610,7 +610,7 @@ Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase ## Le tri et les langues -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 : +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 : - a - b @@ -1312,7 +1312,7 @@ input { Référence : -- [IndexedDB API Reference](/en/IndexedDB) +- [IndexedDB API Reference](/en/IndexedDB) - [Indexed Database API Specification](http://www.w3.org/TR/IndexedDB/) - [Using IndexedDB in chrome](/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome) - [Using JavaScript generators in Firefox](/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox) @@ -1321,7 +1321,7 @@ Référence : Tutoriels : - [Databinding UI Elements with IndexedDB](http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/) -- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) +- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) Bibliothèques : diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 40fdb41249..79eb4d4872 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -46,7 +46,7 @@ Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élém #### Options de l'observateur d'intersection -L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : +L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : - `root` - : L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur `null`, sa valeur par défaut est la zone d'affichage (le _viewport_) du navigateur. @@ -71,14 +71,14 @@ var callback = function(entries, observer) { entries.forEach(entry => { // chaque élément de entries correspond à une variation // d'intersection pour un des éléments cible: - // entry.boundingClientRect - // entry.intersectionRatio - // entry.intersectionRect - // entry.isIntersecting - // entry.rootBounds - // entry.target - // entry.time - }); + // entry.boundingClientRect + // entry.intersectionRatio + // entry.intersectionRect + // entry.isIntersecting + // entry.rootBounds + // entry.target + // entry.time + }); }; ``` @@ -102,7 +102,7 @@ Le rectangle utilisé pour délimiter la racine de l'intersection peut être aju Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des **paliers**. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers. -Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. +Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers : diff --git a/files/fr/web/api/intersectionobserverentry/index.md b/files/fr/web/api/intersectionobserverentry/index.md index cb495920d8..3d0bacde86 100644 --- a/files/fr/web/api/intersectionobserverentry/index.md +++ b/files/fr/web/api/intersectionobserverentry/index.md @@ -24,7 +24,7 @@ Les instances de `IntersectionObserverEntry` sont délivrées à une fonction de - {{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible. - {{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}} - - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. + - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. - {{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine. - {{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}} diff --git a/files/fr/web/api/issecurecontext/index.md b/files/fr/web/api/issecurecontext/index.md index 91c1fa1ae2..64b9378248 100644 --- a/files/fr/web/api/issecurecontext/index.md +++ b/files/fr/web/api/issecurecontext/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). +La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). ## Syntaxe @@ -14,7 +14,7 @@ La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerG ### Valeur -Un {{domxref("Boolean")}}. +Un {{domxref("Boolean")}}. ## Spécifications diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index 471e63789c..259ad26cc6 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -11,7 +11,7 @@ Si le clavier n'est pas physique, la valeur retournée sera définie par le navi Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par `KeyboardEvent.code` afin de déterminer le caractère utilisé sur le clavier. -Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. +Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. Pour déterminer quel caractère correspond à un `key event`, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}. @@ -64,14 +64,14 @@ Pour essayer ce code, cliquez sur le lien ci-dessous: ### Gérer les événements de clavier dans un jeu -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. +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. #### HTML ```html <p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> - <polygon id="spaceship" points="15,0 0,30 30,30"/> + <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> ``` diff --git a/files/fr/web/api/keyboardevent/index.md b/files/fr/web/api/keyboardevent/index.md index 8cf14e1b5f..a05844a077 100644 --- a/files/fr/web/api/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/KeyboardEvent --- {{APIRef("DOM Events")}} -Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. +Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. -> **Note :** `KeyboardEvent` 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 `input` 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. +> **Note :** `KeyboardEvent` 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 `input` 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. ## Constructeur - {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} - - : Crée un objet `KeyboardEvent`. + - : Crée un objet `KeyboardEvent`. ## Méthodes @@ -27,7 +27,7 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE - {{domxref("KeyboardEvent.getModifierState()")}} - - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que + - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd> @@ -43,12 +43,12 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE <kbd>Meta</kbd> - , était pressée quand l'évènement a été créé. + , était pressée quand l'évènement a été créé. - {{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. - {{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Propriétés @@ -56,7 +56,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}} - - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Alt</kbd> @@ -68,27 +68,27 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" <kbd>⌥</kbd> - sous OS X) était active quand l'évènement touche a été généré. + sous OS X) était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}} - : 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. - > **Note :** 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. + > **Note :** 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. - > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. + > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. - {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}} - - : 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 `keypress`. Pour les touches dont l'attribut `char` 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. + - : 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 `keypress`. Pour les touches dont l'attribut `char` 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. - > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. + > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. - {{domxref("KeyboardEvent.code")}} {{Readonlyinline}} - - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. + - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche <kbd>Ctrl</kbd> @@ -98,7 +98,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Renvoie un {{jsxref ("Boolean")}} qui est `true` si l'événement est déclenché après `compositionstart` et avant `compositionend`. - {{domxref("KeyboardEvent.key")}} {{Readonlyinline}} - : Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement. -- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} +- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} - : 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. @@ -118,15 +118,15 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée. - {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Meta</kbd> - (sur les claviers Mac, la touche + (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> - ; sur les claviers Windows, la touche Windows ( + ; sur les claviers Windows, la touche Windows ( <kbd>⊞</kbd> @@ -136,33 +136,33 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref("Booléen")}} qui est `true` si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement. - {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Shift</kbd> - était active quand l'évènement touche a été généré. + était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}} - - : 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 `keyCode`. + - : 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 `keyCode`. > **Attention :** cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. ## Notes -Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : +Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : -1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; +1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; 2. si la touche n'est pas une touche de modification, l'événement `keypress` est envoyé ; 3. lorsque l'utilisateur relâche la touche, l'événement `keyup` est envoyé. -### Cas particuliers +### Cas particuliers -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 `keydown` et `keyup`. +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 `keydown` et `keyup`. > **Note :** Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement `keypress` pour ces touches. -Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. 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 `keypress` ; ce comportement incohérent était le {{bug(602812)}}. +Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. 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 `keypress` ; ce comportement incohérent était le {{bug(602812)}}. ### Gestion de l'auto-répétition @@ -192,7 +192,7 @@ Dans certains environnements basés sur GTK, l'auto-répétition génère automa 7. << répétition jusqu'à ce que l'utilisateur relâche la touche >> 8. `keyup` -Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. +Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. #### Gestion de l'auto-répétition avant Gecko 5.0 @@ -224,23 +224,23 @@ document.addEventListener('keydown', (event) => { return; } - if (event.ctrlKey) { - // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), - // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. - alert(`Combinaison de ctrlKey + ${nomTouche}`); - } else { - alert(`Touche pressée ${nomTouche}`); - } + if (event.ctrlKey) { + // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), + // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. + alert(`Combinaison de ctrlKey + ${nomTouche}`); + } else { + alert(`Touche pressée ${nomTouche}`); + } }, false); document.addEventListener('keyup', (event) => { - const nomTouche = event.key; + const nomTouche = event.key; - // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. - // Aussi event.ctrlKey est false. - if (nomTouche === 'Control') { - alert('La touche Control a été relâchée'); - } + // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. + // Aussi event.ctrlKey est false. + if (nomTouche === 'Control') { + alert('La touche Control a été relâchée'); + } }, false); </script> @@ -255,9 +255,9 @@ document.addEventListener('keyup', (event) => { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | -La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. +La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.md b/files/fr/web/api/keyboardevent/key/key_values/index.md index 2fb66f3c41..3d831fb852 100644 --- a/files/fr/web/api/keyboardevent/key/key_values/index.md +++ b/files/fr/web/api/keyboardevent/key/key_values/index.md @@ -385,7 +385,7 @@ Modifiers are special keys which are used to generate special characters or caus </tbody> </table> -\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. +\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. ## Navigation keys @@ -616,7 +616,7 @@ Modifiers are special keys which are used to generate special characters or caus <tr> <td><code>"Insert"</code></td> <td> - The Insert key, <kbd>Ins</kbd>. Toggles between inserting and + The Insert key, <kbd>Ins</kbd>. Toggles between inserting and overwriting text. </td> <td><code>VK_INSERT</code> (0x2D)</td> @@ -1191,7 +1191,7 @@ Some keys are common across multiple languages, while others exist only on keybo identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated - {{event("compositionupdate")}} event's + {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. </td> <td></td> @@ -1301,7 +1301,7 @@ Some keys are common across multiple languages, while others exist only on keybo <code>GDK_KEY_Muhenkan</code> (0xFF22)<br /><code >Qt::Key_Muhenkan</code > - (0x01001122)<br /> + (0x01001122)<br /> </td> <td><code>KEYCODE_MUHENKAN</code> (213)</td> </tr> @@ -1598,11 +1598,11 @@ These keys are only available on Japanese keyboards. ### Dead keycodes for Linux -Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. +Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK -The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: +The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: <table class="standard-table"> <tbody> @@ -1655,7 +1655,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td> - <td> ͂</td> + <td> ͂</td> <td></td> </tr> <tr> @@ -1755,7 +1755,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x0100125D) </td> - <td> ͅ</td> + <td> ͅ</td> <td>Iota subscript.</td> </tr> <tr> @@ -1795,7 +1795,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001261) </td> - <td> ̡</td> + <td> ̡</td> <td></td> </tr> <tr> @@ -1805,22 +1805,22 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001262) </td> - <td> ̛</td> + <td> ̛</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td> - <td> ̶̶</td> + <td> ̶̶</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td> - <td> ̓̓</td> + <td> ̓̓</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td> - <td> ᾿</td> + <td> ᾿</td> <td></td> </tr> <tr> @@ -1835,7 +1835,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td> - <td> ̏</td> + <td> ̏</td> <td></td> </tr> <tr> @@ -1845,7 +1845,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td> - <td> ̱</td> + <td> ̱</td> <td></td> </tr> <tr> @@ -1865,7 +1865,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td> - <td> ̤</td> + <td> ̤</td> <td></td> </tr> <tr> @@ -2524,7 +2524,7 @@ The multimedia keys are extra buttons or keys for controlling media devices, fou </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. \[2] Prior to Firefox 37, Firefox generated the key code `"FastFwd"` on some platforms and `"Unidentified"` on others instead of `"MediaFastForward"`. @@ -2736,7 +2736,7 @@ These media keys are used specifically for controlling audio. </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). +\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). ## TV control keys @@ -4333,7 +4333,7 @@ Some keyboards offer special keys for launching or switching to certain common a </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. \[2] Google Chrome 57 and earlier returned `"LaunchMyComputer"` instead of `"LaunchApplication1"`. See [Chrome Bug 612743](https://bugs.chromium.org/p/chromium/issues/detail?id=612743) for more information. @@ -4516,7 +4516,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_DECIMAL</code> (0x6E)</td> <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td> - <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> + <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td> </tr> <tr> @@ -4594,7 +4594,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_SEPARATOR</code> (0x6C)</td> <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td> - <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> + <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td> </tr> <tr> diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.md b/files/fr/web/api/keyboardevent/keyboardevent/index.md index a083a3e792..d964f56a5a 100644 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/KeyboardEvent/KeyboardEvent --- {{APIRef("DOM Events")}} -Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. +Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. ## Syntaxe @@ -20,7 +20,7 @@ Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEven ### Valeurs - typeArg - - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. + - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. - KeyboardEventInit{{optional_inline}} - : Un dictionnaire `KeyboardEventInit` ayant les champs suivants : diff --git a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md index d07b0c664f..219cbfcfb5 100644 --- a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md +++ b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md @@ -15,7 +15,7 @@ original_slug: Web/API/EffectTiming/delay La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. -> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. ## Syntaxe diff --git a/files/fr/web/api/location/reload/index.md b/files/fr/web/api/location/reload/index.md index 2b38ab6b28..beaa0f724d 100644 --- a/files/fr/web/api/location/reload/index.md +++ b/files/fr/web/api/location/reload/index.md @@ -37,4 +37,4 @@ En résumé, ce paramètre booléen ne fait pas partie de la spécification actu ## Voir aussi - L'interface [`Location`](/fr/docs/Web/API/Location) à laquelle appartient cette méthode. -- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). +- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). diff --git a/files/fr/web/api/mediadevices/getusermedia/index.md b/files/fr/web/api/mediadevices/getusermedia/index.md index d6c56e04c4..730c88fd1c 100644 --- a/files/fr/web/api/mediadevices/getusermedia/index.md +++ b/files/fr/web/api/mediadevices/getusermedia/index.md @@ -156,7 +156,7 @@ Cet exemple donne une préférence pour la résolution de la caméra et attribue ### Utilisation de la nouvelle API dans les navigateurs plus anciens -Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , 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 [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. +Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , 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 [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. ```js // Older browsers might not implement mediaDevices at all, so we set an empty object first diff --git a/files/fr/web/api/mediastream/index.md b/files/fr/web/api/mediastream/index.md index 6ace6ed154..e20c39d3ee 100644 --- a/files/fr/web/api/mediastream/index.md +++ b/files/fr/web/api/mediastream/index.md @@ -5,39 +5,39 @@ translation_of: Web/API/MediaStream --- {{APIRef("Media Capture and Streams")}} {{SeeCompatTable}} -L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. +L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. ## Attributs - {{domxref("MediaStream.id")}} {{readonlyInline}} - : {{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet. - {{domxref("MediaStream.ended")}} {{readonlyInline}} - - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. + - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. ### Gestionnaire d'évènements - {{domxref("MediaStream.onaddtrack")}} - - : 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é. + - : 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é. - {{domxref("MediaStream.onended")}} - - : 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. + - : 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. - {{domxref("MediaStream.onremovetrack")}} - - : 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é. + - : 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é. ## Méthodes - {{domxref("MediaStream.getTrackById()")}} - - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. + - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. <!----> - {{domxref("MediaStream.addTrack()")}} - - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.removeTrack()")}} - - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.getAudioTracks()")}} - - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. 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. + - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. 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. - {{domxref("MediaStream.getVideoTracks()")}} - - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. 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. + - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. 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. ## Spécifications diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md index 16243531c3..7b73db0260 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.md +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/MediaStreamAudioSourceNode --- {{APIRef("Web Audio API")}} -L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. +L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. Un `MediaElementSourceNode` 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. diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index aa691d61f8..cc58b71477 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} -L'interface **`MouseEvent`** 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")}}. +L'interface **`MouseEvent`** 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")}}. `MouseEvent` dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet `MouseEvent` doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}. @@ -22,18 +22,18 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.altKey")}} {{readonlyinline}} - - : renvoie `true` (_vrai_) si la touche + - : renvoie `true` (_vrai_) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé. - {{domxref("MouseEvent.button")}} {{readonlyinline}} - - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. + - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. - {{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}} - : Les boutons qui sont pressés alors que l'événement est lancé. - {{domxref("MouseEvent.clientX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). + - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.clientY")}} {{readonlyinline}} - : La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} @@ -53,9 +53,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv est pressée alors que l'événement est lancé. - {{domxref("MouseEvent.movementX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.movementY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}} - : La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible. - {{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}} @@ -69,9 +69,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} - : La seconde cible pour l'événement, s'il y en a une. - {{domxref("MouseEvent.screenX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.screenY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} - : renvoie `true` si la touche @@ -83,9 +83,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.which")}} {{readonlyinline}} - : Le bouton qui est pressé alors que l'événement est lancé. - MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}} - - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). + - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). - MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}} - - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). + - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). - {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} - : La quantité de pression appliquée en cliquant. - {{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}} @@ -105,7 +105,7 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv _Cette interface hérite aussi des méthodes de ses parents_ _{{domxref("UIEvent")}} et {{domxref("Event")}}._ - {{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}} - - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. + - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. - {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}} - : initialise la valeur de l'`MouseEvent` créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien. @@ -147,7 +147,7 @@ Cliquez sur le bouton pour voir comment l'exemple fonctionne : | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Redéfinit `MouseEvent` de long à double. C'est-à-dire qu'un `PointerEvent` dont le `pointerType` est "souris" est un double. | -| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | +| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | | {{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} | {{Spec2('Pointer Lock')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `movementX` et `movementY`. | | {{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `offsetX` et `offsetY`, `pageX` et `pageY`, `x` et `y`. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme `double` et non plus `long`. | | {{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}} | {{Spec2('DOM3 Events')}} | À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur `MouseEvent()`, de la méthode `getModifierState()` et de la propriété `buttons`. | diff --git a/files/fr/web/api/mouseevent/offsetx/index.md b/files/fr/web/api/mouseevent/offsetx/index.md index b0ac0a9cc4..ebcd573d1b 100644 --- a/files/fr/web/api/mouseevent/offsetx/index.md +++ b/files/fr/web/api/mouseevent/offsetx/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetX --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEv ### Valeur renvoyée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mouseevent/offsety/index.md b/files/fr/web/api/mouseevent/offsety/index.md index 4609de06ba..9120180d44 100644 --- a/files/fr/web/api/mouseevent/offsety/index.md +++ b/files/fr/web/api/mouseevent/offsety/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetY --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEve ### Valeur retournée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mutationobserver/index.md b/files/fr/web/api/mutationobserver/index.md index ca940834c9..d19fcee06d 100644 --- a/files/fr/web/api/mutationobserver/index.md +++ b/files/fr/web/api/mutationobserver/index.md @@ -18,7 +18,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM #### Paramètres - `callback` - - : 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 `MutationObserver`. + - : 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 `MutationObserver`. ## Méthodes d’instance @@ -47,7 +47,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM </tbody> </table> -> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). +> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). ### `observe()` @@ -83,7 +83,7 @@ Vide la file des mutations enregistrées du `MutationObserver` et retourne son c ## `MutationObserverInit` -`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : +`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : > **Note :** Au moins une propriété parmi `childList`, `attributes` ou `characterData` doit être initialisée à `true`, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise. @@ -189,7 +189,7 @@ observer.disconnect(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/navigator/connection/index.md b/files/fr/web/api/navigator/connection/index.md index e2e9f34956..441a349c50 100644 --- a/files/fr/web/api/navigator/connection/index.md +++ b/files/fr/web/api/navigator/connection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Navigator/connection --- {{APIRef("Network Information API")}}{{SeeCompatTable}} -**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. +**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. ## Syntaxe diff --git a/files/fr/web/api/navigator/credentials/index.md b/files/fr/web/api/navigator/credentials/index.md index fb3d7063cc..c667a04572 100644 --- a/files/fr/web/api/navigator/credentials/index.md +++ b/files/fr/web/api/navigator/credentials/index.md @@ -25,12 +25,12 @@ L'interface {{domxref("CredentialsContainer")}}. ```js if ('credentials' in navigator) { - navigator.credentials.get({password: true}) - .then(function(creds) { - // Gérer les informations d'authentification - }); + navigator.credentials.get({password: true}) + .then(function(creds) { + // Gérer les informations d'authentification + }); } else { - // Gérer la connexion comme avant + // Gérer la connexion comme avant }; ``` diff --git a/files/fr/web/api/navigator/getgamepads/index.md b/files/fr/web/api/navigator/getgamepads/index.md index 5ca49cb54c..f3d4b4006a 100644 --- a/files/fr/web/api/navigator/getgamepads/index.md +++ b/files/fr/web/api/navigator/getgamepads/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/getGamepads --- {{ APIRef("Navigator") }}{{SeeCompatTable}} -La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. +La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. Des éléments dans le tableau peuvent être `null` si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice. diff --git a/files/fr/web/api/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md index 32c5946175..be9af7828d 100644 --- a/files/fr/web/api/navigator/getusermedia/index.md +++ b/files/fr/web/api/navigator/getusermedia/index.md @@ -12,9 +12,9 @@ original_slug: NavigatorUserMedia.getUserMedia --- {{APIRef("Media Capture and Streams")}}{{deprecated_header}} -La fonction obsolète **Navigator.getUserMedia()** 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. +La fonction obsolète **Navigator.getUserMedia()** 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. -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é. +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é. > **Note :** 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")}}. @@ -41,7 +41,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ``` - errorCallback - - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. + - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. ### Valeur de retour @@ -55,7 +55,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ### Largeur et hauteur -Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. +Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. ```js navigator.getUserMedia = navigator.getUserMedia || @@ -95,7 +95,7 @@ Pour utiliser `getUserMedia()` dans une application installable (par exemple une } ``` -See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. +See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. ## Spécifications @@ -112,6 +112,6 @@ See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-cap ## Voir aussi - {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée. -- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS -- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects -- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. +- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS +- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects +- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.md b/files/fr/web/api/navigator/mozislocallyavailable/index.md index 71ac7e12fe..4e6c672478 100644 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.md +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.md @@ -16,7 +16,7 @@ Permet de déterminer si une ressource donnée est disponible. window.navigator.isLocallyAvailable(uri,ifOffline); - `uri` est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne. -- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. +- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. ### Exemple @@ -33,4 +33,4 @@ Permet de déterminer si une ressource donnée est disponible. ### Spécification -Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) +Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md index efb4ff023c..fc161d7c3c 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md +++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han --- ### Introduction -Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : +Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : <a href="mailto:webmaster@example.com">Webmestre</a> @@ -15,19 +15,19 @@ Les gestionnaires de protocoles web permettent à des applications web de partic ### Enregistrement -La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : +La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail"); -Où les paramètres sont : +Où les paramètres sont : - Le protocole. -- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. +- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. - Le nom du gestionnaire de protocole tel que présenté à l'utilisateur. -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 : +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 :  @@ -64,14 +64,14 @@ Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la p <title>Exemple de gestionnaire de protocole web — test</title> </head> <body> - <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> + <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> </body> </html> ``` ### Traitement -La phase suivante est le traitement de l'action. Le navigateur extrait le `href` 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 : +La phase suivante est le traitement de l'action. Le navigateur extrait le `href` 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 : http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole @@ -96,9 +96,9 @@ if ( isset ( $_GET["value"] ) ) { </head> <body> <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1> - <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> + <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> <textarea> -<?php echo(urldecode($value)) ?> +<?php echo(urldecode($value)) ?> </textarea> </body> </html> diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md index 567bbfb8da..44894ffd3d 100644 --- a/files/fr/web/api/navigator/sendbeacon/index.md +++ b/files/fr/web/api/navigator/sendbeacon/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Navigator/sendBeacon --- {{APIRef("HTML DOM")}} -La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. +La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. ## Syntaxe @@ -23,28 +23,28 @@ La méthode **`navigator.sendBeacon()`** peut être utilisée pour transfér ### Paramètres - `url` - - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. + - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. <!----> - `donnees` - - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. + - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. ### Valeurs de retour -La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). +La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). ## Description -Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. +Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. -Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. +Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. -Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. +Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation. -L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. +L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -57,9 +57,9 @@ function enregistrerDonnees() { } ``` -C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! +C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! -L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. +L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -82,4 +82,4 @@ function enregistrerDonnees() { ## Voir aussi - {{domxref("navigator", "navigator")}} -- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) +- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) diff --git a/files/fr/web/api/navigator/serviceworker/index.md b/files/fr/web/api/navigator/serviceworker/index.md index 2ecbc2d5e0..eb5ffde123 100644 --- a/files/fr/web/api/navigator/serviceworker/index.md +++ b/files/fr/web/api/navigator/serviceworker/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Navigator/serviceWorker --- {{APIRef("Service Workers API")}} -Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). +Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). ## syntaxe @@ -48,4 +48,4 @@ Le code ci-dessous vérifie si le navigateur supporte les service workers. ## Voir aussi - [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) -- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) diff --git a/files/fr/web/api/navigator/share/index.md b/files/fr/web/api/navigator/share/index.md index 7e2679be73..7b0055e0c7 100644 --- a/files/fr/web/api/navigator/share/index.md +++ b/files/fr/web/api/navigator/share/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/share --- {{APIRef("HTML DOM")}}{{SeeCompatTable}} -La méthode **`Navigator.share()`** 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 `undefined`. +La méthode **`Navigator.share()`** 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 `undefined`. ## Syntax @@ -14,21 +14,21 @@ La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de ### Paramètres - _data_ - - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : + - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : <!----> -- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. -- `text`: Un {{domxref("USVString")}} représentant le texte à partager. -- `title`: Un {{domxref("USVString")}} représentant le titre à partager. +- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. +- `text`: Un {{domxref("USVString")}} représentant le texte à partager. +- `title`: Un {{domxref("USVString")}} représentant le titre à partager. <!----> ### Valeur retournée -Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. +Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. -Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. +Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. ## Examples diff --git a/files/fr/web/api/network_information_api/index.md b/files/fr/web/api/network_information_api/index.md index 4cce43d77b..44fbb7d98d 100644 --- a/files/fr/web/api/network_information_api/index.md +++ b/files/fr/web/api/network_information_api/index.md @@ -39,8 +39,8 @@ let preloadVideo = true; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.effectiveType === 'cellular') { - preloadVideo = false; - } + preloadVideo = false; + } } ``` diff --git a/files/fr/web/api/node/appendchild/index.md b/files/fr/web/api/node/appendchild/index.md index c71ba507b3..214732ff24 100644 --- a/files/fr/web/api/node/appendchild/index.md +++ b/files/fr/web/api/node/appendchild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/appendChild --- {{APIRef("DOM")}} -La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). +La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec `cloneNode` ne seront pas automatiquement synchronisées. diff --git a/files/fr/web/api/node/baseuri/index.md b/files/fr/web/api/node/baseuri/index.md index cbecf41d24..d9641e27da 100644 --- a/files/fr/web/api/node/baseuri/index.md +++ b/files/fr/web/api/node/baseuri/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Node/baseURI La propriété en lecture seule **`Node.baseURI`** renvoie l'URL de base absolue d'un noeud. -L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. +L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. -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 [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. +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 [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. ## Syntaxe @@ -45,7 +45,7 @@ Vous pouvez utiliser `{{domxref("document")}}.baseURI` pour obtenir l'URL de bas L'URL de base d'un _element_ en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud. -Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. +Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. Vous pouvez utiliser `{{domxref("element")}}.baseURI` pour obtenir l'URL de base d'un élément. diff --git a/files/fr/web/api/node/childnodes/index.md b/files/fr/web/api/node/childnodes/index.md index 4482d18e89..2abbdf1d4c 100644 --- a/files/fr/web/api/node/childnodes/index.md +++ b/files/fr/web/api/node/childnodes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Node/childNodes --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. +La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. ## Syntaxe @@ -48,9 +48,9 @@ if (parg.hasChildNodes()) { 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 `elementNodeReference.childNodes[1].nodeName` pour obtenir son nom, etc.) -L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). +L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). -`childNodes` 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. +`childNodes` 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. diff --git a/files/fr/web/api/node/clonenode/index.md b/files/fr/web/api/node/clonenode/index.md index ca70a18cb3..c71153856b 100644 --- a/files/fr/web/api/node/clonenode/index.md +++ b/files/fr/web/api/node/clonenode/index.md @@ -24,9 +24,9 @@ La méthode **`Node.cloneNode()`** renvoie une copie du nœud sur lequel elle a - deep _{{optional_inline}} (profondeur)_ - : `true` (_vrai_) si les enfants du noeud doivent aussi être clonés ou `false` (_faux_) si seul le noeud spécifié doit l'être. -> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. +> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. > -> 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 `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` 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. +> 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 `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` 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. ## Exemple @@ -48,14 +48,14 @@ Si `deep` est évalué à `true`, le sous-arbre entier est copié également (y Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus. -Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. +Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. ### Spécification | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | +| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | | {{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/comparedocumentposition/index.md b/files/fr/web/api/node/comparedocumentposition/index.md index 7607849fb8..248023dbe9 100644 --- a/files/fr/web/api/node/comparedocumentposition/index.md +++ b/files/fr/web/api/node/comparedocumentposition/index.md @@ -49,7 +49,7 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWI | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/contains/index.md b/files/fr/web/api/node/contains/index.md index ae386427c2..add72ee901 100644 --- a/files/fr/web/api/node/contains/index.md +++ b/files/fr/web/api/node/contains/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Node/contains ## Exemple -Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. +Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. ```js function isInPage(node) { diff --git a/files/fr/web/api/node/firstchild/index.md b/files/fr/web/api/node/firstchild/index.md index 02a1edd488..3b2321f020 100644 --- a/files/fr/web/api/node/firstchild/index.md +++ b/files/fr/web/api/node/firstchild/index.md @@ -32,7 +32,7 @@ Cet exemple montre l'utilisation de `firstChild` et la manière dont les nœuds </script> ``` -Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) 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>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. +Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) 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>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. Un autre nœud `#text` est inséré entre les balises de fermeture \</span> et \</p>. @@ -47,9 +47,9 @@ Si ces espaces sont retirés du code source, les nœuds `#text` n'apparaîtront </script> ``` -À présent, l'alerte affichera « SPAN ». +À présent, l'alerte affichera « SPAN ». -Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. +Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. ## Spécification diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md index 624d732fe0..0deb6f089c 100644 --- a/files/fr/web/api/node/index.md +++ b/files/fr/web/api/node/index.md @@ -38,9 +38,9 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.lastChild")}} {{readonlyInline}} - : Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou `null` s'il n'a pas d'enfant. - {{DOMxRef("Node.nextSibling")}} {{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.nodeName")}} {{readonlyInline}} - - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. + - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. - {{DOMxRef("Node.nodeType")}}{{readonlyInline}} - : Retourne un `unsigned short` (_non signé court_) représentant le type du nœud. Les valeurs possibles sont : @@ -62,13 +62,13 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.nodeValue")}} - : Retourne / définit la valeur du nœud courant. - {{DOMxRef("Node.ownerDocument")}}{{readonlyInline}} - - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . + - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . - {{DOMxRef("Node.parentNode")}}{{readonlyInline}} - : 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 `null` . - {{DOMxRef("Node.parentElement")}}{{readonlyInline}} - - : 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 `null`. + - : 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 `null`. - {{DOMxRef("Node.previousSibling")}}{{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.textContent")}} - : Retourne / définit le contenu textuel d'un élément et de tous ses descendants. @@ -77,20 +77,20 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. ### Propriétés obsolètes - {{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}} - - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. + - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. > **Note :** 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")}} - {{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}} - - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. + - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. -> **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" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} +> **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" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} - {{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}} - - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. -- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} + - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. +- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} - : Un {{Interface("nsIPrincipal")}} représentant le nœud principal. -- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} +- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} - : Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}. ## Méthodes @@ -127,7 +127,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.normalize()")}} - : Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide). - {{DOMxRef("Node.removeChild()")}} - - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. + - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. - {{DOMxRef("Node.replaceChild()")}} - : Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre. @@ -142,7 +142,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{domxref("Node.isSupported()")}} {{obsolete_inline}} - : 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. - {{domxref("Node.setUserData()")}} {{obsolete_inline}} - - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. + - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. ## Exemples @@ -211,8 +211,8 @@ document.body.removeAll(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#interface-node', 'Node')}} | {{Spec2('DOM WHATWG')}} | Supprime les propriétés suivantes : `attributes`, `namespaceURI`, `prefix`, et `localName`. Supprime les méthodes suivantes : `isSupported()`, `hasAttributes()`, `getFeature()`, `setUserData()`, et `getUserData()`. | -| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | -| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | +| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | +| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | | {{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md index a04b17248d..129022a2dd 100644 --- a/files/fr/web/api/node/insertbefore/index.md +++ b/files/fr/web/api/node/insertbefore/index.md @@ -93,7 +93,7 @@ parentDiv.insertBefore(sp1, sp2) Il n'existe pas de méthode `insertAfter()`. Il peut être émulé avec une combinaison des méthodes `insertBefore()` et [`Node.nextSibling`](/fr/docs/Web/API/Node/nextSibling). -Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : +Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : ```js parentDiv.insertBefore(sp1, sp2.nextSibling); diff --git a/files/fr/web/api/node/isconnected/index.md b/files/fr/web/api/node/isconnected/index.md index 3ffaaa50de..0f5c8ca2ad 100644 --- a/files/fr/web/api/node/isconnected/index.md +++ b/files/fr/web/api/node/isconnected/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isConnected --- {{APIRef("DOM")}} -La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. +La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. ## Syntaxe diff --git a/files/fr/web/api/node/isdefaultnamespace/index.md b/files/fr/web/api/node/isdefaultnamespace/index.md index 4e1fe3058e..14699719d2 100644 --- a/files/fr/web/api/node/isdefaultnamespace/index.md +++ b/files/fr/web/api/node/isdefaultnamespace/index.md @@ -31,4 +31,4 @@ alert(el.isDefaultNamespace(XULNS)); // true ## Spécification - [DOM Level 3 Core: isDefaultNamespace](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace) -- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) +- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index 3afb00dfe7..fd4a5b792c 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} -La méthode **`Node.isEqualNode()`** 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. +La méthode **`Node.isEqualNode()`** 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. ## Syntaxe @@ -59,7 +59,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 5b57ac5cbb..662e808cd2 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -31,12 +31,12 @@ Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le ```css hidden #output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; } ``` diff --git a/files/fr/web/api/node/issupported/index.md b/files/fr/web/api/node/issupported/index.md index d59dab5a7b..e6af404bab 100644 --- a/files/fr/web/api/node/issupported/index.md +++ b/files/fr/web/api/node/issupported/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isSupported --- {{APIRef("DOM")}}{{obsolete_header}} -La méthode **`Node.isSupported()`** 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. +La méthode **`Node.isSupported()`** 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. ### Syntaxe @@ -19,9 +19,9 @@ La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","b ### Paramètres - `feature` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. - `version` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». 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 `true`. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». 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 `true`. ## Exemple diff --git a/files/fr/web/api/node/nextsibling/index.md b/files/fr/web/api/node/nextsibling/index.md index 19e0ddb762..85f26ed2f7 100644 --- a/files/fr/web/api/node/nextsibling/index.md +++ b/files/fr/web/api/node/nextsibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/nextSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. +La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. ## Syntaxe diff --git a/files/fr/web/api/node/nodename/index.md b/files/fr/web/api/node/nodename/index.md index ef15c51fc1..adb89ad540 100644 --- a/files/fr/web/api/node/nodename/index.md +++ b/files/fr/web/api/node/nodename/index.md @@ -36,18 +36,18 @@ Les valeurs retournées pour les différents types de noeuds sont : ## Exemple -Avec le balisage suivant : +Avec le balisage suivant : <div id="d1">hello world</div> <input type="text" id="t"/> -et le script suivant : +et le script suivant : var div1 = document.getElementById("d1"); var text_field = document.getElementById("t"); text_field.value = div1.nodeName; -En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). +En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). Notez que la propriété [`tagName`](fr/DOM/element.tagName) aurait pu être uilisée à la place, puisque `nodeName` a la même valeur que `tagName` pour un élément. Souvenez vous cependant que `nodeName` renverra `#text` pour les nœuds texte tandis que `tagName` renverra `undefined`. diff --git a/files/fr/web/api/node/nodetype/index.md b/files/fr/web/api/node/nodetype/index.md index 082ae1bd03..f1f530769a 100644 --- a/files/fr/web/api/node/nodetype/index.md +++ b/files/fr/web/api/node/nodetype/index.md @@ -27,7 +27,7 @@ Renvoie un entier (_integer_) qui spécifie le type du noeud ; les valeurs possi | Constante | Valeur | Description | | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | -| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | +| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | | `Node.TEXT_NODE` | `3` | Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}. | | `Node.PROCESSING_INSTRUCTION_NODE` | `7` | Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration `<?xml-stylesheet ... ?>`. | | `Node.COMMENT_NODE` | `8` | Un noeud {{domxref("Comment")}}. | diff --git a/files/fr/web/api/node/nodevalue/index.md b/files/fr/web/api/node/nodevalue/index.md index 294ed8619a..123f49d6d7 100644 --- a/files/fr/web/api/node/nodevalue/index.md +++ b/files/fr/web/api/node/nodevalue/index.md @@ -22,7 +22,7 @@ La propriété **`Node.nodeValue`** renvoie ou définit la valeur du nœud coura Pour le document lui-même, `nodeValue` renvoie `null`. Pour des nœuds texte, de commentaires et CDATA, `nodeValue` renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut. -Le tableau suivant montre les valeurs de retour pour différents types de nœuds : +Le tableau suivant montre les valeurs de retour pour différents types de nœuds : <table> <tbody> diff --git a/files/fr/web/api/node/normalize/index.md b/files/fr/web/api/node/normalize/index.md index 4864a1278a..9c2bc0a57d 100644 --- a/files/fr/web/api/node/normalize/index.md +++ b/files/fr/web/api/node/normalize/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Node/normalize ## Résumé -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. +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. ## Syntaxe diff --git a/files/fr/web/api/node/ownerdocument/index.md b/files/fr/web/api/node/ownerdocument/index.md index 83c9698497..19343692c8 100644 --- a/files/fr/web/api/node/ownerdocument/index.md +++ b/files/fr/web/api/node/ownerdocument/index.md @@ -36,7 +36,7 @@ L'objet `document` renvoyé par cette propriété est l'objet principal avec leq | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM3 Core")}} | Pas de changement | | {{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM2 Core")}} | Définition initiale. | diff --git a/files/fr/web/api/node/parentelement/index.md b/files/fr/web/api/node/parentelement/index.md index 66d50067d3..b8c25760ae 100644 --- a/files/fr/web/api/node/parentelement/index.md +++ b/files/fr/web/api/node/parentelement/index.md @@ -9,7 +9,7 @@ tags: - parent translation_of: Web/API/Node/parentElement --- -{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. +{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. ## Syntaxe diff --git a/files/fr/web/api/node/parentnode/index.md b/files/fr/web/api/node/parentnode/index.md index d4de4fde06..84a79eaf56 100644 --- a/files/fr/web/api/node/parentnode/index.md +++ b/files/fr/web/api/node/parentnode/index.md @@ -17,13 +17,13 @@ La propriété en lecture seule **parentNode** renvoie le parent du nœud spéci parentNode = node.parentNode -`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. +`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. ## Exemple ```js if (node.parentNode) { - // supprime un noeud de l'arbre, + // supprime un noeud de l'arbre, // sauf s'il a déjà été supprimé node.parentNode.removeChild(node); } diff --git a/files/fr/web/api/node/previoussibling/index.md b/files/fr/web/api/node/previoussibling/index.md index 4b1e499e59..f5fe908369 100644 --- a/files/fr/web/api/node/previoussibling/index.md +++ b/files/fr/web/api/node/previoussibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/previousSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. +La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. ## Syntaxe diff --git a/files/fr/web/api/node/removechild/index.md b/files/fr/web/api/node/removechild/index.md index d5835511c4..0fb6db41af 100644 --- a/files/fr/web/api/node/removechild/index.md +++ b/files/fr/web/api/node/removechild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/removeChild --- {{ ApiRef("DOM") }} -La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. +La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. ## Syntaxe @@ -24,15 +24,15 @@ La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et r - `node` est le nœud parent de `child`. - `oldchild` conserve une référence au nœud enfant retiré. `oldchild` === `child`. -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 `ancienEnfant`_._ +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 `ancienEnfant`_._ -Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` 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 [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. +Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` 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 [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. Si `child` n'est pas un enfant du nœud `element`, la méthode provoque une exception. Une exception sera aussi lancée dans le cas où le nœud `child` est bien un enfant du nœud `element` 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 `element` (comme `blur`). -La méthode peut lever une exception de deux façons : +La méthode peut lever une exception de deux façons : -1. Si `enfant` é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 :`` +1. Si `enfant` é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 :`` `Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node`. 2. si l'`enfant` n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante : `Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.` diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md index 0b195eaa7a..d521450f1f 100644 --- a/files/fr/web/api/node/textcontent/index.md +++ b/files/fr/web/api/node/textcontent/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/textContent --- {{APIRef("DOM")}} -La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. +La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. ## Syntaxe @@ -39,14 +39,14 @@ Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'i ## Exemple - // Étant donné le fragment de HTML suivant : + // Étant donné le fragment de HTML suivant : // <div id="divA">Ceci est un <span>exemple de</span> texte</div> - // On obtient le contenu textuel : + // On obtient le contenu textuel : var text = document.getElementById("divA").textContent; // |text| vaut "Ceci est un exemple de texte". - // On définit le contenu textuel : + // On définit le contenu textuel : document.getElementById("divA").textContent = "Ceci est un exemple de texte"; // Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div> @@ -85,7 +85,7 @@ if (Object.defineProperty | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------- | | {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Pas de changement de DOM4 | -| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/nodefilter/index.md b/files/fr/web/api/nodefilter/index.md index c6eb155b62..625317986f 100644 --- a/files/fr/web/api/nodefilter/index.md +++ b/files/fr/web/api/nodefilter/index.md @@ -104,7 +104,7 @@ while ((node = nodeIterator.nextNode())) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.md b/files/fr/web/api/nodeiterator/expandentityreferences/index.md index 974f253391..869a01615f 100644 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.md +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/NodeIterator/expandEntityReferences La propriété en lecture seule **`NodeIterator.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}. -Si cette valeur est `false` (_faux_), 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é. +Si cette valeur est `false` (_faux_), 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é. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/index.md b/files/fr/web/api/nodeiterator/index.md index e38aed5afe..b45b920adc 100644 --- a/files/fr/web/api/nodeiterator/index.md +++ b/files/fr/web/api/nodeiterator/index.md @@ -154,7 +154,7 @@ _Cette interface n'hérite d'aucune méthode._ - {{domxref("NodeIterator.previousNode()")}} - : Renvoie le noeud {{domxref("Node")}} précédent dans le document ou `null` s'il n'y en a aucun. - {{domxref("NodeIterator.nextNode()")}} - - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. + - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. ## Spécifications diff --git a/files/fr/web/api/nodeiterator/nextnode/index.md b/files/fr/web/api/nodeiterator/nextnode/index.md index ff4676c9fb..8fbbc190c6 100644 --- a/files/fr/web/api/nodeiterator/nextnode/index.md +++ b/files/fr/web/api/nodeiterator/nextnode/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/NodeIterator/nextNode --- {{APIRef("DOM")}} -La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. +La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. Cette méthode retourne `null` quand il n'y a plus de nœuds dans l'ensemble. -Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. +Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.md b/files/fr/web/api/nodeiterator/whattoshow/index.md index 1cd3450056..d334d4aedc 100644 --- a/files/fr/web/api/nodeiterator/whattoshow/index.md +++ b/files/fr/web/api/nodeiterator/whattoshow/index.md @@ -143,7 +143,7 @@ var nodeIterator = document.createNodeIterator( false ); if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) || - (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // nodeIterator affichera les commentaires } ``` diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md index d74ee8bccb..77666b9e3d 100644 --- a/files/fr/web/api/nodelist/foreach/index.md +++ b/files/fr/web/api/nodelist/foreach/index.md @@ -70,11 +70,11 @@ Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les nav ```js if (window.NodeList && !NodeList.prototype.forEach) { - NodeList.prototype.forEach = function (callback, thisArg) { + NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; - for (var i = 0; i < this.length; i++) { - callback.call(thisArg, this[i], i, this); - } + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } }; } ``` diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md index 5f326cadc6..5bd3fb1583 100644 --- a/files/fr/web/api/nodelist/index.md +++ b/files/fr/web/api/nodelist/index.md @@ -17,7 +17,7 @@ Les objets **`NodeList`** sont des collections de nœuds comme celles retournée > > Néanmoins certains vieux navigateurs n'ont pas encore implémenté `NodeList.forEach()` ni `Array.from()`. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document). -Dans certains cas, la `NodeList` 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 : +Dans certains cas, la `NodeList` 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 : ```js var parent = document.getElementById('parent'); @@ -27,7 +27,7 @@ parent.appendChild(document.createElement('div')); console.log(child_nodes.length); // devrait afficher "3" ``` -Dans d'autres cas, la `NodeList` 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 `NodeList` statique. +Dans d'autres cas, la `NodeList` 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 `NodeList` statique. Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste. @@ -39,9 +39,9 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Méthodes - {{domxref("NodeList.item()")}} - - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). + - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). - {{domxref("NodeList.entries()")}} - - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. - {{domxref("NodeList.forEach()")}} - : exécute une fonction fournie une fois par élément `NodeList`. - {{domxref("NodeList.keys()")}} @@ -51,7 +51,7 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Exemple -Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : +Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : ```js for (var i = 0; i < myNodeList.length; ++i) { @@ -85,9 +85,9 @@ Array.prototype.forEach.call(list, function (item) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | -| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | +| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | +| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | | {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/notification/data/index.md b/files/fr/web/api/notification/data/index.md index efddb360b1..2e0bbd45e2 100644 --- a/files/fr/web/api/notification/data/index.md +++ b/files/fr/web/api/notification/data/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Notification/data --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. +La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification. diff --git a/files/fr/web/api/notification/permission/index.md b/files/fr/web/api/notification/permission/index.md index fca52d13af..c610dc31c8 100644 --- a/files/fr/web/api/notification/permission/index.md +++ b/files/fr/web/api/notification/permission/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Notification/permission --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. +La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. ## Syntaxe diff --git a/files/fr/web/api/notification/silent/index.md b/files/fr/web/api/notification/silent/index.md index 5f31229f85..b621c5e510 100644 --- a/files/fr/web/api/notification/silent/index.md +++ b/files/fr/web/api/notification/silent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Notification/silent --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`silent`** 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 `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. +La propriété en lecture seule **`silent`** 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 `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. ## Syntaxe diff --git a/files/fr/web/api/notificationevent/index.md b/files/fr/web/api/notificationevent/index.md index 0b2803c583..8592ef1417 100644 --- a/files/fr/web/api/notificationevent/index.md +++ b/files/fr/web/api/notificationevent/index.md @@ -63,7 +63,7 @@ self.addEventListener('notificationclick', function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | +| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | > **Note :** Cette interface est définie au sein de [l'API Notifications](/fr/docs/Web/API/Notifications_API), mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}. diff --git a/files/fr/web/api/notifications_api/index.md b/files/fr/web/api/notifications_api/index.md index d7483eea5c..b5827d2d7e 100644 --- a/files/fr/web/api/notifications_api/index.md +++ b/files/fr/web/api/notifications_api/index.md @@ -33,7 +33,7 @@ De là, l'utilisateur peut choisir d'autoriser les notifications de cette origin > **Note :** 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é. -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. +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. En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API), pour permettre aux service worker de déclencher des notifications. diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.md b/files/fr/web/api/offlineaudiocontext/complete_event/index.md index 02711f32b5..7c0229e724 100644 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.md +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.md @@ -39,7 +39,7 @@ _Aucun_ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | ## Voir aussi diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md index e8e0cd9ec2..7cb9c5d075 100644 --- a/files/fr/web/api/offscreencanvas/index.md +++ b/files/fr/web/api/offscreencanvas/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/OffscreenCanvas --- {{APIRef("Canvas API")}} {{SeeCompatTable}} -L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). +L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). -> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. +> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. ## Constructeur - {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}} - - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. + - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. ## Propriétés @@ -36,16 +36,16 @@ L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors <!----> - {{domxref("OffscreenCanvas.toBlob()")}} - - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. + - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. <!----> - {{domxref("OffscreenCanvas.transferToImageBitmap()")}} - - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. + - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. ## Exemples -### Affichage synchrone d'images produites par un `OffscreenCanvas` +### Affichage synchrone d'images produites par un `OffscreenCanvas` Une façon d'utiliser l'API `OffscreenCanvas` est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet `OffscreenCanvas` pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert. @@ -80,9 +80,9 @@ var bitmapDeux = horsEcran.transferToImageBitmap(); deux.transferImageBitmap(bitmapDeux); ``` -### Affichage asynchrone d'images produites par un `OffscreenCanvas` +### Affichage asynchrone d'images produites par un `OffscreenCanvas` -Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. +Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. Afin de rendre les cadres visibles, vous pouvez appeler `commit()` sur ce `RenderingContext`, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original. diff --git a/files/fr/web/api/origin/index.md b/files/fr/web/api/origin/index.md index 8aab326ced..9098ab8474 100644 --- a/files/fr/web/api/origin/index.md +++ b/files/fr/web/api/origin/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. +La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. ## Syntaxe @@ -18,7 +18,7 @@ Une {{domxref("USVString")}}. ## Exemples -Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. +Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. ```js onmessage = function() { @@ -26,7 +26,7 @@ onmessage = function() { }; ``` -Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. +Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. ## Spécifications diff --git a/files/fr/web/api/oscillatornode/index.md b/files/fr/web/api/oscillatornode/index.md index 976b975a28..0be7e1d962 100644 --- a/files/fr/web/api/oscillatornode/index.md +++ b/files/fr/web/api/oscillatornode/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/OscillatorNode --- {{APIRef("Web Audio API")}} -L'interface `OscillatorNode` 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. +L'interface `OscillatorNode` 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. -On crée un `OscillatorNode` 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 : +On crée un `OscillatorNode` 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 : -- Nombre d'entrées : `0` -- Nombre de sorties : `1` -- Mode de calcul des canaux : `max` -- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) -- Interprétation des canaux : `speakers` +- Nombre d'entrées : `0` +- Nombre de sorties : `1` +- Mode de calcul des canaux : `max` +- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) +- Interprétation des canaux : `speakers` ## Propriétés -*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. +*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. - {{domxref("OscillatorNode.frequency")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.detune")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.type")}} - - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. + - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. ## Méthodes -_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. +_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. - {{domxref("OscillatorNode.start()")}} - : Cette méthode déclenche la lecture du son. @@ -40,7 +40,7 @@ _Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. ## Event handlers - {{domxref("OscillatorNode.onended")}} - - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. + - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. ## Exemples diff --git a/files/fr/web/api/page_visibility_api/index.md b/files/fr/web/api/page_visibility_api/index.md index a2b1d7f629..906a4ceea6 100644 --- a/files/fr/web/api/page_visibility_api/index.md +++ b/files/fr/web/api/page_visibility_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Page_Visibility_API --- {{DefaultAPISidebar("Page Visibility API")}} -**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. +**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. 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. @@ -17,7 +17,7 @@ L’API est particulièrement utile pour économiser des ressources. Elle donne ### Cas d’utilisation -Quelques exemples : +Quelques exemples : - Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page. - Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible. @@ -28,11 +28,11 @@ Historiquement, les développeurs ont utilisé des solutions de remplacement imp ### Politiques de performance des pages en arrière-plan -En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : +En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : - Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie. - Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir [_Reasons for delays longer than specified_](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified) pour plus de détails. -- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : +- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : - Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes. - Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir _[Reasons for delays longer than specified](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified)_). Pour Chrome, cette valeur est de 10 secondes. @@ -40,7 +40,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so - Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé. - Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome. -- Certaines opérations sont exemptées de retardement : +- Certaines opérations sont exemptées de retardement : - Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées. - Les applications avec des connexions en temps réel ([WebSockets](/en-US/docs/Web/API/WebSockets_API) et [WebRTC](/en-US/docs/Web/API/WebRTC_API)), afin d’éviter que ces connexions soient fermées par timeout. @@ -50,7 +50,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so Voir [l’exemple en direct](http://daniemon.com/tech/webapps/page-visibility/) (vidéo avec son). -Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : +Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : ```js // Set the name of the hidden property and the change event for visibility @@ -105,12 +105,12 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden = - : Retourne `true` si la page est dans un état considéré comme masqué à l’utilisateur, et `false` dans le cas contraire. - {{domxref("document.visibilityState")}} - - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : + - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : - - `visible` : 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. - - `hidden` : 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. - - `prerender` : 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 `document.hidden`). 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. - - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. + - `visible` : 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. + - `hidden` : 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. + - `prerender` : 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 `document.hidden`). 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. + - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. ```js //startSimulation and pauseSimulation defined elsewhere diff --git a/files/fr/web/api/pagetransitionevent/index.md b/files/fr/web/api/pagetransitionevent/index.md index ca4c52d177..b2e78f119a 100644 --- a/files/fr/web/api/pagetransitionevent/index.md +++ b/files/fr/web/api/pagetransitionevent/index.md @@ -11,7 +11,7 @@ Les évènements de transition de page sont émis quand une page web est chargé ### Hiérarchie d’héritage -[Event](/fr/docs/Web/API/Event) PageTransitionEvent +[Event](/fr/docs/Web/API/Event) PageTransitionEvent ## Exemple @@ -39,13 +39,13 @@ function myFunction(event) { ## Membres -L’objet **PageTransitionEvent** possède les types de membres suivants : +L’objet **PageTransitionEvent** possède les types de membres suivants : - [Propriétés](#Propriétés) ### Propriétés -L’objet **PageTransitionEvent** possède les propriétés suivantes : +L’objet **PageTransitionEvent** possède les propriétés suivantes : <table> <tbody> diff --git a/files/fr/web/api/passwordcredential/name/index.md b/files/fr/web/api/passwordcredential/name/index.md index f48ae976df..5e0b59442a 100644 --- a/files/fr/web/api/passwordcredential/name/index.md +++ b/files/fr/web/api/passwordcredential/name/index.md @@ -19,7 +19,7 @@ La propriété **`name`** est accessible en lecture seule et est rattachée à l ### Valeur -A {{domxref("USVString")}} containing a name. +A {{domxref("USVString")}} containing a name. ## Spécifications diff --git a/files/fr/web/api/payment_request_api/index.md b/files/fr/web/api/payment_request_api/index.md index e1c2b7a15e..381309d1c0 100644 --- a/files/fr/web/api/payment_request_api/index.md +++ b/files/fr/web/api/payment_request_api/index.md @@ -5,64 +5,64 @@ translation_of: Web/API/Payment_Request_API --- {{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}} -L'API *Payment Request* 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. +L'API *Payment Request* 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. ## Concepts et usages de l'API _Payment Request_ De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'**API <i lang="en">Payment Request</i>** a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi disparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisatrice ou l'utilisateur, qui sont transmises au marchand sans nécessiter de formulaire HTML. -Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : +Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : -- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. -- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. -- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. -- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. -- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. +- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. +- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. +- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. +- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. +- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. -Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. +Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. -Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). +Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). -> **Note :** 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")}}. +> **Note :** 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")}}. ## Interfaces - {{domxref('PaymentAddress')}} - - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. + - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. - {{domxref('PaymentRequest')}} - - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. + - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. - {{domxref('PaymentRequestEvent')}} - - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. + - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. - {{domxref('PaymentRequestUpdateEvent')}} - : Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur. - {{domxref('PaymentMethodChangeEvent')}} - - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). + - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). - {{domxref('PaymentResponse')}} - : Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement. - {{domxref('MerchantValidationEvent')}} - - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). + - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). <!----> ## Dictionnaires - {{domxref("AddressErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. - {{domxref("PayerErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. - {{domxref("PaymentDetailsUpdate")}} - - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. + - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. -### Dictionnaires connexes pour la specification *Basic Card* +### Dictionnaires connexes pour la specification *Basic Card* - {{domxref("BasicCardChangeDetails")}} - - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. + - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. - {{domxref("BasicCardErrors")}} - - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. + - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. - {{domxref('BasicCardRequest')}} - : Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement. - {{domxref('BasicCardResponse')}} - - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. + - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. ## Spécifications diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md index 2cefdb109d..d49ab08b7a 100644 --- a/files/fr/web/api/periodicwave/index.md +++ b/files/fr/web/api/periodicwave/index.md @@ -15,14 +15,14 @@ translation_of: Web/API/PeriodicWave --- {{ APIRef("Web Audio API") }} -L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. +L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. -`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. +`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. ## Constructeur - {{domxref("PeriodicWave.PeriodicWave()")}} - - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. ## Propriétés diff --git a/files/fr/web/api/plugin/index.md b/files/fr/web/api/plugin/index.md index 0e892cd5fb..d18c059ce8 100644 --- a/files/fr/web/api/plugin/index.md +++ b/files/fr/web/api/plugin/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Plugin --- {{ApiRef("HTML DOM")}} -L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. +L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. -> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. +> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. ## Propriétés @@ -22,15 +22,15 @@ L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/ - : Une description lisible du plugin. - {{domxref("Plugin.filename")}} {{readonlyinline}} - : Le nom de fichier du fichier plugin. -- {{domxref("Plugin.name")}} {{readonlyinline}} +- {{domxref("Plugin.name")}} {{readonlyinline}} - : Le nom du plugin. -- {{domxref("Plugin.version")}} {{readonlyinline}} +- {{domxref("Plugin.version")}} {{readonlyinline}} - : Le numéro de version du plugin, en chaîne de caractères. ## Méthodes - {{domxref("Plugin.item")}} - - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. + - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. - {{domxref("Plugin.namedItem")}} - : Renvoie le type MIME d'un élément pris en charge. diff --git a/files/fr/web/api/pointer_events/index.md b/files/fr/web/api/pointer_events/index.md index 2e2d206b70..b3ce13352e 100644 --- a/files/fr/web/api/pointer_events/index.md +++ b/files/fr/web/api/pointer_events/index.md @@ -16,7 +16,7 @@ Les événements de pointeur sont des événements DOM déclenché pour tout pé Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement. -Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. +Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. ## Terminologie @@ -44,7 +44,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE - {{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement. - {{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact. - {{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact. -- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. +- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y. - {{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X. - {{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.) @@ -52,7 +52,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE ### Types d'événements et gestionnaires d'événements globaux -Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. +Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. | Event | On Event Handler | Description | | ---------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md index 77c78cc8c4..b050d7844c 100644 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md @@ -18,7 +18,7 @@ Cet exemple montre comment détecter les gestes de _pinch/zoom_ (pincer/zoomer), ## Exemple -Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. +Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. ### Définir la cible du toucher diff --git a/files/fr/web/api/pointer_lock_api/index.md b/files/fr/web/api/pointer_lock_api/index.md index ed011ba852..c4fa733725 100644 --- a/files/fr/web/api/pointer_lock_api/index.md +++ b/files/fr/web/api/pointer_lock_api/index.md @@ -13,7 +13,7 @@ original_slug: WebAPI/Pointer_Lock --- {{DefaultAPISidebar("Pointer Lock API")}} -**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. +**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions. @@ -21,9 +21,9 @@ Comme Pointer lock continue de déclencher des évènements même quand le curse ## Concepts de base -Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). 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 : +Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). 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 : -- 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. +- 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. - Ne se limite pas aux bordures du navigateur ou de l'écran. - Continue de déclencher des évènements peu importe l'état des boutons de la souris. - Cache le curseur. @@ -34,7 +34,7 @@ Cette section fournit une brève description de chaque propriété et méthode a ### requestPointerLock() -L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: +L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: ```js canvas.requestPointerLock = canvas.requestPointerLock || @@ -46,9 +46,9 @@ canvas.requestPointerLock() ### pointerLockElement et exitPointerLock() -L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. +L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. -La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. +La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. Voici un exemple d'utilisation de `pointerLockElement`: diff --git a/files/fr/web/api/pointerevent/index.md b/files/fr/web/api/pointerevent/index.md index 06c014d904..3e058ee7e2 100644 --- a/files/fr/web/api/pointerevent/index.md +++ b/files/fr/web/api/pointerevent/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/PointerEvent --- {{ APIRef("Pointer Events") }} -L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. +L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. -Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. +Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. -Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. +Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. ## Constructeurs @@ -29,13 +29,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr - {{ domxref('PointerEvent.pressure')}} {{readonlyInline}} - : La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}} - - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. + - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y. - {{ domxref('PointerEvent.tiltY')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X. - {{ domxref('PointerEvent.twist')}} {{readonlyInline}} - - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. + - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. - {{ domxref('PointerEvent.pointerType')}} {{readonlyInline}} - : Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.) - {{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}} @@ -44,13 +44,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr ## Methods - {{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}} - - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. + - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. ## Types d'événéments de pointeur -L'interface `PointerEvent` 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. +L'interface `PointerEvent` 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. -> **Note :** 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. +> **Note :** 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. - {{event('pointerover')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément. @@ -69,7 +69,7 @@ L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer - {{event('pointerleave')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur. - {{event('gotpointercapture')}} - - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. + - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. - {{event('lostpointercapture')}} - : Cet événément est déclenché après qu'un pointeur ait relâché sa capture. diff --git a/files/fr/web/api/proximity_events/index.md b/files/fr/web/api/proximity_events/index.md index d5b2e749e8..1a147524b8 100644 --- a/files/fr/web/api/proximity_events/index.md +++ b/files/fr/web/api/proximity_events/index.md @@ -16,14 +16,14 @@ Les événements de proximité permettent, simplement, de savoir lorsqu'un utili ## Événements de proximité -Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. +Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. Cet événement peut être capturé en utilisant un objet au niveau `window` en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}. Une fois qu'il a été capturé, l'événement donne accès à différentes informations : - L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}. -- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. +- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. ## Exemple diff --git a/files/fr/web/api/push_api/index.md b/files/fr/web/api/push_api/index.md index dc7b9d2f2c..ba70b101a8 100644 --- a/files/fr/web/api/push_api/index.md +++ b/files/fr/web/api/push_api/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Push_API --- {{DefaultAPISidebar("Push API")}}{{SeeCompatTable}} -L' **API Push** 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. +L' **API Push** 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. > **Note :** 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 à [Simple Push](/fr/docs/Web/API/Simple_Push_API). diff --git a/files/fr/web/api/pushevent/index.md b/files/fr/web/api/pushevent/index.md index a1364ab73c..7c190dfbd2 100644 --- a/files/fr/web/api/pushevent/index.md +++ b/files/fr/web/api/pushevent/index.md @@ -39,29 +39,29 @@ L'exemple suivant prends les données du `PushEvent` et les affiche sur tous les ```js self.addEventListener('push', function(event) { - if (!(self.Notification && self.notification.permission === 'granted')) { - return; - } - - var data = {}; - if (event.data) { - data = event.data.json(); - } - var title = data.title || "Something Has Happened"; - var message = data.message || "Here's something you might want to check out."; - var icon = "images/new-notification.png"; - - var notification = new Notification(title, { - body: message, - tag: 'simple-push-demo-notification', - icon: icon - }); - - notification.addEventListener('click', function() { - if (clients.openWindow) { - clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); - } - }); + if (!(self.Notification && self.notification.permission === 'granted')) { + return; + } + + var data = {}; + if (event.data) { + data = event.data.json(); + } + var title = data.title || "Something Has Happened"; + var message = data.message || "Here's something you might want to check out."; + var icon = "images/new-notification.png"; + + var notification = new Notification(title, { + body: message, + tag: 'simple-push-demo-notification', + icon: icon + }); + + notification.addEventListener('click', function() { + if (clients.openWindow) { + clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); + } + }); }); ``` diff --git a/files/fr/web/api/queuemicrotask/index.md b/files/fr/web/api/queuemicrotask/index.md index 5fb7f410eb..71d5c61121 100644 --- a/files/fr/web/api/queuemicrotask/index.md +++ b/files/fr/web/api/queuemicrotask/index.md @@ -25,13 +25,13 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask --- {{APIRef("HTML DOM")}} -La méthode **`queueMicrotask()`**, 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. +La méthode **`queueMicrotask()`**, 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. 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. -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 [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). +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 [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). -L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. +L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu. @@ -44,7 +44,7 @@ Les micro-tâches sont particulièrement utiles pour les librairies et les frame ### Paramètres - `function` - - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. + - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. ### Valeur de retour @@ -58,7 +58,7 @@ self.queueMicrotask(() => { }) ``` -Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : +Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : ```js MyElement.prototype.loadData = function (url) { @@ -79,7 +79,7 @@ MyElement.prototype.loadData = function (url) { ## Lorsque queueMicrotask() n'est pas disponible -Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. +Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. ```js if (typeof window.queueMicrotask !== "function") { diff --git a/files/fr/web/api/range/createcontextualfragment/index.md b/files/fr/web/api/range/createcontextualfragment/index.md index d5e9c573f2..51d37771ef 100644 --- a/files/fr/web/api/range/createcontextualfragment/index.md +++ b/files/fr/web/api/range/createcontextualfragment/index.md @@ -3,7 +3,7 @@ title: Range.createContextualFragment() slug: Web/API/Range/createContextualFragment translation_of: Web/API/Range/createContextualFragment --- -La méthode **`Range.createContextualFragment()`** 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 `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. +La méthode **`Range.createContextualFragment()`** 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 `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. ## Syntaxe diff --git a/files/fr/web/api/range/detach/index.md b/files/fr/web/api/range/detach/index.md index c02aaa937a..4f5ae53467 100644 --- a/files/fr/web/api/range/detach/index.md +++ b/files/fr/web/api/range/detach/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Range/detach --- {{ApiRef("DOM")}} -La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. +La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. ## Syntaxe diff --git a/files/fr/web/api/range/selectnode/index.md b/files/fr/web/api/range/selectnode/index.md index eca4135b5a..ae46f4752f 100644 --- a/files/fr/web/api/range/selectnode/index.md +++ b/files/fr/web/api/range/selectnode/index.md @@ -19,7 +19,7 @@ La méthode `Range.selectNode()` définit le {{domxref ("Range")}} destiné à c ### Paramètres - _noeudDeReference_ - - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. + - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. ## Exemple diff --git a/files/fr/web/api/range/setstart/index.md b/files/fr/web/api/range/setstart/index.md index 6eb71bd8ca..15f73cf216 100644 --- a/files/fr/web/api/range/setstart/index.md +++ b/files/fr/web/api/range/setstart/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Range/setStart La méthode **`Range.setStart()`** définit la position de départ d'un objet [`Range`](/fr/docs/Web/API/Range). -Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. +Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. 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. diff --git a/files/fr/web/api/range/surroundcontents/index.md b/files/fr/web/api/range/surroundcontents/index.md index e157cd42f2..f422e72dcc 100644 --- a/files/fr/web/api/range/surroundcontents/index.md +++ b/files/fr/web/api/range/surroundcontents/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Range/surroundContents La méthode **`Range.surroundContents()`** déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du `range` spécifié. -Cette méthode est à peu près équivalente à : +Cette méthode est à peu près équivalente à : ```js newNode.appendChild(range.extractContents()); @@ -16,7 +16,7 @@ range.insertNode(newNode) Après déplacement, les bornes du `range` incluent `newNode`. -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. +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. ## Syntaxe diff --git a/files/fr/web/api/request/mode/index.md b/files/fr/web/api/request/mode/index.md index bc19ee5f28..f10d557e03 100644 --- a/files/fr/web/api/request/mode/index.md +++ b/files/fr/web/api/request/mode/index.md @@ -22,7 +22,7 @@ Une valeur {{domxref("RequestMode")}}. ## Exemple -Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: +Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: ```js var myRequest = new Request('flowers.jpg'); diff --git a/files/fr/web/api/request/request/index.md b/files/fr/web/api/request/request/index.md index b4b2872f72..bcc43cdab0 100644 --- a/files/fr/web/api/request/request/index.md +++ b/files/fr/web/api/request/request/index.md @@ -41,7 +41,7 @@ Le constructeur **`Request()`** crée un nouvel objet {{domxref("Request")}}. - `credentials`: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : `omit`, `same-origin`, ou `include`. La valeur par défaut est `omit`. Dans Chrome, la valeur par défaut est `same-origin` avant Chrome 47 et `include` à partir de Chrome 47. - `cache`: Le [mode de cache](/en-US/docs/Web/API/Request/cache) que vous voulez utiliser pour la requête. - `redirect`: Le mode de redirection à utiliser : `follow`, `error`, ou `manual`. Dans Chrome, le défaut est `manual` avant Chrome 47 et `follow` à partir de Chrome 47. - - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. + - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. - `integrity`: Contient la valeur d'[intégrité de la sous ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la requête (par ex.., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`). ## Erreurs @@ -93,7 +93,7 @@ Notez que vos pouvez aussi passer l'objet init dans l'appel à `fetch` pour obte ```js fetch(maRequete,monInit).then(function(reponse) { - ... + ... }); ``` diff --git a/files/fr/web/api/rtciceserver/index.md b/files/fr/web/api/rtciceserver/index.md index 9b51e6d84e..7adc70aea0 100644 --- a/files/fr/web/api/rtciceserver/index.md +++ b/files/fr/web/api/rtciceserver/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/RTCIceServer --- {{APIRef("WebRTC")}} -RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. +RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. ## Propriétés - {{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}} - - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. + - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. - {{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. + - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. - {{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}} - - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. + - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. - {{domxref("RTCIceServer.urls", "urls")}} - - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. + - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. - {{domxref("RTCIceServer.username", "username")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. + - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. -Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; 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. +Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; 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. > **Note :** Les anciennes versions de la spécification WebRTC incluent une propriété `url` au lieu de `urls`; 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. ## Constantes -### Enumeration RTCIceCredentialType +### Enumeration RTCIceCredentialType -L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. +L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. | Constante | Description | | ------------ | ----------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md index 8ef8585440..70f4712c1e 100644 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md @@ -46,10 +46,10 @@ Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire ```js var restartConfig = { iceServers: [{ - urls: "turn:asia.myturnserver.net", - username: "allie@oopcode.com", - credential: "topsecretpassword" - }] + urls: "turn:asia.myturnserver.net", + username: "allie@oopcode.com", + credential: "topsecretpassword" + }] }; myPeerConnection.setConfiguration(restartConfig); diff --git a/files/fr/web/api/screen_capture_api/index.md b/files/fr/web/api/screen_capture_api/index.md index 114b3d1d4a..a838aec0c6 100644 --- a/files/fr/web/api/screen_capture_api/index.md +++ b/files/fr/web/api/screen_capture_api/index.md @@ -42,7 +42,7 @@ L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une mé ### Interface MediaDevices - {{domxref("MediaDevices.getDisplayMedia()")}} - - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. + - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. ## Ajouts aux dictionnaires actuels @@ -51,7 +51,7 @@ L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit pa ### MediaTrackConstraints - {{domxref("MediaTrackConstraints.cursor")}} - - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. + - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. - {{domxref("MediaTrackConstraints.displaySurface")}} - : Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être `application`, `browser`, `monitor`, ou `window`. - {{domxref("MediaTrackConstraints.logicalSurface")}} @@ -86,7 +86,7 @@ Le dictionnaire suivant est difinit par l'API Screen Capture. ## Validation de Feature Policy -{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: +{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: ```html <iframe allow="display-capture" src="/some-other-document.html"> diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md index 0fe6ac1161..41e4baf91e 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md @@ -71,8 +71,8 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code >{{domxref("AudioContext.createScriptProcessor()")}}. - Noter que <code>le<em> AudioBuffer</em></code - ><code> retourné</code><em><code> </code></em>est seulement valide + Noter que le <em><code>AudioBuffer</em></code + > retourné est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em> </p> </td> @@ -99,7 +99,7 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilités navigateur diff --git a/files/fr/web/api/selection/collapse/index.md b/files/fr/web/api/selection/collapse/index.md index e965caa639..a9481d0ede 100644 --- a/files/fr/web/api/selection/collapse/index.md +++ b/files/fr/web/api/selection/collapse/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Selection/collapse --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. +La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. ## Syntaxe @@ -26,7 +26,7 @@ La méthode **`Selection.collapse()`** positionne la sélection en cours en un <!----> - _`offset`_ - - : Indique la position du curseur d'édition dans `parentNode`. + - : Indique la position du curseur d'édition dans `parentNode`. ## Exemples @@ -40,7 +40,7 @@ window.getSelection().collapse(body,0); | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | -| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | +| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | | {{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}} | {{Spec2('HTML Editing')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/selection/index.md b/files/fr/web/api/selection/index.md index a06b3a3314..62be1ee258 100644 --- a/files/fr/web/api/selection/index.md +++ b/files/fr/web/api/selection/index.md @@ -11,7 +11,7 @@ La classe de l'objet retourné par [`window.getSelection()`](Window/getSelection ### Description -Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : +Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : range = sel.getRangeAt(0); @@ -25,47 +25,47 @@ L'appel de la méthode [`toString()`](Selection/toString) renvoie le texte conte Autres mots clés utilisés dans cette section. - anchor (ancre) - - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. + - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. - focus (focus) - - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. + - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. - range (plage) - - : 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 [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. + - : 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 [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. ### Propriétés - [anchorNode](/fr/docs/Web/API/Selection/anchorNode) - : Renvoie le nœud d'où la sélection commence. - [anchorOffset](/fr/docs/Web/API/Selection/anchorOffset) - - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». + - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». - [focusNode](/fr/docs/Web/API/Selection/focusNode) - : Renvoie le nœud où la sélection se termine. - [focusOffset](/fr/docs/Web/API/Selection/focusOffset) - - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». + - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». - [isCollapsed](/fr/docs/Web/API/Selection/isCollapsed) - : Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position. - [rangeCount](/fr/docs/Web/API/Selection/rangeCount) - - : Renvoie le nombre de « plages » dans la sélection. + - : Renvoie le nombre de « plages » dans la sélection. ### Méthodes - [getRangeAt](/fr/docs/Web/API/Selection/getRangeAt) - - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. + - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. - [collapse](/fr/docs/Web/API/Selection/collapse) - : Réduit la sélection courante à un simple point. - [extend](/fr/docs/Web/API/Selection/extend) - - : Déplace le « focus » de la sélection à un endroit spécifié. + - : Déplace le « focus » de la sélection à un endroit spécifié. - [collapseToStart](/fr/docs/Web/API/Selection/collapseToStart) - - : Déplace le « focus » de la sélection au même point que l'« ancre ». + - : Déplace le « focus » de la sélection au même point que l'« ancre ». - [collapseToEnd](/fr/docs/Web/API/Selection/collapseToEnd) - - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. + - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. - [selectAllChildren](/fr/docs/Web/API/Selection/selectAllChildren) - : Ajoute tous les enfants d'un nœud spécifié à la sélection. - [addRange](/fr/docs/Web/API/Selection/addRange) - : Un objet range devant être ajouté à la sélection. - [removeRange](/fr/docs/Web/API/Selection/removeRange) - - : Supprime une « plage » de la sélection. + - : Supprime une « plage » de la sélection. - [removeAllRanges](/fr/docs/Web/API/Selection/removeAllRanges) - - : Supprime toutes les « plages » de la sélection. + - : Supprime toutes les « plages » de la sélection. - [deleteFromDocument](/fr/docs/Web/API/Selection/deleteFromDocument) - : Efface le contenu de la sélection du document. - [selectionLanguageChange](/fr/docs/Web/API/Selection/selectionLanguageChange) @@ -81,7 +81,7 @@ Autres mots clés utilisés dans cette section. ### Voir aussi -[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) +[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) ### Liens externes diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md index 23ce054696..83e8641441 100644 --- a/files/fr/web/api/selection/tostring/index.md +++ b/files/fr/web/api/selection/tostring/index.md @@ -25,7 +25,7 @@ Aucun. Cette méthode renvoie le texte sélectionné. -En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : +En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : alert(window.getSelection()) // Appel automatique alert(window.getSelection().toString()) // Appel explicite diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md index e9c5ff2191..7d9f8085e8 100644 --- a/files/fr/web/api/server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/index.md @@ -6,7 +6,7 @@ tags: - TopicStub translation_of: Web/API/Server-sent_events --- -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. +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. ## Documentation @@ -23,7 +23,7 @@ Habituellement, une page web doit envoyer une requête au serveur pour obtenir d ## Rubriques connexes -- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) +- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) ## Voir également diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md index aefa72a9a4..bfa9fc228e 100644 --- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md @@ -14,23 +14,23 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events --- {{DefaultAPISidebar("Server Sent Events")}} -Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. +Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. ## Recevoir des évènements du serveur -L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : +L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : ```js const evtSource = new EventSource("ssedemo.php"); ``` -Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : +Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : ```js const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); ``` -Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : +Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : ```js evtSource.onmessage = function(event) { @@ -44,7 +44,7 @@ evtSource.onmessage = function(event) { Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ `event` attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document. -On peut aussi écouter les évènements avec `addEventListener()` : +On peut aussi écouter les évènements avec `addEventListener()` : ```js evtSource.addEventListener("ping", function(event) { @@ -55,7 +55,7 @@ evtSource.addEventListener("ping", function(event) { }); ``` -Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. +Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. > **Attention :** **Lorsque HTTP/2 n'est pas utilisé**, 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 _par le navigateur_ et vaut 6 pour chaque origine (voir les bugs [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) et [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896)). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur `www.example1.com`, 6 autres pour tous les onglets sur `www.example2.com` (voir cette réponse [Stack Overflow](https://stackoverflow.com/a/5326159/1905229)). 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. @@ -63,7 +63,7 @@ Ce fragment de code est similaire au précédent, mais sera appelé automatiquem Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME `text/event-stream`. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (`\n`). Pour plus de détails sur le format du flux d'évènements, voir [la section ci-après](#event_stream_format). -Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : +Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : ```php date_default_timezone_set("America/New_York"); @@ -100,7 +100,7 @@ while (true) { } ``` -Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. +Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. 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. @@ -126,15 +126,15 @@ evtSource.close(); ## Format du flux d'évènements -Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). 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é. +Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). 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é. > **Note :** 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. -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. +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. ### Champs -Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : +Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : - `event` - : Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser `addEventListener()` pour écouter des évènements nommés. Le gestionnaire `onmessage` est appelé si aucun nom d'évènement n'est spécifié dans un message. diff --git a/files/fr/web/api/service_worker_api/index.md b/files/fr/web/api/service_worker_api/index.md index d8d0dc95ba..00935f63f5 100644 --- a/files/fr/web/api/service_worker_api/index.md +++ b/files/fr/web/api/service_worker_api/index.md @@ -101,7 +101,7 @@ Les service workers sont aussi destinés à être utilisés pour des choses tell - {{domxref("NotificationEvent") }} - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface `NotificationEvent` représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. - {{domxref("PeriodicSyncEvent")}} {{non-standard_inline}} - - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. + - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. - {{domxref("PeriodicSyncManager")}} {{non-standard_inline}} - : Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}. - {{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}} diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.md b/files/fr/web/api/service_worker_api/using_service_workers/index.md index ee19f610f3..18a42761de 100644 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.md +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.md @@ -27,13 +27,13 @@ Les service workers devraient finalement résoudre ces problèmes. La syntaxe du ## Préparatifs aux Service Workers -De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : +De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : -- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. +- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. - **Chrome Canary** : rendez-vous sur `chrome://flags` et activer `experimental-web-platform-features`; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.) - **Opera** : rendez-vous sur `opera://flags` et activer `Support for ServiceWorker`; redémarrer le navigateur. -Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. +Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. ## Architecture de base @@ -80,7 +80,7 @@ myFunction().then(function(value) { Dans le premier exemple, on doit attendre que l'exécution de `myFunction()` retourne `value` avant de poursuivre l'exécution de tout autre code. Dans le second exemple, `myFunction()` retourne une promesse pour `value`, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de `then` s'exécutera, de manière asynchrone. -Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. +Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du [test de promesses](https://github.com/mdn/promises-test) pour le code source, ou [le voir fonctionner en direct](https://mdn.github.io/promises-test/).) @@ -127,18 +127,18 @@ imgLoad('myLittleVader.jpg').then(function(response) { }); ``` -A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. +A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. Le tout se déroule de manière asynchrone. -> **Note :** il est possible d'assembler des appels de promesse, par exemple: +> **Note :** il est possible d'assembler des appels de promesse, par exemple: > `myPromise().then(success, failure).then(success).catch(failure);` > **Note :** pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/). ## Démo de service workers -Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), 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é ! +Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), 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é !  @@ -196,35 +196,35 @@ Après l'enregistrement du service worker, le navigateur tente d'installer puis 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. -> **Note :** 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 [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). +> **Note :** 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 [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). Commençons cette section par l'examen d'un exemple de code — c'est le [premier bloc présent dans le service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18): ```js this.addEventListener('install', function(event) { - event.waitUntil( - caches.open('v1').then(function(cache) { - return cache.addAll([ - '/sw-test/', - '/sw-test/index.html', - '/sw-test/style.css', - '/sw-test/app.js', - '/sw-test/image-list.js', - '/sw-test/star-wars-logo.jpg', - '/sw-test/gallery/', - '/sw-test/gallery/bountyHunters.jpg', - '/sw-test/gallery/myLittleVader.jpg', - '/sw-test/gallery/snowTroopers.jpg' - ]); - }) - ); + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); }); ``` -1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. +1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. 2. A l'intérieur de `waitUntil()` la méthode [`caches.open()`](/en-US/docs/Web/API/CacheStorage/open) est utilisée pour créer un nouveau cache appelé `v1`, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même `addAll()` sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache. 3. Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient. -4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) +4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) > **Note :** [localStorage](/fr/docs/Web/API/Web_Storage_API) 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. @@ -256,7 +256,7 @@ this.addEventListener('fetch', function(event) { }); ``` -`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. +`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. Voici quelques autres options disponibles pour que la magie opère (voir la [documentation de l'API Fetch](/fr/docs/Web/API/Fetch_API) pour plus d'informations sur les objets [`Request`](/fr/docs/Web/API/Request) et [`Response`](/fr/docs/Web/API/Response)). @@ -332,7 +332,7 @@ this.addEventListener('fetch', function(event) { Ici on retourne la requête réseau par défaut au moyen de `return fetch(event.request)`, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant `caches.open('v1')`; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, `cache.put()` est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de `event.request`, et la réponse est alors clonée avec `response.clone()` et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert. -Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. +Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. 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 : @@ -347,8 +347,8 @@ this.addEventListener('fetch', function(event) { }); }); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - }) + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) ); }); ``` @@ -361,18 +361,18 @@ Ce code utilise un chaînage de promesses plus standard et retourne la réponse ```js this.addEventListener('fetch', function(event) { - var response; - event.respondWith(caches.match(event.request).catch(function() { - return fetch(event.request); - }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); - }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - })); + var response; + event.respondWith(caches.match(event.request).catch(function() { + return fetch(event.request); + .then(functio + response = r; + cac + c + }); + return response.clone(); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + })); }); ``` diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md index ee79380e4f..26f509022a 100644 --- a/files/fr/web/api/serviceworker/index.md +++ b/files/fr/web/api/serviceworker/index.md @@ -13,65 +13,65 @@ translation_of: Web/API/ServiceWorker --- {{APIRef("Service Workers API")}} -L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. +L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. -Un objet `ServiceWorker` 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). +Un objet `ServiceWorker` 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). -L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. +L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. ## Propriétés -_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ +_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ - {{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}} - - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. + - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. - {{domxref("ServiceWorker.state")}} {{readonlyinline}} - : Retourne le status du service worker. Il retourne l'une des valeurs suivantes : `installing`, `installed,` `activating`, `activated`, or `redundant`. ### Gestionnaires d'évènements - {{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}} - - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. + - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Méthodes -L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* +L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* ## Exemples -Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker - .register('service-worker.js', { - scope: './' - }) - .then(({ installing, waiting, active }) => { - let serviceWorker - if (installing) { - serviceWorker = installing - document.querySelector('#kind').textContent = 'installé' - } else if (waiting) { - serviceWorker = waiting - document.querySelector('#kind').textContent = 'en attente' - } else if (active) { - serviceWorker = active - document.querySelector('#kind').textContent = 'actif' - } - if (serviceWorker) { - // logState(serviceWorker.state); - serviceWorker.addEventListener('statechange', (e) => { - // logState(e.target.state); - }) - } - }) - .catch((error) => { - // L'enregistrement s'est mal déroulé. Le fichier service-worker.js - // est peut-être indisponible ou contient une erreur. - }) + navigator.serviceWorker + .register('service-worker.js', { + scope: './' + }) + .then(({ installing, waiting, active }) => { + let serviceWorker + if (installing) { + serviceWorker = installing + document.querySelector('#kind').textContent = 'installé' + else if (waiting) { + serviceWorker = waiting + document.querySelector + } else if (active) { + serviceWorker = active + document.querySelector('#kind').textContent = 'actif' + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', (e) => { + // logState(e.target.state); + }) + } + }) + .catch((error) => { + // L'enregistrement s'est mal déroulé. Le fichier service-worker.js + // est peut-être indisponible ou contient une erreur. + }) } else { - // Le navigateur ne supporte pas les service workers. + // Le navigateur ne supporte pas les service workers. } ``` diff --git a/files/fr/web/api/serviceworker/onstatechange/index.md b/files/fr/web/api/serviceworker/onstatechange/index.md index 4089f7a837..f499cdf8bb 100644 --- a/files/fr/web/api/serviceworker/onstatechange/index.md +++ b/files/fr/web/api/serviceworker/onstatechange/index.md @@ -9,16 +9,16 @@ translation_of: Web/API/ServiceWorker/onstatechange --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. +Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Syntax ServiceWorker.onstatechange = function(statechangeevent) { ... } - ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) + ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) ## Examples -Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js var serviceWorker; @@ -41,16 +41,16 @@ if (serviceWorker) { } ``` -Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : +Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : ```js navigator.serviceWorker.register(..).then(function(swr) { swr.installing.state == "installé" swr.installing.onstatechange = function() { swr.installing == null; - // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement + // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement // statechange est mis en queue, pendant que le worker sous jacent est peut être en - // état d'attente et sera immédiatement activé si possible. + // état d'attente et sera immédiatement activé si possible. } }) ``` diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md index c7de9a158f..ebf579b6f5 100644 --- a/files/fr/web/api/serviceworkercontainer/index.md +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -12,7 +12,7 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo ## Propriétés - {{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}} - - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. + - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. <!----> @@ -33,9 +33,9 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo - {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} - : Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un `scriptURL` donné. - {{domxref("ServiceWorkerContainer.getRegistration()")}} - - : 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 [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : 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 [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). - {{domxref("ServiceWorkerContainer.getRegistrations()")}} - - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). ## Exemples @@ -75,6 +75,6 @@ if ('serviceWorker' in navigator) { - [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Service workers : exemple basique](https://github.com/mdn/sw-test) -- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md index c7c1d85c5f..fa991f40ca 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.md +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -49,18 +49,18 @@ L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). L ```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( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` @@ -70,37 +70,37 @@ Sinon, si ce code était inclus dans une page à `example.com/product/descriptio ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: './' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: './' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` 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. -Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. +Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` diff --git a/files/fr/web/api/serviceworkerglobalscope/index.md b/files/fr/web/api/serviceworkerglobalscope/index.md index c16273acd7..6ec1286699 100644 --- a/files/fr/web/api/serviceworkerglobalscope/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker. -Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. +Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}. diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md index c5e9dbe111..209e6ee190 100644 --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick La propriété **`ServiceWorkerGlobalScope.onnotificationclick`** 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()")}}. -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 `Notification` lui-même. +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 `Notification` lui-même. > **Note :** Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur. diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md index 9fa64a83ab..af9c89e7f5 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.md +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -25,7 +25,7 @@ Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | -| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | +| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md index 7e9aaa2230..beb503bdea 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md @@ -19,7 +19,7 @@ La méthode **`getNotifications()`** de l'interface {{domxref ("ServiceWorkerReg ## Syntaxe - serviceWorkerRegistration.getNotifications(options) + serviceWorkerRegistration.getNotifications(options) .then(function(notificationsList) { ... }) ### Paramétres diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md index a261d8632d..e44da329db 100644 --- a/files/fr/web/api/serviceworkerregistration/index.md +++ b/files/fr/web/api/serviceworkerregistration/index.md @@ -37,57 +37,57 @@ _Also implements properties from its parent interface,_ {{domxref("EventTarget") - {{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}} - : Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration. - {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. -- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} - - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. + - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. +- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} + - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. ### Unimplemented properties - {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. + - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. ### Event handlers - {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}} - - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. + - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. ## Methods _Also implements methods from its parent interface,_ {{domxref("EventTarget")}}. - {{domxref("ServiceWorkerRegistration.getNotifications()")}} - - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. + - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. - {{domxref("ServiceWorkerRegistration.showNotification()")}} - : Displays the notification with the requested title. - {{domxref("ServiceWorkerRegistration.update()")}} - : Checks the server for an updated version of the service worker without consulting caches. - {{domxref("ServiceWorkerRegistration.unregister()")}} - - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. + - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. ## Examples -In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. +In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('/sw.js') - .then(function(registration) { + navigator.serviceWorker.register('/sw.js') + .then(function(registration) { registration.addEventListener('updatefound', function() { - // If updatefound is fired, it means that there's - // a new service worker being installed. - var installingWorker = registration.installing; - console.log('A new service worker is being installed:', - installingWorker); - - // You can listen for changes to the installing service worker's - // state via installingWorker.onstatechange - }); - }) - .catch(function(error) { - console.log('Service worker registration failed:', error); - }); + // If updatefound is fired, it means that there's + // a new service worker being installed. + var installingWorker = registration.installing; + console.log('A new service worker is being installed:', + installingWorker); + + // You can listen for changes to the installing service worker's + // state via installingWorker.onstatechange + }); + }) + .catch(function(error) { + console.log('Service worker registration failed:', error); + }); } else { - console.log('Service workers are not supported.'); + console.log('Service workers are not supported.'); } ``` @@ -97,8 +97,8 @@ if ('serviceWorker' in navigator) { | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}} | {{Spec2('Service Workers')}} | Initial definition. | | {{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}} | {{Spec2('Push API')}} | Adds the {{domxref("PushManager","pushManager")}} property. | -| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | -| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | +| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | +| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | ## Browser compatibility diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md index 99530c86a4..2b618c5922 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -20,7 +20,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi ## Syntaxe - serviceWorkerRegistration.showNotification(title, [options]) + serviceWorkerRegistration.showNotification(title, [options]) ### Paramètres @@ -32,7 +32,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `actions`: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: - - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. + - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. - title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur. - icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action. @@ -49,7 +49,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`. - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux. - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification. - - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. + - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. ### Valeur de retour diff --git a/files/fr/web/api/settimeout/index.md b/files/fr/web/api/settimeout/index.md index cf40ee8e6e..cb7eba51c6 100644 --- a/files/fr/web/api/settimeout/index.md +++ b/files/fr/web/api/settimeout/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- {{APIRef("HTML DOM")}} -La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. +La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. ## Syntaxe @@ -36,7 +36,7 @@ La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorke La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à `setTimeout()`. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné. -Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. +Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à `setTimeout()` ou `setInterval()` pour un même objet (une fenêtre ou un _worker_). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants. @@ -210,7 +210,7 @@ setTimeout(monTableau.maMéthode, 1500, '1'); // affiche "undefined" après 1.5 seconde ``` -La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. +La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. ```js setTimeout.call(monTableau, monTableau.maMéthode, 2000); @@ -277,7 +277,7 @@ setTimeout(cb, 0); setInterval(f, 0); ``` -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 `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). +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 `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). [Par le passé](http://code.google.com/p/chromium/issues/detail?id=792#c10), certains navigateurs implémentaient cette limite différemment (pour les appels à `setInterval()` quelle que soit leur provenance ou lorsqu'un appel `setTimeout()` était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication. @@ -291,9 +291,9 @@ Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postM 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. -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 `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). +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 `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). -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. +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. > **Note :** Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan. diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md index dc36979082..c03b0f11c9 100644 --- a/files/fr/web/api/sharedworker/index.md +++ b/files/fr/web/api/sharedworker/index.md @@ -38,7 +38,7 @@ _Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente ## Exemple -Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), 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. +Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), 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. L'extrait de code suivant illustre la création d'un objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci : @@ -71,7 +71,7 @@ first.onchange = function() { } ``` -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é `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. +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é `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. ```js onconnect = function(e) { diff --git a/files/fr/web/api/sharedworker/port/index.md b/files/fr/web/api/sharedworker/port/index.md index 8e25c1c7f8..79d9c7b727 100644 --- a/files/fr/web/api/sharedworker/port/index.md +++ b/files/fr/web/api/sharedworker/port/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/SharedWorker/port --- {{APIRef("Web Workers API")}} -La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. +La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. ## Syntaxe diff --git a/files/fr/web/api/speechrecognition/index.md b/files/fr/web/api/speechrecognition/index.md index 6e11ac7426..4be66b9949 100644 --- a/files/fr/web/api/speechrecognition/index.md +++ b/files/fr/web/api/speechrecognition/index.md @@ -19,11 +19,11 @@ translation_of: Web/API/SpeechRecognition - {{domxref("SpeechRecognition.grammars")}} - : Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par `SpeechRecognition`. - {{domxref("SpeechRecognition.lang")}} - - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. + - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. - {{domxref("SpeechRecognition.continuous")}} - : Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (`false`.) - {{domxref("SpeechRecognition.interimResults")}} - - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) + - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) - {{domxref("SpeechRecognition.maxAlternatives")}} - : Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1. - {{domxref("SpeechRecognition.serviceURI")}} @@ -69,7 +69,7 @@ _`SpeechRecognition` also inherits methods from its parent interface, {{domxref( In our simple [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the `SpeechRecognition` instance using the {{domxref("SpeechRecognition.grammars")}} property. -After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. +After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. ```js var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' diff --git a/files/fr/web/api/speechsynthesisutterance/index.md b/files/fr/web/api/speechsynthesisutterance/index.md index 02dc3bd9e6..5f9c15cf29 100644 --- a/files/fr/web/api/speechsynthesisutterance/index.md +++ b/files/fr/web/api/speechsynthesisutterance/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/SpeechSynthesisUtterance --- {{APIRef("Web Speech API")}}{{SeeCompatTable}} -L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). +L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). ## Constructor - {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}} - - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. + - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. ## Properties -_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ +_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ - {{domxref("SpeechSynthesisUtterance.lang")}} - : Gets and sets the language of the utterance. @@ -48,16 +48,16 @@ _`SpeechSynthesisUtterance` hérite également des propriétés de son interfac ## Examples -Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. -Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. +Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. +Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. L'utilisateur pourra ensuite choisir la voix qu'il souhaite. -À l'intérieur du handler `inputForm.onsubmit` : +À l'intérieur du handler `inputForm.onsubmit` : -- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); -- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; -- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; -- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} +- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); +- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; +- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; +- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} ```js var synth = window.speechSynthesis; diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md index a4540f154c..a26f7064e8 100644 --- a/files/fr/web/api/storage/clear/index.md +++ b/files/fr/web/api/storage/clear/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/clear --- {{APIRef("Web Storage API")}} -La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. +La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. ## Syntaxe @@ -37,7 +37,7 @@ function peuplerLeStockage() { } ``` -> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. +> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. ## Spécifications @@ -51,4 +51,4 @@ function peuplerLeStockage() { ## Voir aussi -- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md index 4563ca4cca..1900adb9d7 100644 --- a/files/fr/web/api/storage/getitem/index.md +++ b/files/fr/web/api/storage/getitem/index.md @@ -58,4 +58,4 @@ function setStyles() { ## Voir aussi -[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md index 4ae4cf6946..5cba3a3196 100644 --- a/files/fr/web/api/storage/index.md +++ b/files/fr/web/api/storage/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/Storage --- {{APIRef("Web Storage API")}} -L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. +L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. -Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. +Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. ## Propriétés - {{domxref("Storage.length")}} {{readonlyInline}} - - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. + - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. ## Méthodes - {{domxref("Storage.key()")}} - - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. + - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. <!----> @@ -38,7 +38,7 @@ Si vous voulez manipuler le stockage de session pour un domaine, appelez la mét ## Exemples -Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. +Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. ```js if(!localStorage.getItem('bgcolor')) { diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md index f108c70da3..fb2632992b 100644 --- a/files/fr/web/api/storage/key/index.md +++ b/files/fr/web/api/storage/key/index.md @@ -35,7 +35,7 @@ La fonction suivante parcours les éléments présents dans le local storage. function forEachKey(callback) { for (var i = 0; i < localStorage.length; i++) { callback(localStorage.key(i)); - } + } } ``` @@ -43,11 +43,11 @@ function forEachKey(callback) { ## Autre exemple -La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. +La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. ```js for (var i = 0; i < localStorage.length; i++) { - console.log(localStorage.getItem(localStorage.key(i))); + console.log(localStorage.getItem(localStorage.key(i))); } ``` @@ -55,7 +55,7 @@ for (var i = 0; i < localStorage.length; i++) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md index a2ea7ab711..31157d56ef 100644 --- a/files/fr/web/api/storage/length/index.md +++ b/files/fr/web/api/storage/length/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/length --- {{APIRef("Web Storage API")}} -La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. +La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. ## Syntaxe @@ -35,13 +35,13 @@ function populateStorage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md index add1e6b954..ee22988713 100644 --- a/files/fr/web/api/storage/removeitem/index.md +++ b/files/fr/web/api/storage/removeitem/index.md @@ -45,11 +45,11 @@ Nous pouvons également faire ceci avec le stockage de session. ```js function populateStorage() { - sessionStorage.setItem('bgcolor', 'red'); - sessionStorage.setItem('font', 'Helvetica'); + sessionStorage.setItem('bgcolor', 'red'); + sessionStorage.setItem('font', 'Helvetica'); sessionStorage.setItem('image', 'myCat.png'); - sessionStorage.removeItem('image'); + sessionStorage.removeItem('image'); } ``` @@ -67,4 +67,4 @@ function populateStorage() { ## Voir aussi -[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md index da20ec878f..d3d89d6225 100644 --- a/files/fr/web/api/storage/setitem/index.md +++ b/files/fr/web/api/storage/setitem/index.md @@ -34,7 +34,7 @@ Par conséquent les développeurs devraient être sûrs de toujours de **systém ## Exemple -La fonction suivante crée trois éléments à l'intérieur du stockage local. +La fonction suivante crée trois éléments à l'intérieur du stockage local. ```js function remplissageStockage() { @@ -44,7 +44,7 @@ function remplissageStockage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md index daf154aa13..4e395f8c2f 100644 --- a/files/fr/web/api/storage_api/index.md +++ b/files/fr/web/api/storage_api/index.md @@ -9,15 +9,15 @@ Le standard _Storage_ définit un système de stockage commun et partagé utilis {{AvailableInWorkers}} -Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : - -- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; -- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; -- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; -- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; -- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; -- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; -- [les données de notification](/fr/docs/Web/API/Notifications_API) ; +Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : + +- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; +- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; +- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; +- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; +- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; +- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; +- [les données de notification](/fr/docs/Web/API/Notifications_API) ; - d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues. ## Unités de stockage de site @@ -26,15 +26,15 @@ Le système de stockage de site décrit par le standard Storage, et avec lequel  -- 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. -- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. -- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. +- 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. +- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. +- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. -Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. +Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. ## Modes de boîte -Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : +Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : - `"best-effort"` - : L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, _mais n’avertira pas l’utilisateur ou l’utilisatrice_ si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage. @@ -49,13 +49,13 @@ Si le site ou l’application a la permission sur la fonctionnalité **`"persist > **Note :** Voir [Using the Permissions API](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API) pour plus de détails sur l’obtension et la gestion des permissions. -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. +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. -Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. +Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. ## Estimations de quota et d’usage -L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : +L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : - Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting. - La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées. @@ -63,11 +63,11 @@ L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la qua Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités. -Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : +Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : ```js navigator.storage.estimate().then(estimate => { - // estimate.quota est le quota estimé + // estimate.quota est le quota estimé // estimate.usage est le nombre estimé d’octets utilisés }); ``` diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 4ed46854c1..63afb6307c 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -17,7 +17,7 @@ Aucun. ### Valeur de retour -Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. +Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. Il est possible de constater que le `quota` 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. diff --git a/files/fr/web/api/storagemanager/index.md b/files/fr/web/api/storagemanager/index.md index f2d0ddb3ae..ed5b77ee5e 100644 --- a/files/fr/web/api/storagemanager/index.md +++ b/files/fr/web/api/storagemanager/index.md @@ -25,9 +25,9 @@ The **`StorageManager`** interface of the the [Storage API](/en-US/docs/Web/API/ - {{domxref("StorageManager.estimate()")}} {{securecontext_inline}} - : Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin. - {{domxref("StorageManager.persist()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. - {{domxref("StorageManager.persisted()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. ## Specifications diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md index f644f15c11..bc9f3f6a71 100644 --- a/files/fr/web/api/storagemanager/persist/index.md +++ b/files/fr/web/api/storagemanager/persist/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persist().then(function(persistent) { - if (persistent) - console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); - else - console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + navigator.storage.persist().then(function(persistent) { + if (persistent) + console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); + else + console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); + }); ``` ## Spécifications diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md index 05ef2cd5df..5f80ea526f 100644 --- a/files/fr/web/api/storagemanager/persisted/index.md +++ b/files/fr/web/api/storagemanager/persisted/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persisted().then(function(persistent) { + navigator.storage.persisted().then(function(persistent) { if (persistent) console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); else console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + }); ``` ## Spécifications diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md index 437d2d3799..b6b186a2df 100644 --- a/files/fr/web/api/streams_api/index.md +++ b/files/fr/web/api/streams_api/index.md @@ -21,7 +21,7 @@ Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence L'usage basique des <i lang="en">Streams</i> s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par une [requête `fetch`](/fr/docs/Web/API/fetch) réussie peut être exposé en tant que [`ReadableStream`](/fr/docs/Web/API/ReadableStream) — vous pourrez ainsi le lire en utilisant un lecteur créé par [`ReadableStream.getReader()`](/fr/docs/Web/API/ReadableStream/getReader), l'annuler avec [`ReadableStream.cancel()`](/fr/docs/Web/API/ReadableStream/cancel), etc. -Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). +Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}. @@ -32,7 +32,7 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Readable streams - {{domxref("ReadableStream")}} - - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). + - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). - {{domxref("ReadableStreamDefaultReader")}} - : Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch). - {{domxref("ReadableStreamDefaultController")}} @@ -41,11 +41,11 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Writable streams - {{domxref("WritableStream")}} - - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. + - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. - {{domxref("WritableStreamDefaultWriter")}} - : Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible. - {{domxref("WritableStreamDefaultController")}} - - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. + - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. ### Related stream APIs and operations diff --git a/files/fr/web/api/stylesheetlist/index.md b/files/fr/web/api/stylesheetlist/index.md index 1714af3627..a89ab8a939 100644 --- a/files/fr/web/api/stylesheetlist/index.md +++ b/files/fr/web/api/stylesheetlist/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/StyleSheetList --- {{APIRef("CSSOM")}} -L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. +L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. -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")}}. +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")}}. ## Exemple diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md index 2a3b3b4098..1bb6c06418 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.md +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -26,7 +26,7 @@ Il prend en argument un identifiant pour l'algorithme de condensé et les donné ### Valeur retournée -- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. +- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. ## Algorithmes supportés diff --git a/files/fr/web/api/subtlecrypto/index.md b/files/fr/web/api/subtlecrypto/index.md index 261e638d57..c7859cee9c 100644 --- a/files/fr/web/api/subtlecrypto/index.md +++ b/files/fr/web/api/subtlecrypto/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/SubtleCrypto --- {{APIRef("Web Crypto API")}}{{SecureContext_header}} -The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. +The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. > **Attention :** 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. > @@ -73,23 +73,23 @@ These are the functions you can use to implement security features such as priva ### Key management functions -Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. +Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. #### Generating and deriving keys -The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. +The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. The difference is that `generateKey()` will generate a new distinct key value each time you call it, while `deriveKey()` derives a key from some initial keying material. If you provide the same keying material to two separate calls to `deriveKey()`, you will get two `CryptoKey` objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data. #### Importing and exporting keys -To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. +To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. -The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. +The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. -If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". +If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". -The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. +The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. #### Storing keys diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md index d83db2e9b8..b265788bbb 100644 --- a/files/fr/web/api/svgelement/index.md +++ b/files/fr/web/api/svgelement/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/SVGElement --- ## Interface d'élément SVG -Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. +Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. ### Vue d'ensemble de l'interface @@ -41,7 +41,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du </td> </tr> <tr> - <th scope="row">Normative document</th> + <th scope="row">Normative document</th> <td> <a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" >SVG 1.1 (2nd Edition)</a @@ -83,7 +83,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément {{ SVGElement("svg") }} parent le plus près. - <code>Null</code> si l'élément est l'élément svg le plus à + <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -94,7 +94,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent - {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si + {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -104,7 +104,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du ## Méthodes -L'interface `SVGElement` ne possède aucune méthode spécifique. +L'interface `SVGElement` ne possède aucune méthode spécifique. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/svgmatrix/index.md b/files/fr/web/api/svgmatrix/index.md index a90c8251a9..1919f02d01 100644 --- a/files/fr/web/api/svgmatrix/index.md +++ b/files/fr/web/api/svgmatrix/index.md @@ -225,7 +225,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <p> Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) - atan(y/x). La direction du vecteur (x, y) détermine si la valeur + atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée. </p> <p><strong>Exceptions :</strong></p> @@ -245,7 +245,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice + Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante. </div> </td> @@ -257,7 +257,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice + Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante. </div> </td> diff --git a/files/fr/web/api/svgrectelement/index.md b/files/fr/web/api/svgrectelement/index.md index 4acf6db261..6c6c24bf22 100644 --- a/files/fr/web/api/svgrectelement/index.md +++ b/files/fr/web/api/svgrectelement/index.md @@ -15,17 +15,17 @@ _Cette interface hérite aussi des propriétés de_ _{{domxref("SVGGeometryEleme - {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} + - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. +- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné. ## Méthode diff --git a/files/fr/web/api/svgtitleelement/index.md b/files/fr/web/api/svgtitleelement/index.md index 1f3ac78830..5541b72901 100644 --- a/files/fr/web/api/svgtitleelement/index.md +++ b/files/fr/web/api/svgtitleelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/SVGTitleElement ## Interface DOM de l'élément SVG `title` -L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. +L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. ### Aperçu de l'interface @@ -48,7 +48,7 @@ L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title ## Propriétés -L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. +L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. ## Méthodes diff --git a/files/fr/web/api/syncmanager/index.md b/files/fr/web/api/syncmanager/index.md index 2bb4d1de86..004fbdbdd1 100644 --- a/files/fr/web/api/syncmanager/index.md +++ b/files/fr/web/api/syncmanager/index.md @@ -14,9 +14,9 @@ None. ## Methods - {{domxref("SyncManager.register")}} - - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} + - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} - {{domxref("SyncManager.getTags")}} - - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. + - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. ## Specifications diff --git a/files/fr/web/api/text/index.md b/files/fr/web/api/text/index.md index d12428b709..84891f45bf 100644 --- a/files/fr/web/api/text/index.md +++ b/files/fr/web/api/text/index.md @@ -8,9 +8,9 @@ translation_of: Web/API/Text --- {{ApiRef("DOM")}} -L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. +L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. -Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. +Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. {{InheritanceDiagram}} @@ -28,7 +28,7 @@ _Hérite des propriétés de son parent {{domxref("CharacterData")}}._ - {{domxref("Text.wholeText")}} {{readonlyInline}} - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le texte de tous les noeuds `Text` adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document. - {{domxref("Text.assignedSlot")}} {{readonlyinline}} - - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. + - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. ## Méthodes diff --git a/files/fr/web/api/text/splittext/index.md b/files/fr/web/api/text/splittext/index.md index 079275794c..fa55a42f87 100644 --- a/files/fr/web/api/text/splittext/index.md +++ b/files/fr/web/api/text/splittext/index.md @@ -11,7 +11,7 @@ Après la séparation, le nœud actuel contient tout le texte jusqu’à l’ind Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}. -Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. +Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. ## Syntaxe @@ -60,4 +60,4 @@ Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deu ## Voir aussi - L’interface {{domxref("Text")}} à laquelle cette méthode appartient. -- La méthode opposée : {{domxref("Node.normalize")}}. +- La méthode opposée : {{domxref("Node.normalize")}}. diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md index 6c9c867c62..c7cc289cd8 100644 --- a/files/fr/web/api/textencoder/index.md +++ b/files/fr/web/api/textencoder/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/TextEncoder **`TextEncoder`** 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 [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/en-US/Add-ons/Code_snippets/StringView). -> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). 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). +> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). 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). > **Note :** Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans [GitHub](https://github.com/inexorabletash/text-encoding). @@ -39,66 +39,66 @@ _L'interface `TextEncoder` n'hérite d'aucune propriété._ ## Prothèse d'émulation -La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. +La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. ```js if (typeof TextEncoder === "undefined") { - TextEncoder=function TextEncoder(){}; - TextEncoder.prototype.encode = function encode(str) { - "use strict"; - var Len = str.length, resPos = -1; - // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 - // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's - // have an auto expanding length and 1.5x should be just the right balance for most uses. - var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); - for (var point=0, nextcode=0, i = 0; i !== Len; ) { - point = str.charCodeAt(i), i += 1; - if (point >= 0xD800 && point <= 0xDBFF) { - if (i === Len) { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; break; - } - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - nextcode = str.charCodeAt(i); - if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { - point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; - i += 1; - if (point > 0xffff) { - resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - continue; - } - } else { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; - } - } - if (point <= 0x007f) { - resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; - } else if (point <= 0x07ff) { - resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } else { - resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } - } - if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); - // else // IE 6-9 - resArr.length = resPos + 1; // trim off extra weight - return resArr; - }; - TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; - try { // Object.defineProperty only works on DOM prototypes in IE8 - Object.defineProperty(TextEncoder.prototype,"encoding",{ - get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; + TextEncoder=function TextEncoder(){}; + TextEncoder.prototype.encode = function encode(str) { + "use strict"; + var Len = str.length, resPos = -1; + // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 + // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's + // have an auto expanding length and 1.5x should be just the right balance for most uses. + var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); + for (var point=0, nextcode=0, i = 0; i !== Len; ) { + point = str.charCodeAt(i), i += 1; + if (point >= 0xD800 && point <= 0xDBFF) { + if (i === Len) { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; break; + } + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + nextcode = str.charCodeAt(i); + if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { + point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; + i += 1; + if (point > 0xffff) { + resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + continue; + } + e { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; + } + } + if (point <= 0x007f) { + resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; + se if (point <= 0x07ff) { + resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); + esArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0 + else { + resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + } + } + if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); + // else // IE 6-9 + resArr.length = resPos + 1; // trim off extra weight + return resArr; + }; + TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; + try { // Object.defineProperty only works on DOM prototypes in IE8 + Object.defineProperty(TextEncoder.prototype,"encoding",{ + get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; else throw TypeError("Illegal invocation");} - }); - } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } - if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; + }); + } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } + if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; } ``` diff --git a/files/fr/web/api/textencoder/textencoder/index.md b/files/fr/web/api/textencoder/textencoder/index.md index b68625b0ff..2cb8bc1577 100644 --- a/files/fr/web/api/textencoder/textencoder/index.md +++ b/files/fr/web/api/textencoder/textencoder/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/TextEncoder/TextEncoder --- {{APIRef("Encoding API")}} -Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. +Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. ## Syntaxe diff --git a/files/fr/web/api/textmetrics/index.md b/files/fr/web/api/textmetrics/index.md index 218af5eb3c..f0e977fb64 100644 --- a/files/fr/web/api/textmetrics/index.md +++ b/files/fr/web/api/textmetrics/index.md @@ -15,29 +15,29 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Propriétés - {{domxref("TextMetrics.width")}} {{readonlyInline}} - - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. + - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. - {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. - {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. ## Spécifications @@ -51,5 +51,5 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Voir aussi -- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. -- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} +- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. +- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} diff --git a/files/fr/web/api/textmetrics/width/index.md b/files/fr/web/api/textmetrics/width/index.md index 4ee47b6d47..72c26cdc69 100644 --- a/files/fr/web/api/textmetrics/width/index.md +++ b/files/fr/web/api/textmetrics/width/index.md @@ -25,7 +25,7 @@ La propriété en lecture seule **TextMetrics.width** contient en pixels CSS la <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canvas = document.getElementById("canevas"); @@ -39,7 +39,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md index 24e46891d4..17616679e1 100644 --- a/files/fr/web/api/timeranges/index.md +++ b/files/fr/web/api/timeranges/index.md @@ -17,11 +17,11 @@ translation_of: Web/API/TimeRanges {{ gecko_minversion_header("2.0") }} -L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. +L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. -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. +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. -Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (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). +Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (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). ### Propriétés @@ -39,7 +39,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- </td> <td> <p> - Le nombre de plages de temps contenues dans l'objet TimeRanges. + Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>. </p> </td> @@ -54,7 +54,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- - {{ domxref("TimeRanges.start") }} - : Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. - {{ domxref("TimeRanges.end") }} - - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. + - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. ### Spécification diff --git a/files/fr/web/api/touch_events/index.md b/files/fr/web/api/touch_events/index.md index 5fcaf9e3f0..92ed60cc86 100644 --- a/files/fr/web/api/touch_events/index.md +++ b/files/fr/web/api/touch_events/index.md @@ -27,7 +27,7 @@ Afin de fournir un support de qualité pour les interfaces tactiles, les événe - {{ domxref("TouchList") }} - : Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface. - {{ domxref("DocumentTouch") }} - - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. + - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. ## Exemple @@ -198,7 +198,7 @@ Cette section fournit quelques astuces supplémentaires pour gérer les événem ### Gérer les clics -Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) +Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) ```js function onTouch(evt) { diff --git a/files/fr/web/api/transferable/index.md b/files/fr/web/api/transferable/index.md index 0a86bfe7a1..54a9b45670 100644 --- a/files/fr/web/api/transferable/index.md +++ b/files/fr/web/api/transferable/index.md @@ -15,7 +15,7 @@ C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit > **Note :** L'interface `Transferable` n'existe plus pour longtemps. La fonctionnalité des objets `Transferable` existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu `[Transferable]` {{Glossary("WebIDL")}}) -Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. +Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. ## Propriétés diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.md b/files/fr/web/api/treewalker/expandentityreferences/index.md index 32bed4b615..2d77e919d3 100644 --- a/files/fr/web/api/treewalker/expandentityreferences/index.md +++ b/files/fr/web/api/treewalker/expandentityreferences/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/TreeWalker/expandEntityReferences La propriété en lecture seule **`TreeWalker.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}. -Si la valeur est `false` (_faux_), 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é. +Si la valeur est `false` (_faux_), 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é. ## Syntaxe diff --git a/files/fr/web/api/treewalker/whattoshow/index.md b/files/fr/web/api/treewalker/whattoshow/index.md index b7f4dd47c1..905ddc20ce 100644 --- a/files/fr/web/api/treewalker/whattoshow/index.md +++ b/files/fr/web/api/treewalker/whattoshow/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/TreeWalker/whatToShow --- {{APIRef("DOM")}} -La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : +La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : | Constante | Valeur numérique | Description | | --------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -42,7 +42,7 @@ var treeWalker = document.createTreeWalker( false ); if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) || - (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // treeWalker affichera des commentaires } ``` diff --git a/files/fr/web/api/uievent/detail/index.md b/files/fr/web/api/uievent/detail/index.md index 873116753a..16b4af4b3a 100644 --- a/files/fr/web/api/uievent/detail/index.md +++ b/files/fr/web/api/uievent/detail/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/UIEvent/detail Pour les événements {{event("click")}} ou {{event("dblclick")}}, `UIEvent.detail` donne le nombre de clics courant. -Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. +Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujours zéro. @@ -22,7 +22,7 @@ Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujou | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | | {{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM2 Events')}} | Première définition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/uievent/index.md b/files/fr/web/api/uievent/index.md index 2fad98cefd..47de3e8ea1 100644 --- a/files/fr/web/api/uievent/index.md +++ b/files/fr/web/api/uievent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/UIEvent L'interface **`UIEvent`** représente des évènements simples de l'interface utilisateur. -`UIEvent` 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 `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. +`UIEvent` 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 `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}. @@ -28,7 +28,7 @@ Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{dom _Cette interface hérite également des propriétés de son parent {{domxref("Event")}}._ -- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} +- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} - : {{jsxref("Boolean")}} _(booléen)_ indiquant si les conséquences de l'évènement ont été annulées ou non. <!----> @@ -45,7 +45,7 @@ _Cette interface hérite également des propriétés de son parent {{domxref("Ev - : Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document. - {{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}} - : Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document. -- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} +- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} - : Retourne une instance de l'interface `InputDeviceCapabilities` qui fournit des informations sur le périphérique physique responsable de l'évènement. - {{domxref("UIEvent.view")}}{{readonlyinline}} - : Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement. diff --git a/files/fr/web/api/uievent/layerx/index.md b/files/fr/web/api/uievent/layerx/index.md index 8b00e7be60..10dcb3990b 100644 --- a/files/fr/web/api/uievent/layerx/index.md +++ b/files/fr/web/api/uievent/layerx/index.md @@ -12,15 +12,15 @@ translation_of: Web/API/UIEvent/layerX --- {{APIRef("DOM Events")}} {{Non-standard_header}} -La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. +La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. -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é. +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é. ## **Syntaxe** - var posx = event.layerX + var posx = event.layerX -- *`posx`* 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é. +- *`posx`* 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é. ## **Exemples** diff --git a/files/fr/web/api/url/createobjecturl/index.md b/files/fr/web/api/url/createobjecturl/index.md index 25ec39cb51..9e3746bdce 100644 --- a/files/fr/web/api/url/createobjecturl/index.md +++ b/files/fr/web/api/url/createobjecturl/index.md @@ -35,7 +35,7 @@ Voir [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/F À chaque fois que vous appelez `createObjectURL()`, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin. -Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. +Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. ### Utiliser les URL d’objet pour les flux de média @@ -68,7 +68,7 @@ Dans d’anciennes versions de la spécification de Media Source, attacher un fl <p> Extension MediaSource.<br />Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les - objets {{domxref("MediaStream")}} ; ce n’est plus supporté. + objets {{domxref("MediaStream")}} ; ce n’est plus supporté. </p> </td> </tr> diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md index 9858af61aa..ae5113d228 100644 --- a/files/fr/web/api/url/hash/index.md +++ b/files/fr/web/api/url/hash/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/hash --- {{ APIRef("URL API") }} -La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. +La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. -Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. +Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md index 7f1e32a768..9814e808c0 100644 --- a/files/fr/web/api/url/index.md +++ b/files/fr/web/api/url/index.md @@ -39,7 +39,7 @@ url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html" ``` -L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. +L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours : @@ -58,7 +58,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html ## Constructeur - {{domxref("URL.URL", "URL()")}} {{experimental_inline}} - - : Crée et retourne un objet `URL` composé des paramètres donnés. + - : Crée et retourne un objet `URL` composé des paramètres donnés. ## Propriétés @@ -98,7 +98,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html - {{domxref("URL.search")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un `'?'` suivi par les paramètres de l'URL. - {{domxref("URL.searchParams")}} - - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. + - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. - {{domxref("URL.username")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom d'utilisateur spécifié avant le nom de domaine. @@ -109,12 +109,12 @@ L'interface `URL` implémente les méthodes définies dans _{{domxref("URLUtils" - {{domxref("URLUtils.toString()")}} - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur. - {{domxref("URL.toJSON()")}} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . ## Méthodes statiques - {{ domxref("URL.createObjectURL()") }} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. - {{ domxref("URL.revokeObjectURL()") }} - : Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}. diff --git a/files/fr/web/api/url/protocol/index.md b/files/fr/web/api/url/protocol/index.md index 2bc51d5bdc..d830f6ae15 100644 --- a/files/fr/web/api/url/protocol/index.md +++ b/files/fr/web/api/url/protocol/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/protocol --- {{ApiRef("URL API")}} -La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. +La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/search/index.md b/files/fr/web/api/url/search/index.md index 87b1925270..f00f6f9497 100644 --- a/files/fr/web/api/url/search/index.md +++ b/files/fr/web/api/url/search/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/search --- {{ApiRef("URL API")}} -La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. +La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche. diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md index 64f622e47f..0b574d29a0 100644 --- a/files/fr/web/api/url/searchparams/index.md +++ b/files/fr/web/api/url/searchparams/index.md @@ -10,7 +10,7 @@ tags: - URLSearchParameters translation_of: Web/API/URL/searchParams --- -{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. +{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. {{AvailableInWorkers}} @@ -20,11 +20,11 @@ translation_of: Web/API/URL/searchParams ### Value -Un objet {{domxref("URLSearchParams")}}. +Un objet {{domxref("URLSearchParams")}}. ## Exemples -Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` +Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` vous pouvez extraire les paramètres 'nom' et 'age' en utilisant: ```js @@ -39,6 +39,6 @@ let age = parseInt(params.get('age')); // le nombre 18 | -------------------------------------------------------------------------------- | -------------------- | -------------------- | | {{SpecName('URL', '#dom-url-searchparams', 'searchParams')}} | {{Spec2('URL')}} | Définition initiale. | -## Compatibilités des navigateurs +## Compatibilités des navigateurs {{Compat("api.URL.searchParams")}} diff --git a/files/fr/web/api/url/tojson/index.md b/files/fr/web/api/url/tojson/index.md index 4c53981f11..0b5438d497 100644 --- a/files/fr/web/api/url/tojson/index.md +++ b/files/fr/web/api/url/tojson/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toJSON --- {{APIRef("URL API")}} -La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. +La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/tostring/index.md b/files/fr/web/api/url/tostring/index.md index 5f61fd9b31..3af4dc690d 100644 --- a/files/fr/web/api/url/tostring/index.md +++ b/files/fr/web/api/url/tostring/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toString --- {{ApiRef("URL API")}} -La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. +La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. {{AvailableInWorkers}} @@ -46,4 +46,4 @@ url.toString() // doit retourner l'URL en tant que chaîne ## Voir aussi -- L'interface {{domxref("URL")}} à laquelle elle appartient. +- L'interface {{domxref("URL")}} à laquelle elle appartient. diff --git a/files/fr/web/api/url/url/index.md b/files/fr/web/api/url/url/index.md index cb9012b467..9bcba5ba7f 100644 --- a/files/fr/web/api/url/url/index.md +++ b/files/fr/web/api/url/url/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/URL --- {{APIRef("URL API")}} -Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. +Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. -Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. +Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. {{AvailableInWorkers}} diff --git a/files/fr/web/api/urlsearchparams/entries/index.md b/files/fr/web/api/urlsearchparams/entries/index.md index e7b812241b..22cddd1de6 100644 --- a/files/fr/web/api/urlsearchparams/entries/index.md +++ b/files/fr/web/api/urlsearchparams/entries/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/URLSearchParams/entries --- {{APIRef("URL API")}}{{SeeCompatTable}} -La méthode **`URLSearchParams.entries()`** 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")}} . +La méthode **`URLSearchParams.entries()`** 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")}} . > **Note :** This method is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API). diff --git a/files/fr/web/api/urlsearchparams/index.md b/files/fr/web/api/urlsearchparams/index.md index 27c7e479d8..961bb9e6ce 100644 --- a/files/fr/web/api/urlsearchparams/index.md +++ b/files/fr/web/api/urlsearchparams/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/URLSearchParams L’interface **`URLSearchParams`** définit des méthodes utilitaires pour travailler avec la _chaîne de requête_ (les paramètres `GET`) d’une URL. -Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. +Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. ## Constructeur @@ -80,5 +80,5 @@ searchParams.toString(); // "q=URLUtils.searchParams" ## Voir aussi -- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. +- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. - [Google Developers: Easy URL manipulation with URLSearchParams](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) diff --git a/files/fr/web/api/vibration_api/index.md b/files/fr/web/api/vibration_api/index.md index e9e8569268..c39692cf29 100644 --- a/files/fr/web/api/vibration_api/index.md +++ b/files/fr/web/api/vibration_api/index.md @@ -24,7 +24,7 @@ Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 mi ### Série de vibrations -Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: +Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: @@ -42,7 +42,7 @@ Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau ### Vibrations continues -Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: +Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: ```js var vibrateInterval; @@ -71,7 +71,7 @@ Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du ta ### Pourquoi utiliser l'API de vibration? -Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. +Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. ## Spécifications diff --git a/files/fr/web/api/vrdisplaycapabilities/index.md b/files/fr/web/api/vrdisplaycapabilities/index.md index f4e7209f4d..496c7141a6 100644 --- a/files/fr/web/api/vrdisplaycapabilities/index.md +++ b/files/fr/web/api/vrdisplaycapabilities/index.md @@ -5,22 +5,22 @@ translation_of: Web/API/VRDisplayCapabilities --- {{APIRef("WebVR API")}}{{SeeCompatTable}} -L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. +L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. -Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. +Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. ## Properties - {{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). + - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). - {{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. - {{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}} - - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) + - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) ## Exemples 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 index 088bb1442c..cee81ac6c3 100644 --- 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 @@ -1,5 +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> + <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/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md index 503ef5e776..ee4e66819e 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -7,51 +7,51 @@ Cet article explique une partie de la théorie sur laquelle s'appuient les fonct ## Graphes audio -La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. +La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. -Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie.  -Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc. +Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc.  -Les sources audio peuvent être de provenance variée : +Les sources audio peuvent être de provenance variée : -- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) -- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) -- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) -- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) +- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) +- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) +- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) +- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) ## Données audio: ce qu'on trouve dans un échantillon -Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); 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. +Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); 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. -On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). +On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). -## Mémoire tampon : trames, échantillons et canaux +## Mémoire tampon : trames, échantillons et canaux -Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. +Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. -Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. +Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. -Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. +Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. -Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: +Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: -- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. -- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames. +- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. +- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames.  -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. +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. > **Note :** 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. @@ -62,22 +62,22 @@ var contexte = new AudioContext(); var memoireTampon = contexte.createBuffer(2, 22050, 44100); ``` -> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? +> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? > -> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) 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 [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) 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. +> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) 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 [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) 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. > -> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), 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 [bande de transition](https://en.wikipedia.org/wiki/Transition_band) 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 [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. +> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), 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 [bande de transition](https://en.wikipedia.org/wiki/Transition_band) 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 [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. -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. +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. ```js var contexte = new AudioContext(); var memoireTampon = context.createBuffer(1, 22050, 22050); ``` -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. +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. -> **Note :** 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). +> **Note :** 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). ### Mémoire tampon linéaire ou entrelacée @@ -91,13 +91,13 @@ L'alternative est d'utiliser un format entrelacé: LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames) -Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. +Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. La Web Audio API expose \*uniquement\* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement. ## Canaux audio -Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : +Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : <table class="standard-table"> <tbody> @@ -234,7 +234,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td> <em>Conversion descendante de quad vers mono</em>.<br />Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et - <code>SR</code>) sont combinés pour produire l'unique canal de sortie + <code>SR</code>) sont combinés pour produire l'unique canal de sortie (<code>M</code>).<br /><code >output.M = 0.25 * (input.L + input.R + </code ><code>input.SL + input.SR</code><code>)</code> @@ -291,7 +291,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td><code>2</code> <em>(Stéréo)</em></td> <td> <em>Conversion descendante de 5.1 vers stéréo.</em><br />Le canal - central (<code>C</code>) est additionné avec chacun des canaux latéraux + central (<code>C</code>) est additionné avec chacun des canaux latéraux (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal @@ -325,7 +325,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br />La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les - enceintes. Ce cas de figure n'est par conséquent pas garanti dans le + enceintes. Ce cas de figure n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer. </td> @@ -377,19 +377,19 @@ On peut accéder aux données en utilisant les méthodes suivantes: - {{domxref("AnalyserNode.getFloatTimeDomainData()")}} - : Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument. - {{domxref("AnalyserNode.getByteTimeDomainData()")}} - - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. + - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. > **Note :** Pour plus d'informations, voir notre article [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API). ## Spatialisations -Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. +Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. 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.  -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. +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.  diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md index d11a9df3d0..449857d226 100644 --- a/files/fr/web/api/web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/index.md @@ -7,11 +7,11 @@ La Web Audio API propose un système puissant et flexible pour contrôler les do ## Concepts et usages -La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. 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. +La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. 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. -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. +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. -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. +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. Un processus de développement typique avec web audio ressemble à ceci : @@ -25,13 +25,13 @@ Un processus de développement typique avec web audio ressemble à ceci : 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. -La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ 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). +La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ 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). > **Note :** Vous pouvez lire davantage de détails sur l'API <i lang="en">Web Audio</i> en vous rendant sur notre article [Les concepts de base de l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API). -## Interface de la Web Audio API +## Interface de la Web Audio API -La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. +La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. ### Définition du graphe audio @@ -55,7 +55,7 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("AudioBufferSourceNode")}} - : Un objet **`AudioBufferSourceNode`** est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaElementAudioSourceNode")}} - - : Un objet **`MediaElementAudio.SourceNode`** 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. + - : Un objet **`MediaElementAudio.SourceNode`** 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. - {{domxref("MediaStreamAudioSourceNode")}} - : Un objet **`MediaStreamAudio.SourceNode`** est une source audio composée d'un [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. @@ -66,63 +66,63 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("ConvolverNode")}} - : Un objet **`Convolver.Node`** est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération. - {{domxref("DelayNode")}} - - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. + - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. - {{domxref("DynamicsCompressorNode")}} - - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. + - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. - {{domxref("GainNode")}} - - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. + - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. - {{domxref("WaveShaperNode")}} - - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. + - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. - {{domxref("PeriodicWave")}} - - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. + - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. ### Définition des destinations audio Une fois que le signal audio a été traité, ces interfaces définissent sa destination. - {{domxref("AudioDestinationNode")}} - - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. + - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. - {{domxref("MediaStreamAudioDestinationNode")}} - - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; 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. + - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; 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. -### Analyse des données et visualisation +### Analyse des données et visualisation - {{domxref("AnalyserNode")}} - - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. + - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. ### Division et fusion des pistes audio - {{domxref("ChannelSplitterNode")}} - - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. + - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. - {{domxref("ChannelMergerNode")}} - - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. + - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. ### Spatialisation audio - {{domxref("AudioListener")}} - - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. + - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. - {{domxref("PannerNode")}} - - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. + - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. ### Traitement audio avec JavaScript -> **Note :** 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") }}. +> **Note :** 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") }}. - {{domxref("ScriptProcessorNode")}} - - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. + - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. - {{event("audioprocess")}} (event) - - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. + - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. - {{domxref("AudioProcessingEvent")}} - : L'objet `AudioProcessingEvent` est envoyé aux fonctions de rappel (<i lang="en">callback</i>) qui écoutent l'évènement `audioprocess`. ### Traitement audio hors ligne ou en tâche de fond -Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. +Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. - {{domxref("OfflineAudioContext")}} - : Un objet **`OfflineAudioContext`** est une interface [`AudioContext`](/fr/docs/Web/API/AudioContext) qui représente un graphe de traitement audio construit à partir de nœuds audio. À la différence d'une interface `AudioContext` standard, une interface `OfflineAudioContext` n'exporte pas vraiment le son, mais le génère *aussi vite que possible* dans un buffer. - {{event("complete")}} (event) - - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. + - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. - {{domxref("OfflineAudioCompletionEvent")}} - : The `OfflineAudioCompletionEvent` est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface. @@ -148,9 +148,9 @@ Les objets suivants étaient définis dans les versions précédentes de la spé ## Exemple -Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —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 ! +Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —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 ! -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. +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. ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio @@ -167,146 +167,146 @@ var gainVolume = contexteAudio.createGain(); var filtreAccordable = contexteAudio.createBiquadFilter(); function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion - var k = typeof taille === 'number' ? taille : 50, - nombre_echantillons = 44100, - courbe = new Float32Array(nombre_echantillons), - angle = Math.PI / 180, - i = 0, - x; - for ( ; i < nombre_echantillons; ++i ) { - x = i * 2 / nombre_echantillons - 1; - courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); - } - return courbe; + var k = typeof taille === 'number' ? taille : 50, + nombre_echantillons = 44100, + courbe = new Float32Array(nombre_echantillons), + angle = Math.PI / 180, + i = 0, + x; + r ( ; i < nombre_echantillons; ++i ) + x = i * 2 / nombre_echantillons - 1; + courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); + } + return courbe; }; navigator.getUserMedia ( - // contraintes - uniquement audio dans cet exemple - { - audio: true - }, - - // callback de succès - function(flux) { - source = contexteAudio.createMediaStreamSource(flux); - source.connect(analyseur); - analyseur.connect(distorsion); - distorsion.connect(filtreAccordable); - filtreAccordable.connect(gainVolume); - gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux - - genererVisualisation(flux); - voiceChange(); - - }, - - // callback d'erreur - function(err) { - console.log("L'erreur GUM suivante a eu lieu : " + err); - } + // contraintes - uniquement audio dans cet exemple + { + audio: true + }, + + // callback de succès + function(flux) { + source = contexteAudio.createMediaStreamSource(flux); + source.connect(analyseur); + analyseur.connect(distorsion); + distorsion.connect(filtreAccordable); + filtreAccordable.connect(gainVolume); + gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux + + genererVisualisation(flux); + voiceChange(); + + }, + + // callback d'erreur + function(err) { + console.log("L'erreur GUM suivante a eu lieu : " + err); + } ); function genererVisualisation(flux) { - const LARGEUR = canvas.width; - const HAUTEUR = canvas.height; - - var parametreVisualisation = visualisationSelectionnee.value; - console.log(parametreVisualisation); - - if(parametreVisualisation == "sinewave") { - analyseur.fftSize = 2048; - var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) - var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données - - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - - function draw() { - - renduVisuel = requestAnimationFrame(draw); - - analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé - - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = LARGEUR * 1.0 / tailleBuffer; - var x = 0; - - for(var i = 0; i < tailleBuffer; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(parametreVisualisation == "off") { - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - } + const LARGEUR = canvas.width; + const HAUTEUR = canvas.height; + + var parametreVisualisation = visualisationSelectionnee.value; + console.log(parametreVisualisation); + + if(parametreVisualisation == "sinewave") { + analyseur.fftSize = 2048; + var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) + var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données + + canvasCtx.clearRec + + function draw() { + + renduVisuel = + + analyseur.getByteTi + + canvasCtx.fillStyle + canvas + + canvasCtx.lineWidth + can + + canvasCtx.beginPath + + var sliceWi + var + + fo + + + + + + + + canvasCtx.line + + + x += sliceWidth; + } + + + c + }; + + draw(); + + } else if(parametreVisualisation == "off") { + canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); + } } function modifierVoix() { - distorsion.curve = new Float32Array; - filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée - - var choixVoix = voixSelectionnee.value; - console.log(choixVoix); - - if(choixVoix == "distortion") { - distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme - } else if(choixVoix == "biquad") { - filtreAccordable.type = "lowshelf"; - filtreAccordable.frequency.value = 1000; - filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable - } else if(choixVoix == "off") { - console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée - } + distorsion.curve = new Float32Array; + filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée + + var choixVoix = voixSelectionnee.value; + console.log(choixVoix); + + if(choixVoix == "distortion") { + distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme + else if(choixVoix == "biquad") { + filtreAccordable.type = "lowshelf"; + filtreAccordable.frequency.value = 1000; + filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable + } else if(choixVoix == "off") { + console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée + } } // écouteurs d'évènements pour les changements de visualisation et de voix visualisationSelectionnee.onchange = function() { - window.cancelAnimationFrame(renduVisuel); - genererVisualisation(flux); + window.cancelAnimationFrame(renduVisuel); + genererVisualisation(flux); } voixSelectionnee.onchange = function() { - modifierVoix(); + modifierVoix(); } silence.onclick = muterVoix; function muterVoix() { // allumer / éteindre le son - if(silence.id == "") { - gainVolume.gain.value = 0; // gain à 0 pour éteindre le son - silence.id = "activated"; - silence.innerHTML = "Unmute"; - } else { - gainVolume.gain.value = 1; // gain à 1 pour allumer le son - silence.id = ""; - silence.innerHTML = "Mute"; - } + if(silence.id == "") { + gainVolume.gain.value = 0; // gain à 0 pour éteindre le son + silence.id = "activated"; + silence.innerHTML = "Unmute"; + else { + gainVolume.gain. + silence.id = ""; + silence.innerHTML = "Mute"; + } } ``` @@ -336,7 +336,7 @@ function muterVoix() { // allumer / éteindre le son ### Guides -- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) +- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) - [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) - [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) - [Web audio spatialisation basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics) diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md index 59727d0cbc..ecfe9c7732 100644 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md @@ -7,13 +7,13 @@ La [Web Audio API](/en-US/docs/Web_Audio_API) offre un méchanisme à la fois si La Web Audio API ne vient pas remplacer l'élément [\<audio>](/en-US/docs/Web/HTML/Element/audio), mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément [\<video>](/en-US/docs/Web/HTML/Element/Img). 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. -L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. +L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. ## Exemples Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations ! -Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), 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 ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)). +Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), 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 ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)).  @@ -23,12 +23,12 @@ Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-cha La Web Audio API impliqe de réaliser les opérations de traitement audio dans un **contexte audio**, et elle a été conçue pour permettre le **routage modulaire**. Les opérations de traitement de base sont réalisées par des **noeuds audio**, qui sont reliés entre eux pour former un **graphe de routage audio**. 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. -Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie. ### Création d'un contexte audio @@ -98,7 +98,7 @@ Ce code créerait le graphe audio suivant : 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. -> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. +> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. ### Lecture du son et définition du pitch @@ -241,7 +241,7 @@ function genererCourbeDistortion(amount) { }; ``` -L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : +L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : ```js source.connect(analyser); diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md index 872fce40bf..b39cbc986d 100644 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md @@ -27,15 +27,15 @@ analyseur.connect(distortion); > **Note :** 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. -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). +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). > **Note :** 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") }}. 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. -Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. +Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. -Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. +Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. ```js analyseur.fftSize = 2048; diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md index 11b0bd0c22..320e66a578 100644 --- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md +++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md @@ -18,9 +18,9 @@ Dans cet article nous allons nous concentrer sur la position de l'auditeur et du > **Note :** 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. -Les autres options disponibles, que nous ne traiterons pas ici, sont : +Les autres options disponibles, que nous ne traiterons pas ici, sont : -- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) +- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) - `setVelocity()`: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect. - `coneInnerAngle`, `coneOuterAngle`, and `coneOuterGain`: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source. diff --git a/files/fr/web/api/web_speech_api/index.md b/files/fr/web/api/web_speech_api/index.md index 7b43fa3975..a625e2aea0 100644 --- a/files/fr/web/api/web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/index.md @@ -11,68 +11,68 @@ translation_of: Web/API/Web_Speech_API --- {{DefaultAPISidebar("Web Speech API")}}{{seecompattable}} -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). +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). ## Concepts et usages de l'API Web Speech 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 : -- La reconnaissance vocale ( +- 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 [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). + ) 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 [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). -- La synthèse vocale ( +- 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()")}}. + ) 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()")}}. -Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) +Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) ## Les interfaces de l'API Web Speech ### Le reconnaissance vocale - {{domxref("SpeechRecognition")}} - - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. + - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. - {{domxref("SpeechRecognitionAlternative")}} - : Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale. - {{domxref("SpeechRecognitionError")}} - : Répresente les messages d'erreur de l'outil de reconnaissance vocale. - {{domxref("SpeechRecognitionEvent")}} - - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. + - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. - {{domxref("SpeechGrammar")}} - : Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître. - {{domxref("SpeechGrammarList")}} - - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. + - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. - {{domxref("SpeechRecognitionResult")}} - - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. + - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. - {{domxref("SpeechRecognitionResultList")}} - - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. + - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. ### La synthèse vocale - {{domxref("SpeechSynthesis")}} - : L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires. - {{domxref("SpeechSynthesisErrorEvent")}} - - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. + - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. - {{domxref("SpeechSynthesisEvent")}} - - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. + - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. - {{domxref("SpeechSynthesisUtterance")}} - : Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume). <!----> - {{domxref("SpeechSynthesisVoice")}} - - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. + - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. - {{domxref("Window.speechSynthesis")}} - - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. + - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. ## Exemples -Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. +Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. ## Spécifications diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md index c09db4c4fd..2dfc00f16d 100644 --- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md @@ -18,13 +18,13 @@ L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissanc La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat. -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. +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. > **Note :** 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. ### Demo -Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). 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. +Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). 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. Pour lancer la demo, vous pouvez cloner (ou [directement télécharger](https://github.com/mdn/web-speech-api/archive/master.zip)) 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 [l'URL de démonstration live](https://mdn.github.io/web-speech-api/speech-color-changer/), sur un navigateur pour mobile le supportant comme Chrome. @@ -134,10 +134,10 @@ Once the speech recognition is started, there are many event handlers that can b ```js recognition.onresult = function(event) { - var color = event.results[0][0].transcript; - diagnostic.textContent = 'Result received: ' + color + '.'; - bg.style.backgroundColor = color; - console.log('Confidence: ' + event.results[0][0].confidence); + var color = event.results[0][0].transcript; + diagnostic.textContent = 'Result received: ' + color + '.'; + bg.style.backgroundColor = color; + console.log('Confidence: ' + event.results[0][0].confidence); } ``` @@ -179,13 +179,13 @@ The Web Speech API has a main controller interface for this — {{domxref("Speec To show simple usage of Web speech synthesis, we've provided a demo called [Speak easy synthesis](https://mdn.github.io/web-speech-api/speak-easy-synthesis/). 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. -To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. +To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. ### Browser support Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: -- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. +- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. - Firefox OS 2.5+ supports it, by default, and without the need for any permissions. - Chrome for Desktop and Android have supported it since around version 33, without prefixes. diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md index 33dc7e8518..32a10b50b2 100644 --- a/files/fr/web/api/web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/index.md @@ -12,31 +12,31 @@ translation_of: Web/API/Web_Storage_API --- {{DefaultAPISidebar("Web Storage API")}} -L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. +L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. ## Web Storage, concepts et utilisations -Les deux mécanismes au sein du web storage sont les suivantes: +Les deux mécanismes au sein du web storage sont les suivantes: - `sessionStorage` maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure) - `localStorage` fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert. -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 `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` 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. +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 `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` 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. > **Note :** À 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. -> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) +> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) > **Note :** Le <i lang="en">Web Storage</i> n'est pas identique au `mozStorage` (interfaces XPCOM de Mozilla vers SQLite) ou l'API <i lang="en">Session Store</i> (un utilitaire de stockage XPCOM utilisable par des extensions). ## Web Storage interfaces - {{domxref("Storage")}} - - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. + - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. - {{domxref("Window")}} - - : 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. + - : 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. - {{domxref("StorageEvent")}} - - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. + - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. ## Exemples @@ -70,4 +70,4 @@ Les développeuses et développeurs doivent connaître ces différentes impléme - [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) - [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) -- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) +- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md index f4ee6b207c..22b63937ad 100644 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md @@ -9,7 +9,7 @@ tags: - localStorage translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API --- -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. +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. ## Concepts de base @@ -21,14 +21,14 @@ localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); ``` -> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. +> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. Les deux principaux mécanismes internes du Stockage Web sont : - **`sessionStorage`** qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations). - **`localStorage`** qui tient le même rôle mais persiste même après le redémarrage du navigateur web. -Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. Donc, par exemple, un appel initial de `localStorage` sur un document va retourner un objet {{domxref("Storage")}} ; un appel de `sessionStorage` sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément. @@ -85,7 +85,7 @@ Vous pouvez retrouver ici [une brève histoire de la détection de localStorage] ## Un exemple simple -Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration: +Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:  @@ -137,7 +137,7 @@ Ici, les trois premières lignes vont chercher les valeurs dans le stockage loca ## Enregistrer une valeur dans le stockage -{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. +{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. ```js function populateStorage() { diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index 4569d01aa5..876ac1fc52 100644 --- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -18,7 +18,7 @@ En plus de l'ensemble des fonctions standard [JavaScript](/en-US/docs/Web/JavaSc <td class="header">Workers partagés</td> <td class="header">Service workers</td> <td class="header">Chrome workers {{Non-standard_inline}}</td> - <td class="header">En dehors des workers</td> + <td class="header">En dehors des workers</td> </tr> <tr> <td>{{domxref("WindowBase64.atob", "atob()")}}</td> diff --git a/files/fr/web/api/web_workers_api/index.md b/files/fr/web/api/web_workers_api/index.md index c8ee4c3ff1..1bff3ddeef 100644 --- a/files/fr/web/api/web_workers_api/index.md +++ b/files/fr/web/api/web_workers_api/index.md @@ -18,14 +18,14 @@ Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du work 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 `postMessage()`, et la réponse leur parvient au moyen du gestionnaire d'événement `onmessage` (le message est contenu dans l'attribut `data` de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées. -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 [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. +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 [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. En plus des workers dédiés, il y a d'autres types de worker : - Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails. - Les [ServiceWorkers](/en-US/docs/Web/API/ServiceWorker_API) fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan. - Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux [js-ctypes](/fr/docs/Mozilla/js-ctypes) dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. -- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. +- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. > **Note :** Selon les [Spécifications de Web Worker](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42. diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md index 6129b8598f..ee5e07025b 100644 --- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md @@ -10,7 +10,7 @@ L’algorithme, essentiellement, parcourt tous les champs de l’objet original, ## Avantages par rapport à JSON -Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : +Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : - Le clonage structuré peut copier des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp). - Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}. @@ -19,9 +19,9 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu ## Ce qui ne marche pas avec le clonage structuré -- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. +- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. - De la même manière, toute tentative de cloner des nœuds DOM émettra une exception `DATA_CLONE_ERR`. -- Certains paramètres d’objets ne sont pas préservés : +- Certains paramètres d’objets ne sont pas préservés : - Le champ `lastIndex` des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp) n’est pas préservé. - 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 _via_ un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut. @@ -32,22 +32,22 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu | Type d’objet | Notes | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | [Tous types primitifs](/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) | À l’exception des symboles | -| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | -| Objet String | | -| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | +| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | +| Objet String | | +| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | | [RegExp](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | Le champ `lastIndex` n’est pas préservé | -| {{ domxref("Blob") }} | | -| {{ domxref("File") }} | | -| {{ domxref("FileList") }} | | -| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | +| {{ domxref("Blob") }} | | +| {{ domxref("File") }} | | +| {{ domxref("FileList") }} | | +| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | | [ArrayBufferView](/en-US/docs/Web/API/ArrayBufferView) | Ce qui implique tous les [tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays) tels que `Int32Array`, etc. | -| {{ domxref("ImageData") }} | | -| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | +| {{ domxref("ImageData") }} | | +| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | | [Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) | Inclut seulement les objets plats (par ex. depuis un objet littéral) | -| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | -| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | +| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | +| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | -## Alternative : copie profonde +## Alternative : copie profonde Si vous voulez une **copie profonde** d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible. @@ -87,7 +87,7 @@ function clone(objectToBeCloned) { ## Voir aussi -- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) +- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) - {{ domxref("window.history") }} - {{ domxref("window.postMessage()") }} - [Web Workers](/en-US/docs/Web/API/Web_Workers_API) diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.md b/files/fr/web/api/web_workers_api/using_web_workers/index.md index a6ed47d385..73b70bd9dd 100644 --- a/files/fr/web/api/web_workers_api/using_web_workers/index.md +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.md @@ -21,7 +21,7 @@ Le contexte du _worker_ est représenté par un objet {{domxref("DedicatedWorker > **Note :** Voir [la page d'entrée pour l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) pour consulter la documentation de référence sur les _workers_ et d'autres guides. -Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à 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 `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à 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 `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). Les données sont échangées entre le _thread_ du _worker_ et le _thread_ principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode `postMessage()` et réagir aux messages reçus grâce au gestionnaire d'évènement `onmessage` (le message sera contenu dans l'attribut `data` de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées. @@ -124,7 +124,7 @@ L'évènement décrivant l'erreur possède notamment trois propriétés intéres ### Initier des _workers_ fils -Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. +Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. ### Importer des scripts et des bibliothèques @@ -490,7 +490,7 @@ La plupart des fonctionnalités JavaScript standard peuvent être utilisées dan En revanche, un _worker_ ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages. -> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). ## Spécifications diff --git a/files/fr/web/api/webgl2renderingcontext/index.md b/files/fr/web/api/webgl2renderingcontext/index.md index 4ed7247a1b..3bac29da27 100644 --- a/files/fr/web/api/webgl2renderingcontext/index.md +++ b/files/fr/web/api/webgl2renderingcontext/index.md @@ -31,7 +31,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Informations d'état - {{domxref("WebGL2RenderingContext.getIndexedParameter()")}} - - : Retourne la valeur indexée pour la `cible` donnée. + - : Retourne la valeur indexée pour la `cible` donnée. ## Tampons @@ -47,7 +47,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Tampons d'image - {{domxref("WebGL2RenderingContext.blitFramebuffer()")}} - - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. + - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. - {{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}} - : Attache une seule couche de texture à un tampon d'image. - {{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}} @@ -62,7 +62,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.getInternalformatParameter()")}} - : Retourne des informations sur le support, dépendant de l'implémentation, des formats internes. - {{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}} - - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. + - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. ## Textures @@ -81,12 +81,12 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}} - : Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé. -## Programmes et shaders +## Programmes et shaders - {{domxref("WebGL2RenderingContext.getFragDataLocation()")}} - - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. + - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. -## Uniforms et attributs +## Uniforms et attributs - {{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}} - : Méthodes spécifiant les valeurs des variables uniform. @@ -102,11 +102,11 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}} - : Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}. - {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. - {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. - {{domxref("WebGL2RenderingContext.drawRangeElements()")}} - - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. + - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. - {{domxref("WebGL2RenderingContext.drawBuffers()")}} - : Spécifie une liste de tampons de couleur dans lesquels dessiner. - {{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}} @@ -127,7 +127,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.endQuery()")}} - : Marque la fin d'une requête asynchrone. - {{domxref("WebGL2RenderingContext.getQuery()")}} - - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. + - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. - {{domxref("WebGL2RenderingContext.getQueryParameter()")}} - : Retourne des informations sur une requête. @@ -138,7 +138,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSampler()")}} - : Supprime l'objet {{domxref("WebGLSampler")}} donné. - {{domxref("WebGL2RenderingContext.bindSampler()")}} - - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. + - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. - {{domxref("WebGL2RenderingContext.isSampler()")}} - : Retourne `true` si l'objet donné est un objet {{domxref("WebGLSampler")}} valide. - {{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}} @@ -155,7 +155,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSync()")}} - : Supprime l'objet {{domxref("WebGLSync")}} donné. - {{domxref("WebGL2RenderingContext.clientWaitSync()")}} - - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. + - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. - {{domxref("WebGL2RenderingContext.waitSync()")}} - : Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal. - {{domxref("WebGL2RenderingContext.getSyncParameter()")}} @@ -182,12 +182,12 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}} - : Suspend une opération de retour de transformations. - {{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}} - - : Reprend une opération de retour de transformations. + - : Reprend une opération de retour de transformations. ## Objets tampons uniforms - {{domxref("WebGL2RenderingContext.bindBufferBase()")}} - - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. + - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.bindBufferRange()")}} - : Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.getUniformIndices()")}} @@ -210,7 +210,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} - {{domxref("WebGL2RenderingContext.createVertexArray()")}} - : Crée un nouveau {{domxref("WebGLVertexArrayObject")}}. - {{domxref("WebGL2RenderingContext.deleteVertexArray()")}} - - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. + - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. - {{domxref("WebGL2RenderingContext.isVertexArray()")}} - : Retourne `true` si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide. - {{domxref("WebGL2RenderingContext.bindVertexArray()")}} diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md index b4abf46df9..5909544024 100644 --- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md @@ -23,15 +23,15 @@ Dans cet article, on illustre comment dessiner des rectangles et des carrés gr Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}. -La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. +La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. Cet article représente une excellente occasion pour distinguer les _pixels_ des _fragments_. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un _fragment_ fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}. Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène). -Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. +Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. -Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. +Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. ```html <p>Le résultat de la découpe.</p> diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md index 5a007a9434..5ee0933158 100644 --- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md @@ -37,7 +37,7 @@ Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript `getR - Nettoie le buffer avec `clear` - Applique le contexte initialisé -S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. +S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées. diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md index 82f6d06ef7..04823c499b 100644 --- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md @@ -66,8 +66,8 @@ canvas { window.addEventListener("load", function setupWebGL (evt) { "use strict" - // On fait le ménage : le gestionnaire se supprime lui- - // même car il n'a besoin d'être exécuté qu'une fois. + // On fait le ménage : le gestionnaire se supprime lui- + // même car il n'a besoin d'être exécuté qu'une fois. window.removeEventListener(evt.type, setupWebGL, false); // On ajoute le même gestionnaire de clic sur le canevas @@ -92,8 +92,8 @@ window.addEventListener("load", function setupWebGL (evt) { || canvas.getContext("experimental-webgl"); if (!gl) { alert("Échec de la récupération du \n" - + "contexte WebGL. Votre navigateur peut ne pas \n" - + " supporter WebGL."); + + "contexte WebGL. Votre navigateur peut ne pas \n" + + " supporter WebGL."); return; } gl.viewport(0, 0, diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md index 4064bb708f..2628ebf301 100644 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -25,7 +25,7 @@ Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tomben Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate. -De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. +De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. ```html hidden <p>Vous en avez attrapé @@ -116,14 +116,14 @@ function playerClick (evt) { ]; // si le clic est sur un rectangle, on l'attrape. // On incrémente donc le score et on crée un nouveau rectangle - var diffPos = [ position[0] - rainingRect.position[0], - position[1] - rainingRect.position[1] ]; - if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0] - && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) { - score += 1; - scoreDisplay.innerHTML = score; - rainingRect = new Rectangle(); - } + var diffPos = [ position[0] - rainingRect.position[0], + position[1] - rainingRect.position[1] ]; + if ( diffPos[ + && diffPo + score += 1; + scoreDisplay.innerHTML = score; + rainingRect = new Rectangle(); + } } function Rectangle () { diff --git a/files/fr/web/api/webgl_api/data/index.md b/files/fr/web/api/webgl_api/data/index.md index b122c4a378..b3bea5e383 100644 --- a/files/fr/web/api/webgl_api/data/index.md +++ b/files/fr/web/api/webgl_api/data/index.md @@ -20,25 +20,25 @@ original_slug: Web/API/WebGL_API/Données --- {{WebGLSidebar}}{{draft}} -Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. +Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. ## Types de données GLSL -<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> +<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> ## Variables GLSL -Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. +Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. ### Attributes -Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. +Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. <\<add how to use them>> ### Varyings -Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. +Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. <\<how to use>> diff --git a/files/fr/web/api/webgl_api/index.md b/files/fr/web/api/webgl_api/index.md index 782877cdae..5dc90f1dc9 100644 --- a/files/fr/web/api/webgl_api/index.md +++ b/files/fr/web/api/webgl_api/index.md @@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API Le support pour WebGL est présent dans [Firefox](/fr/docs/Mozilla/Firefox) 4+, [Google Chrome](https://www.google.com/chrome/) 9+, [Opera](https://www.opera.com/fr) 12+, [Safari](https://www.apple.com/fr/safari/) 5.1+, [Internet Explorer](https://support.microsoft.com/fr-fr/windows/aide-d-internet-explorer-23360e49-9cd3-4dda-ba52-705336cc0de2) 11+ et les versions 10240+ de [Microsoft Edge](https://www.microsoft.com/fr-fr/edge) ; toutefois, l'appareil de l'utilisatrice ou l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités. -L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. +L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. ## Référence @@ -80,69 +80,69 @@ L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR - {{Event("webglcontextrestored")}} - {{Event("webglcontextcreationerror")}} -### Constantes et types +### Constantes et types - [Constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants) - [Types WebGL](/fr-FR/docs/Web/API/WebGL_API/Types) ### WebGL 2 -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 : +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 : -- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), -- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), -- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), -- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), -- les [objets Query](/en-US/docs/Web/API/WebGLQuery), -- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), -- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). +- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), +- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), +- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), +- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), +- les [objets Query](/en-US/docs/Web/API/WebGLQuery), +- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), +- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). -Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. +Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. -## Guides et tutoriels +## Guides et tutoriels -Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. +Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. ### Guides -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) - - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) + - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. - [Meilleures pratiques WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices) - - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. + - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. - [Utilisation des extensions](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions) - - : Un guide pour l'utilisation des extensions WebGL. + - : Un guide pour l'utilisation des extensions WebGL. ### Tutoriels - [Tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) - - : 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. + - : 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. ### Exemples -- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - - : 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. +- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) + - : 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. ### Tutoriels avancés - [Projection de vue de modèle WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection) - - : 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. -- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) - - : 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. + - : 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. +- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) + - : 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. ## Ressources -- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. -- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. -- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. -- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. -- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. -- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. -- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. +- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. +- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. +- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. +- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. +- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. +- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. +- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. ### Bibliothèques -- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances -- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. +- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances +- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. ## Spécifications @@ -150,8 +150,8 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les | ---------------------------------------- | ------------------------------------ | --------------------------------------------------------- | | {{SpecName('WebGL')}} | {{Spec2('WebGL')}} | Définition. Basée sur OpenGL ES 2.0 | | {{SpecName('WebGL2')}} | {{Spec2('WebGL2')}} | Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0. | -| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | -| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | +| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | +| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | ## Compatibilité des navigateurs @@ -165,7 +165,7 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les ### Notes de compatibilité -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 `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. +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 `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. ### Notes Gecko @@ -174,11 +174,11 @@ En plus du navigateur, la GPU elle-même doit également prendre en charge la f À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test : - `webgl.min_capability_mode` - - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. - `webgl.disable_extensions` - - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. ## Voir aussi - [Canvas](/fr-FR/docs/Web/API/Canvas_API) -- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) +- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 4beb39300e..3b5ab22a47 100644 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -17,29 +17,29 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} -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. +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. -## Dessiner la scène +## Dessiner la scène -La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. +La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. ### Les shaders -Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (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. +Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (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. -Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. 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 **programme shader**. +Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. 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 **programme shader**. -Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. +Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. -#### Le shader de sommet +#### Le shader de sommet -Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. +Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée `gl_Position`. -Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. +Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. -Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). +Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). // Programme shader de sommet @@ -54,13 +54,13 @@ Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à } `; -Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). #### Le shader de fragment -Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. +Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. -Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. +Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. const fsSource = ` void main() { @@ -68,9 +68,9 @@ Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes } `; -### Initialisation des shaders +### Initialisation des shaders -Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. +Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. // // Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données @@ -123,17 +123,17 @@ Maintenant que nous avons défini les deux shaders, nous devons les transmettre La fonction `loadShader()` prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit : -1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; -2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; -3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; -4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; +1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; +2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; +3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; +4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; 5. si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant. Pour utiliser ce code, nous l'appelons de la façon suivante : const shaderProgram = initShaderProgram(gl, vsSource, fsSource); -Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. +Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. const programInfo = { program: shaderProgram, @@ -148,7 +148,7 @@ Après avoir créé un programme de shaders, nous devons rechercher les emplacem ## Création du carré 2D -Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. +Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. function initBuffers(gl) { @@ -157,7 +157,7 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp const positionBuffer = gl.createBuffer(); // Définir le positionBuffer comme étant celui auquel appliquer les opérations - // de tampon à partir d'ici. + // de tampon à partir d'ici. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); @@ -171,8 +171,8 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp ]; // Passer mainenant la liste des positions à WebGL pour construire la forme. - // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, - // puis en l'utilisant pour remplir le tampon en cours. + // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, + // puis en l'utilisant pour remplir le tampon en cours. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), @@ -183,13 +183,13 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp }; } -Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. +Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. -Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. +Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. -## Rendu de la scène +## Rendu de la scène -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 `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. +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 `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. > **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix.js](https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js) pour résoudre ce problème, comme suggéré [ici](https://github.com/mdn/webgl-examples/issues/20). @@ -204,9 +204,9 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour - // simuler la distorsion de la perspective dans une caméra. + // simuler la distorsion de la perspective dans une caméra. // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui - // correspond à la taille d'affichage du canvas ; + // correspond à la taille d'affichage du canvas ; // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités // à partir de la caméra. @@ -217,7 +217,7 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const projectionMatrix = mat4.create(); // note: glmatrix.js a toujours comme premier argument la destination - // où stocker le résultat. + // où stocker le résultat. mat4.perspective(projectionMatrix, fieldOfView, aspect, @@ -229,14 +229,14 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const modelViewMatrix = mat4.create(); // Commencer maintenant à déplacer la position de dessin un peu vers là où - // nous voulons commencer à dessiner le carré. + // nous voulons commencer à dessiner le carré. mat4.translate(modelViewMatrix, // matrice de destination modelViewMatrix, // matrice de déplacement [-0.0, 0.0, -6.0]); // quantité de déplacement // Indiquer à WebGL comment extraire les positions à partir du tampon des - // positions pour les mettre dans l'attribut vertexPosition. + // positions pour les mettre dans l'attribut vertexPosition. { const numComponents = 2; // extraire 2 valeurs par itération const type = gl.FLOAT; // les données dans le tampon sont des flottants 32bit @@ -278,22 +278,22 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et } } -La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. +La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. -Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. +Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. {{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) ## Opérations utilitaires matricielles -Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). +Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). -Voir aussi : +Voir aussi : -- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; -- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; -- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. +- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; +- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; +- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md index 7a736660b7..ea49a14322 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -9,11 +9,11 @@ original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} -Dans cet exemple, nous allons faire tourner notre carré 2D. +Dans cet exemple, nous allons faire tourner notre carré 2D. ## Faire tourner le carré -Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : +Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : ```js var squareRotation = 0.0; @@ -26,9 +26,9 @@ Maintenant, nous devons modifier la fonction `drawScene()` pour appliquer la rot squareRotation, // rotation en radians [0, 0, 1]); // axe autour duquel tourner -Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. +Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. -Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : +Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : var then = 0; @@ -44,14 +44,14 @@ Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code } requestAnimationFrame(render); -Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. +Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. - squareRotation += deltaTime; + squareRotation += deltaTime; -Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. +Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. {{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md index 6844827c75..813ff0dee9 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md @@ -22,38 +22,38 @@ La première étape consiste à créer l'élément {{HTMLElement("video")}} que var copierVideo = false; function configurerVideo(url) { - const video = document.createElement('video'); + const video = document.createElement('video'); - var playing = false; - var timeupdate = false; + var playing = false; + var timeupdate = false; - video.autoplay = true; - video.muted = true; - video.loop = true; + video.autoplay = true; + video.muted = true; + video.loop = true; - // Le fait d'attendre ces 2 évènements assure + // Le fait d'attendre ces 2 évènements assure // qu'il y a des données dans la vidéo - video.addEventListener('playing', function() { - playing = true; - verifierPret(); - }, true); + video.addEventListener('playing', function() { + playing = true; + verifierPret(); + }, true); - video.addEventListener('timeupdate', function() { - timeupdate = true; - verifierPret(); - }, true); + video.addEventListener('timeupdate', function() { + timeupdate = true; + verifierPret(); + }, true); - video.src = url; - video.play(); + video.src = url; + video.play(); - function verifierPret() { - if (playing && timeupdate) { - copierVideo = true; - } - } + function verifierPret() { + if (playing && timeupdate) { + copierVideo = true; + } + } - return video; + return video; } ``` @@ -61,52 +61,52 @@ D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatiqu Et enfin, nous définissons l'attribut `src` pour commencer, et nous appelons `play` pour démarrer le chargement et la lecture de la vidéo. -## Utilisation des images vidéo comme texture +## Utilisation des images vidéo comme texture La prochaine modification porte sur `initTexture()`, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure : ```js function initTexture(gl, url) { - const texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); // Parce que la vidéo doit être téléchargée depuis sur Internet, // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc // mettre un seul pixel dans la texture, de façon à ce que nous puissions // l'utiliser immédiatement. - const niveau = 0; - const formatInterne = gl.RGBA; - const largeur = 1; - const hauteur = 1; - const bordure = 0; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - largeur, hauteur, bordure, formatSrc, typeSrc, - pixel); + const niveau = 0; + const formatInterne = gl.RGBA; + const largeur = 1; + const hauteur = 1; + const bordure = 0; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + largeur, hauteur, bordure, formatSrc, typeSrc, + pixel); // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il // fonctionne indépendamment des dimensions de la vidéo. - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - return texture; + return texture; } ``` -Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : +Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : ```js function mettreAJourTexture(gl, texture, video) { - const niveau = 0; - const formatInterne = gl.RGBA; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - formatSrc, typeSrc, video); + const niveau = 0; + const formatInterne = gl.RGBA; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + formatSrc, typeSrc, video); } ``` @@ -115,33 +115,33 @@ Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l Si `copierVideo` est true, alors `mettreAJourTexture()` est appelé à chaque fois juste avant que nous appellions la fonction `dessinerScene()`. ```js - var alors = 0; + var alors = 0; - // Dessiner la scène répétitivement - function dessiner(maintenant) { - maintenant *= 0.001; // convertir en seconds - const ecartTemps = maintenant - alors; - alors = maintenant; + // Dessiner la scène répétitivement + function dessiner(maintenant) { + maintenant *= 0.001; // convertir en seconds + const ecartTemps = maintenant - alors; + alors = maintenant; - if (copierVideo) { - mettreAJourTexture(gl, texture, video); - } + if (copierVideo) { + mettreAJourTexture(gl, texture, video); + } - dessinerScene(gl, programInfo, buffers, texture, ecartTemps); + dessinerScene(gl, programInfo, buffers, texture, ecartTemps); - requestAnimationFrame(dessiner); - } - requestAnimationFrame(dessiner); + requestAnimationFrame(dessiner); + } + requestAnimationFrame(dessiner); ``` -C'est tout pour ce qu'il y a à faire pour cela ! +C'est tout pour ce qu'il y a à faire pour cela ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) ## Voir aussi -- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) +- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md index 3691a94ab7..c70f056a65 100644 --- a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} -Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. +Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. -Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. +Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. ## Définir la position des sommets du cube -Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : +Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : ```js const positions = [ @@ -57,7 +57,7 @@ Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le ]; ``` -Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. +Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. // Indiquer à WebGL comment extraire les positions du tampon des // positions dans l'attribut vertexPosition @@ -75,9 +75,9 @@ Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoi programInfo.attribLocations.vertexPosition); } -## Définir les couleurs des sommets +## Définir les couleurs des sommets -Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. +Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. ```js const faceColors = [ @@ -96,9 +96,9 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 for (j=0; j<faceColors.length; j++) { const c = faceColors[j]; - // Répéter chaque couleur quatre fois pour les quatre sommets d'une face + // Répéter chaque couleur quatre fois pour les quatre sommets d'une face colors = colors.concat(c, c, c, c); - } + } const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); @@ -107,7 +107,7 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 ## Définir le tableau des éléments -Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. +Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. ```js const indexBuffer = gl.createBuffer(); @@ -115,7 +115,7 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l // Ce tableau définit chaque face comme deux triangles, en utilisant les // indices dans le tableau des sommets pour spécifier la position de chaque - // triangle. + // triangle. const indices = [ 0, 1, 2, 0, 2, 3, // avant @@ -139,11 +139,11 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l } ``` -Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. +Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. -## Dessiner le cube +## Dessiner le cube -Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : +Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : // Indiquer à WebGL quels indices utiliser pour indexer les sommets gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices); @@ -157,16 +157,16 @@ Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessin gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); } -Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. +Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. -Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : +Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]); -À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. +À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. {{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 737b272fbe..42b8c9db22 100644 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -7,25 +7,25 @@ tags: translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL --- -{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) 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. +{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) 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. -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. +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. -Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). +Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). -## Préparation au rendu 3D +## Préparation au rendu 3D -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. +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. ```html <body> - <canvas id="glCanvas" width="640" height="480"></canvas> + <canvas id="glCanvas" width="640" height="480"></canvas> </body> ``` -### Préparation du contexte WebGL +### Préparation du contexte WebGL -La fonction `main()` 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. +La fonction `main()` 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. ```js main(); @@ -34,39 +34,39 @@ main(); // Début ici // function main() { - const canvas = document.querySelector("#glCanvas"); - // Initialisation du contexte WebGL - const gl = canvas.getContext("webgl"); + const canvas = document.querySelector("#glCanvas"); + // Initialisation du contexte WebGL + const gl = canvas.getContext("webgl"); - // Continuer seulement si WebGL est disponible et fonctionnel - if (!gl) { - alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); - return; - } + // Continuer seulement si WebGL est disponible et fonctionnel + if (!gl) { + alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); + return; + } // Définir la couleur d'effacement comme étant le noir, complètement opaque - gl.clearColor(0.0, 0.0, 0.0, 1.0); - // Effacer le tampon de couleur avec la couleur d'effacement spécifiée - gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + // Effacer le tampon de couleur avec la couleur d'effacement spécifiée + gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); } ``` -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 `canvas`. +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 `canvas`. -Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. +Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. -Si le contexte est initialisé avec succès, la variable `gl` 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). +Si le contexte est initialisé avec succès, la variable `gl` 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). -A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. +A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. {{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) ## Voir aussi -- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. +- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. - [WebGL Fundamentals](http://webglfundamentals.org/) -- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) 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. +- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) 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. {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} diff --git a/files/fr/web/api/webgl_api/tutorial/index.md b/files/fr/web/api/webgl_api/tutorial/index.md index 520e336ac2..852ae42ef7 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.md +++ b/files/fr/web/api/webgl_api/tutorial/index.md @@ -10,29 +10,29 @@ translation_of: Web/API/WebGL_API/Tutorial --- {{WebGLSidebar}} -[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 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. +[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 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. -Ce tutoriel décrit comment utiliser l'élément `<canvas>` 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. +Ce tutoriel décrit comment utiliser l'élément `<canvas>` 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. -## Avant que vous ne commenciez +## Avant que vous ne commenciez -L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` 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. +L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` 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. ## Dans ce tutoriel - [Commencer avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL) - - : Comment mettre en place un contexte WebGL. + - : Comment mettre en place un contexte WebGL. - [Ajouter du contenu à WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL) - - : Comment faire un rendu simple de figures planes avec WebGL. + - : Comment faire un rendu simple de figures planes avec WebGL. - [Ajouter des couleurs avec les nuanceurs](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders) - - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. -- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) - - : Montre comment tourner et déplacer des objets pour créer des animations simples. -- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) - - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). + - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. +- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) + - : Montre comment tourner et déplacer des objets pour créer des animations simples. +- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) + - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). - [Utilisation des textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL) - - : Démontrer comment appliquer des textures sur les faces d'un objet. + - : Démontrer comment appliquer des textures sur les faces d'un objet. - [Éclairage en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL) - - : Comment simuler des effets d'illumination dans votre contexte WebGL. -- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) - - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. + - : Comment simuler des effets d'illumination dans votre contexte WebGL. +- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) + - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. diff --git a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md index b1a843894d..7ec788e459 100644 --- a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md @@ -10,22 +10,22 @@ La première chose à comprendre à propos de WebGL est que contrairement au sta ## Simuler l'éclairage et les ombres en 3D -Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. +Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. Il y a trois types basiques d'éclairage : -1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. -2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. -3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. +1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. +2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. +3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre [précédent exemple avec le cube en rotation](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. +Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. 1. Nous avons besoin d'associer la **surface normale** avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet. 2. Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur. -Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. +Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. ## Créer les normales pour les sommets @@ -76,7 +76,7 @@ var vertexNormals = [ gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW); ``` -Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. +Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. Ensuite nous allons ajouter le code à la fonction `drawScene()` pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès : @@ -133,11 +133,11 @@ La première chose à faire est de mettre à jour le vertex shader en générant </script> ``` -Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. +Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas. -Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. +Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. ### Le fragment shader @@ -158,7 +158,7 @@ Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte </script> ``` -Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. +Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. Et c'est tout ! @@ -166,11 +166,11 @@ Et c'est tout ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) ## Exercices -Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. +Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc.. diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md index 8b0ab94f97..239c6364e4 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} -Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), 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. +Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), 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. -## Application de couleur aux sommets +## Application de couleur aux sommets -En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. +En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. -Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : +Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : const colors = [ 1.0, 1.0, 1.0, 1.0, // blanc @@ -34,7 +34,7 @@ Supposons que nous voulions faire un rendu en dégradé dans lequel chaque co }; } -Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. +Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs : @@ -55,7 +55,7 @@ Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doi La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un `varying`. -## Coloriage des fragments +## Coloriage des fragments Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment : @@ -65,7 +65,7 @@ Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragme } `; -Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : +Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : const fsSource = ` varying lowp vec4 vColor; @@ -77,9 +77,9 @@ Afin de choisir la couleur interpolée pour chaque pixel, nous devons le change La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau. -## Dessiner en utilisant les couleurs +## Dessiner en utilisant les couleurs -Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : +Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : const programInfo = { program: shaderProgram, @@ -113,6 +113,6 @@ Ensuite, `drawScene()` peut être modifié pour utiliser réellement ces couleur {{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index 330163b207..24a8e984c8 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -9,15 +9,15 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} -Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. +Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. -## Chargement des textures +## Chargement des textures -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. +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. -> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; 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. +> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; 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. -Le code qui charge la texture ressemble à ce qui suit : +Le code qui charge la texture ressemble à ce qui suit : // // Initialiser une texture et charger une image. @@ -52,13 +52,13 @@ Le code qui charge la texture ressemble à ce qui suit : // WebGL1 a des spécifications différentes pour les images puissances de 2 // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une - // puissance de 2 sur chacune de ses dimensions. + // puissance de 2 sur chacune de ses dimensions. if (isPowerOf2(image.width) && isPowerOf2(image.height)) { // Oui, c'est une puissance de 2. Générer les mips. gl.generateMipmap(gl.TEXTURE_2D); } else { // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage - // comme "accrocher au bord" + // comme "accrocher au bord" gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -73,15 +73,15 @@ Le code qui charge la texture ressemble à ce qui suit : return (value & (value - 1)) == 0; } -La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. +La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. -Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. +Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. -WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. +WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. -Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. +Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. -Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. +Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. // gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -90,16 +90,16 @@ Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref (" // Empêcher l'habillage selon la coordonnée t (répétition). gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); -A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. +A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. -Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. +Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. // Charger la texture const texture = loadTexture(gl, 'cubetexture.png'); -## Application de la texture sur les faces +## Application de la texture sur les faces -À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. +À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. const textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); @@ -149,17 +149,17 @@ Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire. -Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. +Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. -Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. +Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. ## Mise à jour des shaders -Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. +Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. -### Le shader de sommet +### Le shader de sommet -Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. +Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. const vsSource = ` attribute vec4 aVertexPosition; @@ -176,9 +176,9 @@ Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu } `; -Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. +Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. -### Le shader de fragment +### Le shader de fragment Le shader de fragment doit également être mis à jour : @@ -192,7 +192,7 @@ Le shader de fragment doit également être mis à jour : } `; -Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. +Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. ### Emplacements des attributs et des uniformes @@ -211,7 +211,7 @@ Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons r }, }; -## Dessin du cube texturé +## Dessin du cube texturé Les modifications apportées à la fonction `drawScene()` sont simples. @@ -229,7 +229,7 @@ Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord); } -Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : +Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : // Indiquer à WebGL que nous voulons affecter l'unité de texture 0 gl.activeTexture(gl.TEXTURE0); @@ -240,9 +240,9 @@ Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, ju // Indiquer au shader que nous avons lié la texture à l'unité de texture 0 gl.uniform1i(programInfo.uniformLocations.uSampler, 0); -WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. +WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. -Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. +Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. drawScene(gl, programInfo, buffers, texture, deltaTime); ... @@ -252,19 +252,19 @@ Arrivés ce point, le cube en rotation devrait être prêt à fonctionner. {{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) ## Textures inter-domaines -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 [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. +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 [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. Voir cet [article sur hacks.mozilla.org](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec [un exemple complet](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html). -> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. +> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. -Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. +Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. -> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. +> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. > **Note :** le support CORS pour les vidéos inter-domaines et l'attribut `crossorigin` pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}. diff --git a/files/fr/web/api/webgl_api/types/index.md b/files/fr/web/api/webgl_api/types/index.md index 1b345e92f1..7b6fab68e7 100644 --- a/files/fr/web/api/webgl_api/types/index.md +++ b/files/fr/web/api/webgl_api/types/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGL_API/Types --- {{WebGLSidebar}} -Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). +Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). ## WebGL 1 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. <table class="standard-table"> <tbody> @@ -26,7 +26,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" <td><code>GLenum</code></td> <td><code>unsigned long</code></td> <td> - Utilisé pour les enums. Voir aussi la liste des <a + Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants" >constantes</a >. @@ -108,7 +108,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" ## WebGL 2 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. <table class="standard-table"> <tbody> @@ -127,7 +127,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext ## Extensions WebGL -Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). +Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). <table class="standard-table"> <tbody> @@ -150,7 +150,7 @@ Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web | -------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------- | | {{SpecName('WebGL', "#5.1", "Types")}} | {{Spec2('WebGL')}} | Définition initiale | | {{SpecName('WebGL2', "#3.1", "Types")}} | {{Spec2('WebGL2')}} | Définit des types supplémentaires. | -| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | +| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | ## Voir aussi diff --git a/files/fr/web/api/webglbuffer/index.md b/files/fr/web/api/webglbuffer/index.md index 3ab7690e25..d11165008d 100644 --- a/files/fr/web/api/webglbuffer/index.md +++ b/files/fr/web/api/webglbuffer/index.md @@ -57,4 +57,4 @@ var tampon = gl.createBuffer(); - {{domxref("WebGLRenderingContext.createBuffer()")}} - {{domxref("WebGLRenderingContext.deleteBuffer()")}} - {{domxref("WebGLRenderingContext.isBuffer()")}} -- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} +- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} diff --git a/files/fr/web/api/webglprogram/index.md b/files/fr/web/api/webglprogram/index.md index c102390862..d3b200dd19 100644 --- a/files/fr/web/api/webglprogram/index.md +++ b/files/fr/web/api/webglprogram/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLProgram --- {{APIRef("WebGL")}} -Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. +Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. ```js var programme = gl.createProgram(); @@ -25,13 +25,13 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. +Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. ## Exemples -### Utilisation du programme +### Utilisation du programme -Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. +Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. ```js // Utiliser le programme @@ -46,9 +46,9 @@ gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); ``` -### Suppression du programme +### Suppression du programme -S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. +S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. ```js gl.deleteProgram(programme); diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.md b/files/fr/web/api/webglrenderingcontext/activetexture/index.md index 86065baf61..27b4e23422 100644 --- a/files/fr/web/api/webglrenderingcontext/activetexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/activeTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. +La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-F ### Paramètres - `texture` - - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. + - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. ### Valeur retournée @@ -28,23 +28,23 @@ Aucune. ### Exceptions -Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. +L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. ```js gl.activeTexture(gl.TEXTURE1); ``` -Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. +Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. ```js gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); ``` -Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. +Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. ```js gl.activeTexture(gl.TEXTURE0); diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.md b/files/fr/web/api/webglrenderingcontext/attachshader/index.md index 0cda2deaaa..68bb552030 100644 --- a/files/fr/web/api/webglrenderingcontext/attachshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLRenderingContext/attachShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -19,11 +19,11 @@ La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/d - `programme` - : Un {{domxref("WebGLProgram")}}. - `shader` - - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. + - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. ## Exemples -Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. +Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. ```js var programme = gl.createProgram(); diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md index 33c12df96c..8bad4008f2 100644 --- a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md @@ -24,7 +24,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> -- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; +- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; - `gl.ELEMENT_ARRAY_BUFFER` : tampon utilisé pour les indices d'éléments ; - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus : @@ -38,7 +38,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> - tampon - - : Un {{domxref ("WebGLBuffer")}} à lier. + - : Un {{domxref ("WebGLBuffer")}} à lier. ### Valeur retournée @@ -46,7 +46,7 @@ Aucune. ### Exceptions -Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. +Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. ## Exemples @@ -81,7 +81,7 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <tr> <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> @@ -94,9 +94,9 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> - <p>Définition mise à jour pour WebGL 2.</p> + <p>Définition mise à jour pour WebGL 2.</p> <p> - Ajoute de nouveaux tampons <code>cible</code> :<br /><code + Ajoute de nouveaux tampons <code>cible</code> :<br /><code >gl.COPY_READ_BUFFER</code >,<br /><code>gl.COPY_WRITE_BUFFER</code>,<br /><code >gl.TRANSFORM_FEEDBACK_BUFFER</code diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md index fd75432b79..cb41fafb32 100644 --- a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/bindTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). +La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). ## Syntaxe @@ -24,12 +24,12 @@ La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{d - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bidimensionnelle ; + - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - `gl.TEXTURE_CUBE_MAP` : une texture mappée sur un cube ; - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - `gl.TEXTURE_3D` : une texture tridimensionnelle ; - - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. - texture - : Un objet {{domxref ("WebGLTexture")}} à lier. @@ -40,11 +40,11 @@ Aucune. ### Exceptions -Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. +Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. ## Exemples -### Liaison d'une texture +### Liaison d'une texture ```js var canevas = document.getElementById('canevas'); @@ -56,7 +56,7 @@ gl.bindTexture(gl.TEXTURE_2D, texture); ### Obtention des liaisons en cours -Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. +Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. ```js gl.getParameter(gl.TEXTURE_BINDING_2D); @@ -74,21 +74,21 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); <tr> <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> Définition mise à jour pour WebGL 2.<br />Ajoute : - <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> + <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> </td> </tr> <tr> @@ -96,7 +96,7 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); {{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md index acab216dbb..2f9225277d 100644 --- a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md +++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md @@ -36,33 +36,33 @@ La méthode **`WebGLRenderingContext.bufferData()`** de l'[API WebGL](/fr-FR/doc - `gl.COPY_READ_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.COPY_WRITE_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.TRANSFORM_FEEDBACK_BUFFER` : tampon pour les opérations de retour de transformation ; - - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; + - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; - `gl.PIXEL_PACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels ; - `gl.PIXEL_UNPACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels. - taille - - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. + - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. - donneesSrc {{optional_inline}} - - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. + - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. - utilisation - : Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : - - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : + - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : - - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. + - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. - decalageSrc - : Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon. -- `longueur` {{optional_inline}} +- `longueur` {{optional_inline}} - : Un {{domxref("GLuint")}} valant 0 par défaut. ### Valeur retournée @@ -71,9 +71,9 @@ Aucune. ### Exceptions -- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. -- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. -- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. +- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. +- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. +- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. ## Exemples @@ -89,7 +89,7 @@ gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); ### Récupération de l'information de tampon -Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. +Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. ```js gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.md b/files/fr/web/api/webglrenderingcontext/canvas/index.md index e6d36646bd..c9f6d0d537 100644 --- a/files/fr/web/api/webglrenderingcontext/canvas/index.md +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.md @@ -19,13 +19,13 @@ La propriété `WebGLRenderingContext.canvas` est une référence en lecture seu ### Valeur retournée -Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. +Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. ## Exemples ### Élément canevas -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> @@ -41,7 +41,7 @@ gl.canvas; // HTMLCanvasElement ### Canevas hors écran -Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. +Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. ```js var horsEcran = new OffscreenCanvas(256, 256); diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.md b/files/fr/web/api/webglrenderingcontext/clear/index.md index 803a50fd26..a21224f44b 100644 --- a/files/fr/web/api/webglrenderingcontext/clear/index.md +++ b/files/fr/web/api/webglrenderingcontext/clear/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/WebGLRenderingContext/clear --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. +La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. -Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. +Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. -Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. +Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. ## Syntaxe @@ -25,7 +25,7 @@ Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecte - `masque` - - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : + - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : - `gl.COLOR_BUFFER_BIT` - `gl.DEPTH_BUFFER_BIT` @@ -37,18 +37,18 @@ Aucune. ### Exceptions -Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -La méthode `clear()` accepte des valeurs multiples. +La méthode `clear()` accepte des valeurs multiples. ```js gl.clear(gl.DEPTH_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); ``` -Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. +Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. ```js gl.getParameter(gl.COLOR_CLEAR_VALUE); diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.md b/files/fr/web/api/webglrenderingcontext/compileshader/index.md index e0334e3e36..deab94fb53 100644 --- a/files/fr/web/api/webglrenderingcontext/compileshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/compileShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/ ### Paramètres - `shader` - - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. + - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.md b/files/fr/web/api/webglrenderingcontext/createprogram/index.md index cf6ce1d9b9..56613c8b85 100644 --- a/files/fr/web/api/webglrenderingcontext/createprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.md @@ -23,11 +23,11 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. +Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. ## Exemples -### Création d'un programme WebGL +### Création d'un programme WebGL ```js var programme = gl.createProgram(); @@ -44,7 +44,7 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. +Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.md b/files/fr/web/api/webglrenderingcontext/createshader/index.md index a2e973949c..8de71539dd 100644 --- a/files/fr/web/api/webglrenderingcontext/createshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/createshader/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/createShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. +La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. ## Syntaxe @@ -21,11 +21,11 @@ La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/do ### Paramètres - `type` - - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` + - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` ## Exemples -Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. +Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.md b/files/fr/web/api/webglrenderingcontext/createtexture/index.md index a073857b80..a856c96784 100644 --- a/files/fr/web/api/webglrenderingcontext/createtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.md @@ -24,13 +24,13 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. +Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. ## Exemples -Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -### Création d'une texture +### Création d'une texture ```js var canevas = document.getElementById('canevas'); @@ -57,7 +57,7 @@ var texture = gl.createTexture(); {{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td>Page man de l’API OpenGL (similaire).</td> + <td>Page man de l’API OpenGL (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md index 47fbedaa04..b544dfdcdf 100644 --- a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteBuffer --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. +La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md index 82f2677183..5388dbf0f8 100644 --- a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteShader --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. +La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md index f9d4ce2d0d..953099804b 100644 --- a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md +++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/drawArrays --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. +La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. ## Syntaxe @@ -23,18 +23,18 @@ La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : - - `gl.POINTS` : dessine un seul point ; - - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; - - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; - - `gl.LINES` : dessine une ligne entre une paire de sommets ; + - `gl.POINTS` : dessine un seul point ; + - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; + - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; + - `gl.LINES` : dessine une ligne entre une paire de sommets ; - [`gl.TRIANGLE_STRIP`](https://en.wikipedia.org/wiki/Triangle_strip) - [`gl.TRIANGLE_FAN`](https://en.wikipedia.org/wiki/Triangle_fan) - - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. + - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. - `premier` - - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. + - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. - `compte` - - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. + - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. ### Valeur retournée @@ -42,9 +42,9 @@ None. ### Exceptions -- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. -- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. -- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. +- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. +- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. +- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. ## Exemples @@ -64,10 +64,7 @@ gl.drawArrays(gl.POINTS, 0, 8); <tr> <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td> <td>{{Spec2('WebGL')}}</td> - <td> - <p> </p> - Définition initiale. - </td> + <td>Définition initiale.</td> </tr> <tr> <td> diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.md b/files/fr/web/api/webglrenderingcontext/enable/index.md index d207dd636e..ee111a31cc 100644 --- a/files/fr/web/api/webglrenderingcontext/enable/index.md +++ b/files/fr/web/api/webglrenderingcontext/enable/index.md @@ -22,7 +22,7 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn - `fon` - - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : | Constante | Description | | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -30,17 +30,17 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn | `gl.CULL_FACE` | Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}. | | `gl.DEPTH_TEST` | Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}. | | `gl.DITHER` | Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur. | - | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | + | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | | `gl.SAMPLE_ALPHA_TO_COVERAGE` | Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha. | | `gl.SAMPLE_COVERAGE` | Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}. | | `gl.SCISSOR_TEST` | Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}. | | `gl.STENCIL_TEST` | Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}. | - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : | Constante | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | + | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | ### Valeur retournée @@ -52,7 +52,7 @@ Aucune. gl.enable(gl.DITHER); ``` -Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : +Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : ```js gl.isEnabled(gl.DITHER); @@ -63,7 +63,7 @@ gl.isEnabled(gl.DITHER); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ | -| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL ES 2.0. | | {{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API OpenGL ES 3.0 API. | diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md index 0ef32e590c..4f7b56545d 100644 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md @@ -19,13 +19,13 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray --- {{APIRef("WebGL")}} -La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** 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. +La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** 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. -> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. +> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. 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. -De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. +De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. ## Syntaxe @@ -42,14 +42,14 @@ De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils ### Erreurs -Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. +Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. - `WebGLRenderingContext.INVALID_VALUE` - - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. + - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. ## Exemple -Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` 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. +Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` 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. ```js gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); @@ -66,11 +66,11 @@ gl.drawArrays(gl.TRIANGLES, 0, vertexCount); > **Note :** Cet extrait de code provient de [la fonction animateScene()](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene) 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. -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()")}}. +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()")}}. -Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). +Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). -Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. +Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. Avec l'association définie entre le tampon des sommets de notre forme et l'attribut `aVertexPosition` 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()")}}. @@ -106,7 +106,7 @@ Avec l'association définie entre le tampon des sommets de notre forme et l'attr ## Voir aussi -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) -- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) -- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) +- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) +- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}} diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md index c9d4cdbca6..a034a62dd0 100644 --- a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md +++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/WebGLRenderingContext/generateMipmap --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. +La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. -Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. +Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. ## Syntaxe @@ -24,14 +24,14 @@ Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipm - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. ### Valeur retournée @@ -47,9 +47,9 @@ gl.generateMipmap(gl.TEXTURE_2D); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------- | -| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API (similaire) d'OpenGL ES 2.0. | -| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | +| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md index 8242d0739b..8bb49977b6 100644 --- a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.getAttribLocation()`** de l'[API WebGL](/fr ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. + - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. - nom - - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. + - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. ### Valeur retournée -Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. +Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.md b/files/fr/web/api/webglrenderingcontext/geterror/index.md index cd310e0a29..3831b1a753 100644 --- a/files/fr/web/api/webglrenderingcontext/geterror/index.md +++ b/files/fr/web/api/webglrenderingcontext/geterror/index.md @@ -31,7 +31,7 @@ Aucun. | `gl.INVALID_OPERATION` | La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné. | | `gl.INVALID_FRAMEBUFFER_OPERATION` | Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture. | | `gl.OUT_OF_MEMORY` | Plus assez de mémoire restante pour exécuter la commande. | -| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | +| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md index e89237d889..884ccb5545 100644 --- a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md @@ -25,13 +25,13 @@ La méthode `WebGLRenderingContext.getShaderParameter()` de l'API WebGL retourne - : Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : - - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. - - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. - - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). + - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. + - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. + - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). ### Valeur retournée -Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). +Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). ## Exemples @@ -44,7 +44,7 @@ gl.getShaderParameter(shader, gl.SHADER_TYPE); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- | | {{SpecName('WebGL', "#5.14.9", "getShaderParameter")}} | {{Spec2('WebGL')}} | Définition initiale. | -| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | +| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md index 38342d8c00..c6c8478a87 100644 --- a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/getTexParameter --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. +La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. ## Syntaxe @@ -22,18 +22,18 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. - Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. - nomp - - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : + - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : <table class="standard-table"> <thead> @@ -71,7 +71,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_WRAP_S</code></td> <td>{{domxref("GLenum")}}</td> - <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -107,7 +107,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_BASE_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau de mipmap de texture</td> + <td>Niveau de mipmap de texture</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -144,7 +144,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_MAX_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau maximum de mipmap de texture en tableau</td> + <td>Niveau maximum de mipmap de texture en tableau</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -163,7 +163,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <td><code>gl.TEXTURE_WRAP_R</code></td> <td>{{domxref("GLenum")}}</td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), @@ -175,7 +175,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr ### Valeur retournée -Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. +Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md index 27f389fd28..0d35e4663f 100644 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md @@ -14,7 +14,7 @@ tags: - getUniformLocation translation_of: Web/API/WebGLRenderingContext/getUniformLocation --- -{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : +{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : - {{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}} - : Retourne la valeur de l'uniform à l'emplacement indiqué. @@ -40,9 +40,9 @@ L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL. Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place. -`WebGLUniformLocation` 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. +`WebGLUniformLocation` 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. -> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. +> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. ### Erreurs diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md index bc696a54f4..f0d72924e8 100644 --- a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md @@ -23,11 +23,11 @@ La méthode **`WebGLRenderingContext.isBuffer()`** de l'[API WebGL](/fr-FR/docs/ ### Valeur retournée -Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. +Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. ## Exemples -### Création d'un tampon +### Création d'un tampon ```js var canevas = document.getElementById('canevas'); diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.md b/files/fr/web/api/webglrenderingcontext/shadersource/index.md index 91b7d1629e..d675986fd2 100644 --- a/files/fr/web/api/webglrenderingcontext/shadersource/index.md +++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/shaderSource --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. +La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/ ### Parameters - shader - - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. + - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. - source - - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. + - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md index c8d54e80c9..2622f2ea20 100644 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md @@ -40,24 +40,24 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_POSITIVE_Z` : face Z positive pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z` : face Z négative pour une texture mappée sur un cube. - `niveau` - - : 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. + - : 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. - `formatinterne` - : Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles : - - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; - - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; - - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; - - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; - - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; + - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; + - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; + - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; + - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; + - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; - lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : - `gl.DEPTH_COMPONENT` @@ -109,10 +109,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles : - - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; - - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; - - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; - - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; + - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; + - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; + - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; + - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; - lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : - `gl.UNSIGNED_SHORT` @@ -140,7 +140,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - `gl.UNSIGNED_INT_10F_11F_11F_REV` - `gl.UNSIGNED_INT_5_9_9_9_REV` - `gl.UNSIGNED_INT_24_8` - - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) + - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) - `pixels` @@ -148,10 +148,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ArrayBufferView")}}, - - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; - - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; - - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; - - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; + - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; + - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; + - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; + - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; - {{domxref("ImageData")}}, - {{domxref("HTMLImageElement")}}, @@ -160,7 +160,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ImageBitmap")}}. - **`decalage`** - - : (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 `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. + - : (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 `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. ### Valeur retournée @@ -184,14 +184,14 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); <tr> <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td> @@ -203,7 +203,7 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); {{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.md b/files/fr/web/api/webglrenderingcontext/texparameter/index.md index 705a95ba60..83d82e2a4e 100644 --- a/files/fr/web/api/webglrenderingcontext/texparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/texParameter --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. +Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. ## Syntaxe @@ -23,16 +23,16 @@ Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL]( - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionelle. - - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionelle. + - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. -Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. +Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. <table class="standard-table"> <thead> @@ -74,7 +74,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de </tr> <tr> <td><code>gl.TEXTURE_WRAP_T</code></td> - <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -137,7 +137,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de <tr> <td><code>gl.TEXTURE_WRAP_R</code></td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.md b/files/fr/web/api/webglrenderingcontext/uniform/index.md index 6dea122f90..b1f460cf16 100644 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/WebGLRenderingContext/uniform --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. +Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. -> **Note :** 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]()")}}. +> **Note :** 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]()")}}. ## Syntaxe @@ -40,15 +40,15 @@ Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebG ### Paramètres - emplacement - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. - `valeur, v0, v1, v2, v3` - - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : + - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : - - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). - - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). - - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). - - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). + - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). + - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). + - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). + - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md index 7b3c46bc01..6193468153 100644 --- a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md @@ -31,11 +31,11 @@ Les trois versions de cette méthode (`uniformMatrix2fv()`, `uniformMatrix3fv()` ### Paramètres - `emplacement` - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. - `transposer` - - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. + - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. - `valeur` - - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. + - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. ### Valeur retournée @@ -80,4 +80,4 @@ gl.uniformMatrix2fv(loc, false, [2.1, 2.2]); ## Voir aussi - {{domxref("WebGLRenderingContext.uniform()")}} -- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. +- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.md b/files/fr/web/api/webglrenderingcontext/useprogram/index.md index 5c9c37bf30..84af6755f8 100644 --- a/files/fr/web/api/webglrenderingcontext/useprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.md @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.useProgram()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} à utiliser. + - : Un {{domxref("WebGLProgram")}} à utiliser. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md index 67b5679fe0..c284555148 100644 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md @@ -25,29 +25,29 @@ La méthode **`WebGLRenderingContext.vertexAttribPointer()`** de l'[API WebGL](/ - : Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4. - `type` - - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : + - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : - `gl.BYTE` : entier signé sur 8 bits, à valeurs dans \[-128, 127] - `gl.SHORT` : entier signé sur 16 bits, à valeurs dans \[-32768, 32767] - `gl.UNSIGNED_BYTE` : entier non signé sur 8 bits, à valeurs dans \[0, 255] - `gl.UNSIGNED_SHORT` : entier non signé sur 16 bits, à valeurs dans \[0, 65535] - `gl.FLOAT` : nombre flottant IEEE 32 bits - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : - - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits + - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits - `normalise` - - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. + - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. - Pour les types `gl.BYTE` et `gl.SHORT`, normalise les valeurs à \[-1, 1] si `true`. - Pour les types `gl.UNSIGNED_BYTE` et `gl.UNSIGNED_SHORT`, normalise les valeurs à \[0, 1] si `true`. - Pour les types `gl.FLOAT` et `gl.HALF_FLOAT`, ce paramètre est sans effet. - `pas` - - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. + - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. - `decalage` - - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. + - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. ### Valeur retournée @@ -55,26 +55,26 @@ Aucune. ### Exceptions -- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. -- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). +- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. +- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). ## Description -Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. +Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. -Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. +Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler `gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure. ### Indice d'attribut -Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : +Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : - Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à `gl.vertexAttribPointer()`. - En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à `gl.vertexAttribPointer()`. - Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. + Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. ### Attributs entiers @@ -84,19 +84,19 @@ Bien que le `ArrayBuffer` puisse être rempli à la fois d'entiers et de flottan Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler `{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}` pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec `gl.vertexAttribPointer()`. -De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. +De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. La valeur par défaut est `vec4(0.0, 0.0, 0.0, 1.0)` par défaut, mais nous pouvons spécifier une valeur par défaut différente avec `{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}`. -Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. +Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. -### Interrogation des paramètres en cours +### Interrogation des paramètres en cours Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application. ## Exemples -Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : +Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : 1. **position :** nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ; 2. **vecteur normal :** nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage \[-1, 1] ; @@ -163,9 +163,9 @@ const response = await fetch('assets/geometry.bin'); const tampon = await response.arrayBuffer(); ``` -### Utiliser le tampon de tableaux avec WebGL +### Utiliser le tampon de tableaux avec WebGL -Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : +Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : ```js // Lier le tampon de tableaux à l'Objet Tampon de Sommets @@ -174,7 +174,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, ots); gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); ``` -Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : +Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : ```js // Décrire la disposition du tampon : @@ -197,7 +197,7 @@ gl.bindAttribLocation(shaderProgram, 2, 'texUV'); gl.linkProgram(shaderProgram); ``` -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. +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. ```js const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); @@ -245,4 +245,4 @@ gl.enableVertexAttribArray(texUVLoc); ## Voir aussi -- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL +- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.md b/files/fr/web/api/webglrenderingcontext/viewport/index.md index beed6333a7..64ae294ac9 100644 --- a/files/fr/web/api/webglrenderingcontext/viewport/index.md +++ b/files/fr/web/api/webglrenderingcontext/viewport/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/viewport --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. +La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. ## Syntaxe @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - `x` - - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - `y` - - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - largeur - - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. - height - - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. ### Valeur retournée @@ -34,7 +34,7 @@ Aucune. ### Erreurs déclenchées -Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. +Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. ## Exemples @@ -51,7 +51,7 @@ gl.getParameter(gl.MAX_VIEWPORT_DIMS); // Par ex., Int32Array[16384, 16384] ``` -Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. +Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. ```js gl.getParameter(gl.VIEWPORT); diff --git a/files/fr/web/api/webglshader/index.md b/files/fr/web/api/webglshader/index.md index 291bdcf503..99b31cc20b 100644 --- a/files/fr/web/api/webglshader/index.md +++ b/files/fr/web/api/webglshader/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGLShader --- {{APIRef("WebGL")}} -Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. +Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. ## Description -Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. +Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. ```js function creerShader (gl, codeSource, type) { @@ -30,13 +30,13 @@ function creerShader (gl, codeSource, type) { } ``` -Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. +Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. ## Exemples -### Création d'un shader de sommet +### Création d'un shader de sommet -Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. +Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. ```js var sourceShaderDeSommet = @@ -49,7 +49,7 @@ var sourceShaderDeSommet = var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER) ``` -### Création d'un shader de fragment +### Création d'un shader de fragment ```js var sourceShaderDeFragment = diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md index 938107b7b0..8bb0cb8bf6 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -7,15 +7,15 @@ 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 --- -Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), 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 +Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), 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 -## Contenu semi-ancien, à partir de RTCPeerConnection +## Contenu semi-ancien, à partir de RTCPeerConnection -Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. +Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. ## Usage basique -l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. +l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer: @@ -42,9 +42,9 @@ function error(err) { } ``` -**Initialiser un appel** +**Initialiser un appel** -l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. +l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. ```js // recuperer la liste des "amis" a partir du serveur @@ -65,9 +65,9 @@ navigator.getUserMedia({video: true}, function(stream) { **Répondre à un appel** -sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. +sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. -Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. +Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. ```js var offer = getOfferFromFriend(); @@ -87,7 +87,7 @@ navigator.getUserMedia({video: true}, function(stream) { **Gestion de la réponse** -retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. +retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. ```js // pc a été déclaré précédemment, lors de l'envoi de l'offre. @@ -99,7 +99,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) 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. -> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. +> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. ## Note diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md index 95aca76612..485e6f8821 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.md +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md @@ -182,7 +182,7 @@ Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons }, false); ``` -Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. +Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. ```js function takepicture() { diff --git a/files/fr/web/api/websocket/binarytype/index.md b/files/fr/web/api/websocket/binarytype/index.md index 9cb18c285b..0a66848f48 100644 --- a/files/fr/web/api/websocket/binarytype/index.md +++ b/files/fr/web/api/websocket/binarytype/index.md @@ -15,7 +15,7 @@ var binaryType = aWebSocket.binaryType; ## Valeur -Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : +Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : - `"blob"` - : Utilise des objets [`Blob`](/fr/docs/Web/API/Blob) pour les données binaires. Il s'agit de la valeur par défaut. diff --git a/files/fr/web/api/websockets_api/index.md b/files/fr/web/api/websockets_api/index.md index e82c924000..d8cc4685f7 100644 --- a/files/fr/web/api/websockets_api/index.md +++ b/files/fr/web/api/websockets_api/index.md @@ -21,14 +21,14 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d > **Note :** Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées. -## Interfaces +## Interfaces - [`WebSocket`](/fr/docs/WebSockets/Writing_WebSocket_client_applications) - - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. + - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. - [`CloseEvent`](/fr/docs/Web/API/CloseEvent) - - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. + - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. - [`MessageEvent`](/fr/docs/Web/API/MessageEvent) - - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. + - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. ## Guides @@ -39,19 +39,19 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d ## Outils -- [HumbleNet](https://humblenet.github.io/) :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. -- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). -- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). -- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). -- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). 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. +- [HumbleNet](https://humblenet.github.io/) :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. +- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). +- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). +- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). +- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). 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. - [Node.js](http://nodejs.org). -- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). -- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). -- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). 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. -- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). -- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). +- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). +- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). +- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). 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. +- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). +- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). - [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): 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). -- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. +- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. ## Ressources liées diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md index 19714ade67..eb75b9dab1 100644 --- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md +++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -20,7 +20,7 @@ WebSockets communique via une connexion [TCP (Transmission Control Protocol)](ht Constructeur : ```java -ServerSocket(int port) +ServerSocket(int port) ``` Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre _port_. @@ -58,7 +58,7 @@ Méthodes : Méthode : ```java -write(byte[] b, int off, int len) +write(byte[] b, int off, int len) ``` En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d'octets fourni. @@ -68,7 +68,7 @@ En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d' Méthodes : ```java -read(byte[] b, int off, int len) +read(byte[] b, int off, int len) ``` Reads up to _len_ bytes of data from the input stream into an array of bytes. diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md index 4becad44ad..8d22b4ff58 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -3,7 +3,7 @@ title: Ecrire des applications client WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications --- -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. +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. > **Note :** 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. @@ -16,19 +16,19 @@ Pour utiliser le protocole WebSocket, il faut créer un objet [`WebSocket`](/en/ Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel : WebSocket WebSocket( - in DOMString url, - in optional DOMString protocols + in DOMString url, + in optional DOMString protocols ); WebSocket WebSocket( - in DOMString url, - in optional DOMString[] protocols + in DOMString url, + in optional DOMString[] protocols ); - `url` - : L'URL à laquelle le client se connecte, et le serveur répond. - `protocols` {{ optional_inline() }} - - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. + - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. Le constructeur peut renvoyer des exceptions: @@ -39,13 +39,13 @@ Le constructeur peut renvoyer des exceptions: ### Erreurs de connexion -Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. +Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. 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 [RFC 6455, Section 7.4](http://tools.ietf.org/html/rfc6455#section-7.4) est envoyé à travers l'évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent). ### Exemples -Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. +Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. ```js var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); @@ -61,13 +61,13 @@ var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protoco Une fois la connexion établie (c'est-à-dire quand `readyState` a la valeur `OPEN`), la propriété `protocol` indique quel protocole le server a sélectionné. -Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . 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 `ws://www.example.com` ou `wss://www.example.com`. +Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . 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 `ws://www.example.com` ou `wss://www.example.com`. ## Envoi de données vers le serveur -Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : +Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : -Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). +Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). > **Note :** Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne. @@ -75,7 +75,7 @@ Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet é ```js exampleSocket.onopen = function (event) { - exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); + exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); }; ``` @@ -88,20 +88,20 @@ Il peut être utile d'utiliser [JSON](/en/JSON) pour envoyer des données comple function sendText() { // Création d'un objet msg qui contient les données // dont le serveur a besoin pour traiter le message - var msg = { - type: "message", - text: document.getElementById("text").value, - id: clientID, - date: Date.now() - }; + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; - // Envoi de l'objet msg à travers une chaîne formatée en JSON - exampleSocket.send(JSON.stringify(msg)); + // Envoi de l'objet msg à travers une chaîne formatée en JSON + exampleSocket.send(JSON.stringify(msg)); - // Efface le texte de l'élément input + // Efface le texte de l'élément input // afin de recevoir la prochaine ligne de texte // que l'utilisateur va saisir - document.getElementById("text").value = ""; + document.getElementById("text").value = ""; } ``` @@ -110,8 +110,8 @@ function sendText() { WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement `onmessage`. Pour écouter les données reçues, on peut écrire quelque chose comme: ```js -exampleSocket.onmessage = function (event) { - console.log(event.data); +exampleSocket.onmessage = function (event) { + console.log(event.data); } ``` diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md index 934dc5e14f..87fc5cf908 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md @@ -3,15 +3,15 @@ title: Écriture de serveurs WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_servers translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers --- -Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. +Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "[Berkeley sockets](https://fr.wikipedia.org/wiki/Berkeley_sockets)", 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. Avant de débuter, vous **devez** 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 _minimum_ des connaissances requises et non un guide ultime. -> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). 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. +> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). 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. -Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. 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 [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) 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 *cookies* et d'autres méthodes d'authentification. +Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. 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 [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) 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 *cookies* et d'autres méthodes d'authentification. ## La "poignée de mains" du WebSocket @@ -19,9 +19,9 @@ En tout premier lieu, le serveur doit écouter les connexions sockets entrantes > **Attention :** 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. -La *poignée de mains* 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. +La *poignée de mains* 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. -### La requête de _poignée de mains_ côté client +### La requête de _poignée de mains_ côté client Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de _poignée de main_. Vous devez donc savoir comment interprêter cette requête. En premier, le **client** enverra tout d'abord une requête HTTP correctement formée. La requête **doit** être à la version 1.1 ou supérieure et la méthode **doit** être de type GET : @@ -32,40 +32,40 @@ Même si vous construisez votre serveur au profit des WebSockets, votre client d Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 -Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* 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. +Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* 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. -Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) 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 (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ 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 (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. +Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) 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 (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ 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 (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. -> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). 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 [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) 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. +> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). 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 [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) 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. > **Note :** L'URI de la requête (`/chat` 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, `exemple.com/chat` peut être associée à une API/une application de dialogue multiutilisateurs lorsque `/game` invoquera son homologue pour un jeu. -> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** 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. +> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** 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. -### La réponse du serveur lors de la poignée de mains +### La réponse du serveur lors de la poignée de mains -Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). +Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= -En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) 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 (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). +En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) 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 (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). -> **Note :** 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). +> **Note :** 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). -Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". 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 ! +Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". 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 ! -> **Note :** 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 **avant** la fin du processus de poignée de main. +> **Note :** 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 **avant** la fin du processus de poignée de main. -### Suivre les clients confirmés +### Suivre les clients confirmés -Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). +Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). -## L'échange de trames de données +## L'échange de trames de données -Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. +Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. ### Format @@ -73,66 +73,66 @@ Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel m Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : - 0 1 2 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 + 0 1 2 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 | - |I|S|S|S| (4) |A| (7) | (16/64) | - |N|V|V|V| |S| | (if payload len==126/127) | - | |1|2|3| |K| | | + |F|R|R|R| opcode|M| Payload len | Extended payload length | + |I|S|S|S| (4) |A| (7) | (16/64) | + |N|V|V|V| |S| | (if payload len==126/127) | + | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + - 4 5 6 7 + 4 5 6 7 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Extended payload length continued, if payload len == 127 | + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ - 8 9 10 11 + 8 9 10 11 + - - - - - - - - - - - - - - - +-------------------------------+ - | |Masking-key, if MASK set to 1 | + | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ - 12 13 14 15 + 12 13 14 15 +-------------------------------+-------------------------------+ - | Masking-key (continued) | Payload Data | + | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + - : Payload Data continued ... : + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Payload Data continued ... | + | Payload Data continued ... | +---------------------------------------------------------------+ RSV1-3 peuvent être ignorés, ils concernent les extensions. -Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. +Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé. Le champ `opcode` définit comment est interpêtée la _charge utile_ (`payload data`) : ainsi `0x0` indique la consigne "continuer", `0x1` indique du texte (qui est systématiquement encodé en UTF-8), `0x2` pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, `0x3` à 0x7 et `0xB` à `0xF` n'ont pas de significations particulières. -Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. +Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. -### Connaître la taille des *données utiles* +### Connaître la taille des *données utiles* -Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : +Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : 1. (_étape 1_) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile. - S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. + S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. 2. (_étape 2_) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. 3. (_étape 3_) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0. -### Lire et démasquer les données +### Lire et démasquer les données -Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : +Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : var DECODED = ""; for (var i = 0; i < ENCODED.length; i++) { DECODED[i] = ENCODED[i] ^ MASK[i % 4]; } -> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). +> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). -### La fragmentation des messages +### La fragmentation des messages Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appelle la _fragmentation des messages_. La fragmentation est seulement possible avec les opcodes de `0x0` à `0x2`. -Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, 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) : +Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, 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) : Client: FIN=1, opcode=0x1, msg="hello" Server: (process complete message immediately) Hi. @@ -143,40 +143,40 @@ Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange Client: FIN=1, opcode=0x0, msg="year!" Server: (process complete message) Happy new year to you too! -La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. -Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. +La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. +Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. -## Pings-Pongs : le "coeur" des WebSockets +## Pings-Pongs : le "coeur" des WebSockets -A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. +A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. -Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. +Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. > **Note :** Lorsque plusieurs pings sont envoyés à la suite, un **seul** pong suffit en réponse (_le plus récent pour la donnée utile renvoyée_). -## Clore la connexion +## Clore la connexion -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 [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). 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. +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 [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). 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. ## Diverses informations utiles -> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). +> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). Les extensions et sous-protocoles des WebSockets sont négociés durant [l'échange des entêtes de la poignée de mains](#PoignéeDeMain). Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : **le contrôle des extensions agit sur les trames** ce qui modifie la charge utile ; **alors que les sous-protocoles modifient uniquement la charge utile,** 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). -> **Attention :** 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). +> **Attention :** 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). ### Les extensions 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. -> **Note :** 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. +> **Note :** 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. -### Les sous-protocoles +### Les sous-protocoles Les sous-protocoles sont à comparer à [un schéma XML](https://en.wikipedia.org/wiki/XML_schema) ou [une déclaration de DocType](https://en.wikipedia.org/wiki/Document_Type_Definition). 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 (_et intangible : le client se voit imposer la mise en oeuvre par le serveur_), bien que les deux doivent l'accepter pour communiquer ensemble. -> **Note :** 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. +> **Note :** 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. 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 : @@ -194,11 +194,11 @@ Le serveur doit désormais choisir l'un des protocoles suggérés par le client Sec-WebSocket-Protocol: soap -> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). +> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). 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 [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous **devez disposer** d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. -> **Note :** 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 _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. 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. +> **Note :** 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 _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. 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. ## Contenus associés diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md index eaf25ee8e6..5b46a56c61 100644 --- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md @@ -16,7 +16,7 @@ Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ## L'API Gamepad -L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. +L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article [Utilisez l'API Gamepad](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), et [Implementer des contrôles en utilisant l'API Gamepad](/en-US/docs/Games/Techniques/Controls_Gamepad_API). diff --git a/files/fr/web/api/webvtt_api/index.md b/files/fr/web/api/webvtt_api/index.md index 6031c99c90..f6dd796a3c 100644 --- a/files/fr/web/api/webvtt_api/index.md +++ b/files/fr/web/api/webvtt_api/index.md @@ -83,7 +83,7 @@ Réexaminons le premier exemple, et observons la structure plus précisément. Dans chaque réplique: -- La première ligne commence par un temps correspondant au moment où il apparait. +- La première ligne commence par un temps correspondant au moment où il apparait. - Sur la même ligne nous avons une chaîne `-->`. - Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte. - Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher. @@ -96,7 +96,7 @@ Il est important de ne pas utiliser de ligne vide sans réplique, par exemple en Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire. -Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. +Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. Un commentaire est constitué de ces trois composants: diff --git a/files/fr/web/api/webxr_device_api/index.md b/files/fr/web/api/webxr_device_api/index.md index 512cc85f97..fab5c5825f 100644 --- a/files/fr/web/api/webxr_device_api/index.md +++ b/files/fr/web/api/webxr_device_api/index.md @@ -13,52 +13,52 @@ translation_of: Web/API/WebXR_Device_API --- {{DefaultAPISidebar("WebXR Device API")}} -**WebXR** 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 (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). +**WebXR** 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 (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). -L'**API de périphérique WebXR** 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. +L'**API de périphérique WebXR** 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. -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. +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. Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes: - Trouver un périphérique de sortie VR ou AR compatible - Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée - (Optionellement) refléter la sortie sur un affichage 2D -- Créer des vecteurs représentant les mouvements des commandes d'entrée +- Créer des vecteurs représentant les mouvements des commandes d'entrée -Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. +Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. ## Les concepts et l'utilisation des périphériques WebXR -Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) 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. +Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) 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. -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. +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. L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires. ## Accéder à l'API WebXR -Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. +Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. - {{domxref("navigator.xr")}} {{ReadOnlyInline}} - - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. + - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. ## Les interfaces WebXR - {{DOMxRef("XRSystem")}} - - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. + - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. - {{DOMxRef("XRFrame")}} - - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. + - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. - {{DOMxRef("XRRenderState")}} - - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. + - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. - {{DOMxRef("XRSession")}} - - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. + - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. - {{DOMxRef("XRSpace")}} - - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. + - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. - {{DOMxRef("XRReferenceSpace")}} - - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. + - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. - {{DOMxRef("XRBoundedReferenceSpace")}} - - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. + - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. - {{DOMxRef("XRView")}} - : Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques. - {{DOMxRef("XRViewport")}} @@ -68,15 +68,15 @@ Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, - {{DOMxRef("XRPose")}} - : Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}. - {{DOMxRef("XRViewerPose")}} - - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. + - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. - {{DOMxRef("XRInputSource")}} - - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. + - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. - {{DOMxRef("XRWebGLLayer")}} - - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. + - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. ### Interfaces événementielles -Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. +Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. - {{domxref("XRInputSourceEvent")}} - : Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés. @@ -87,12 +87,12 @@ Les interfaces suivantes sont utilisées pour représenter les événements uti - {{domxref("XRSessionEvent")}} - : Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation -## Extensions de l'API WebGL +## Extensions de l'API WebGL L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR. - {{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}} - - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. + - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. ## Guides et tutoriels @@ -112,37 +112,37 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Starting up and shutting down a WebXR session](/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown) - : Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR. - [Geometry and reference spaces in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Geometry) - - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. + - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. - [Spatial tracking in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking) - : Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues. - [Rendering and the WebXR frame animation callback](/en-US/docs/Web/API/WebXR_Device_API/Rendering) - - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. + - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. - [Viewpoints and viewers: Simulating cameras in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Cameras) - - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. + - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. - [Lighting a WebXR setting](/en-US/docs/Web/API/WebXR_Device_API/Lighting) - : Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes. - [Using bounded reference spaces](/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces) - - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. + - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. ### Rendre interactif - [Movement, orientation, and motion: A WebXR example](/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion) - - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. + - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. - [Inputs and input sources](/en-US/docs/Web/API/WebXR_Device_API/Inputs) - : Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques. - [Targeting and hit detection](/en-US/docs/Web/API/Web_Audio_API/Targeting) - - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. + - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. - [Using WebXR input profiles](/en-US/docs/Web/API/WebXR_Device_API/Input_profiles) - - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. + - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. - [Supporting advanced controllers and gamepads in WebXR applications](/en-US/docs/Web/WebXR_Device_API/Gamepads) - - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. + - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. ### Performance and sécurité - [WebXR performance guide](/en-US/docs/Web/API/WebXR_Device_API/Performance) - : Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR. - [Permissions and security for WebXR](/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security) - - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. + - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. ### Inclure d'autres médias @@ -165,6 +165,6 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Graphics on the web](/en-US/docs/Web/Guide/Graphics) - [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) -- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web +- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web - [Canvas API](/en-US/docs/Web/API/Canvas_API): Le dessin en 2D pour le web - [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial) diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md index 501056191e..9efdaf9108 100644 --- a/files/fr/web/api/window/alert/index.md +++ b/files/fr/web/api/window/alert/index.md @@ -21,9 +21,9 @@ Affiche un dialogue d'alerte contenant le texte spécifié. ### Exemple - window.alert("Bonjour !"); + window.alert("Bonjour !"); -produira : +produira :  @@ -31,7 +31,7 @@ produira : 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. -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). +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). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md index 1366a2ac23..8063c37a22 100644 --- a/files/fr/web/api/window/applicationcache/index.md +++ b/files/fr/web/api/window/applicationcache/index.md @@ -3,11 +3,11 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -> **Attention :** 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 [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. +> **Attention :** 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 [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. {{APIRef}} -Retourne une référence à l'objet du cache d'application pour la fenêtre. +Retourne une référence à l'objet du cache d'application pour la fenêtre. ## Syntaxe @@ -15,7 +15,7 @@ Retourne une référence à l'objet du cache d'application pour la fenêtre. ### Paramètres -- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. +- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. ## Spécification diff --git a/files/fr/web/api/window/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md index b67730e1a7..c30004caf5 100644 --- a/files/fr/web/api/window/beforeunload_event/index.md +++ b/files/fr/web/api/window/beforeunload_event/index.md @@ -73,7 +73,7 @@ Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes [`window.alert()`](/fr/docs/Web/API/Window/alert), [`window.confirm()`](/fr/docs/Web/API/Window/confirm) et [`window.prompt()`](/fr/docs/Web/API/Window/prompt) peuvent être ignorés durant l'évènement. Voir [la spécification HTML5 (en anglais)](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts) pour plus de détails. -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é. +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é. ## Spécifications diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md index 7091fd2664..fcf6d330f7 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.md +++ b/files/fr/web/api/window/cancelanimationframe/index.md @@ -11,7 +11,7 @@ tags: - Window translation_of: Web/API/Window/cancelAnimationFrame --- -{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. +{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md index 126c343b54..e3cfad291c 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.md +++ b/files/fr/web/api/window/cancelidlecallback/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/cancelIdleCallback --- {{APIRef}}{{SeeCompatTable}} -La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. +La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md index 453c55bedb..50f4905ff4 100644 --- a/files/fr/web/api/window/clearimmediate/index.md +++ b/files/fr/web/api/window/clearimmediate/index.md @@ -24,12 +24,12 @@ où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}. ```js let immediateID = setImmediate(() => { - // Exécute du code + // Exécute du code } document.getElementById("bouton") .addEventListener(() => { - clearImmediate(immediateID); + clearImmediate(immediateID); }); ``` diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md index ee82f5b027..f99c4734fc 100644 --- a/files/fr/web/api/window/close/index.md +++ b/files/fr/web/api/window/close/index.md @@ -19,7 +19,7 @@ Ferme la fenêtre référencée. Lorsque cette méthode est appelée, la fenêtre référencée est fermée. -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 [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` +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 [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` #### Exemples diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md index 02f4358698..92867fa845 100644 --- a/files/fr/web/api/window/closed/index.md +++ b/files/fr/web/api/window/closed/index.md @@ -20,12 +20,12 @@ Cette propriété est en lecture seule. ### Valeur renvoyée - `isClosed` - - : Un booléen. Les valeurs possibles sont : + - : Un booléen. Les valeurs possibles sont : <!----> -- `false` : La fenêtre est ouverte. -- `true` : La fenêtre a été fermée. +- `false` : La fenêtre est ouverte. +- `true` : La fenêtre a été fermée. ### Exemples @@ -46,7 +46,7 @@ Dans cette exemple, la fonction `refreshPopupWindow()` appelle une fonction dans var popupWindow = null; function refreshPopupWindow() { - if (popupWindow && !popupWindow.closed) { + if (popupWindow && !popupWindow.closed) { // Le popup a déjà été ouvert et il l'est encore. // On peut donc appeler sa fonction doRefresh(). popupWindow.doRefresh(); diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md index ba204b503d..5a51a25ead 100644 --- a/files/fr/web/api/window/confirm/index.md +++ b/files/fr/web/api/window/confirm/index.md @@ -27,7 +27,7 @@ Affiche un dialogue modal avec un message et deux boutons, OK et Annuler. ### Notes -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). +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). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md index 3478ea9292..32fa0284b1 100644 --- a/files/fr/web/api/window/console/index.md +++ b/files/fr/web/api/window/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Window/console --- {{ APIRef }} -La propriété **`Window.console`** 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. +La propriété **`Window.console`** 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. ## Syntaxe diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md index d40f4f7090..5249432c2a 100644 --- a/files/fr/web/api/window/content/index.md +++ b/files/fr/web/api/window/content/index.md @@ -21,7 +21,7 @@ Certains exemples utilisent `_content` à la place de `content`. Cette forme est ### Exemple -L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : +L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md index fdc4cc14b6..3ca84a2f88 100644 --- a/files/fr/web/api/window/devicepixelratio/index.md +++ b/files/fr/web/api/window/devicepixelratio/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/devicePixelRatio --- {{APIRef}} -La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). +La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). 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). @@ -26,4 +26,4 @@ Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemp ## Voir aussi - [CSS `resolution` media query](/en-US/docs/Web/CSS/@media/resolution) -- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) +- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md index 4cc63d6a57..add5e2c9e4 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.md +++ b/files/fr/web/api/window/domcontentloaded_event/index.md @@ -29,7 +29,7 @@ L’évènement **`DOMContentLoaded`** est émis lorsque le document HTML initia </tbody> </table> -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 `Window` 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")}}. +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 `Window` 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")}}. L'évènement [`load`](/fr/docs/Web/API/Window/load_event), 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 [`load`](/fr/docs/Web/API/Window/load_event) là où `DOMContentLoaded` serait beaucoup plus approprié. @@ -39,7 +39,7 @@ L'évènement [`load`](/fr/docs/Web/API/Window/load_event), très différent, do ## Accélérer -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 [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). 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. +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 [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). 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. ## Exemples @@ -63,5 +63,5 @@ window.addEventListener("DOMContentLoaded", (event) => { ## Voir aussi -- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} -- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} +- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} +- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md index 708c13bd59..3b07247225 100644 --- a/files/fr/web/api/window/focus/index.md +++ b/files/fr/web/api/window/focus/index.md @@ -21,4 +21,4 @@ Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonct | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md index d9e60bcb8c..538f0b2bbd 100644 --- a/files/fr/web/api/window/frames/index.md +++ b/files/fr/web/api/window/frames/index.md @@ -21,9 +21,9 @@ Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, lis frameList = window.frames; -- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. +- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. - `frameList === window` est évalué à `true`. -- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). +- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). - pour plus de détails sur la valeur retournée, se référer au [fil de discussion sur mozilla.dev.platform](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). ## Exemple diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md index e46e50b9ec..549e41ee63 100644 --- a/files/fr/web/api/window/fullscreen/index.md +++ b/files/fr/web/api/window/fullscreen/index.md @@ -17,17 +17,17 @@ Cette propriété indique si la fenêtre est affichée en mode plein écran ou n var isInFullScreen = windowRef.fullScreen; -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. +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. ### Valeur de retour - `isInFullScreen` - - : Une valeur booléenne. Signification des valeurs : + - : Une valeur booléenne. Signification des valeurs : <!----> -- `true` : La fenêtre est en mode plein écran. -- `false` : La fenêtre n'est pas en mode plein écran. +- `true` : La fenêtre est en mode plein écran. +- `false` : La fenêtre n'est pas en mode plein écran. ### Exemples diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md index 37eb7a2905..a5651758b5 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.md +++ b/files/fr/web/api/window/getcomputedstyle/index.md @@ -28,7 +28,7 @@ La valeur de retour `style` est un objet [`CSSStyleDeclaration`](/en/DOM/CSSStyl var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); -// Ce qui équivaut à : +// Ce qui équivaut à : // var style = document.defaultView.getComputedStyle(elem1, null); ``` diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md index 6b2f7b3796..92e5e6437e 100644 --- a/files/fr/web/api/window/getselection/index.md +++ b/files/fr/web/api/window/getselection/index.md @@ -26,7 +26,7 @@ Renvoie un objet selection représentant le ou les objets sélectionnés. ## Notes -En [JavaScript](fr/JavaScript), 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 [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian +En [JavaScript](fr/JavaScript), 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 [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian ## Spécification diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md index d89aba868c..509555b9a0 100644 --- a/files/fr/web/api/window/history/index.md +++ b/files/fr/web/api/window/history/index.md @@ -5,10 +5,10 @@ translation_of: Web/API/Window/history --- {{APIRef}} -La propriété en lecture seule **`Window.history`** 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). +La propriété en lecture seule **`Window.history`** 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). -L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. -En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. +L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. +En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. ## Exemple @@ -19,11 +19,11 @@ history.go(-1); // similaire à history.back(); ## Notes -Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. +Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. -Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. +Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. -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 [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. +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 [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. ## Spécification diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md index 0b4b4b6f98..837e91b6ce 100644 --- a/files/fr/web/api/window/index.md +++ b/files/fr/web/api/window/index.md @@ -35,7 +35,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}} - : Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours. - {{domxref("Window.customElements")}}{{ReadOnlyInline}} - - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. + - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. - {{domxref("Window.crypto")}} {{readOnlyInline}} - : Retourne l'objet crypto du navigateur. - {{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}} @@ -48,19 +48,19 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Synonyme de {{domxref("window.personalbar")}} - {{domxref("Window.document")}} {{ReadOnlyInline}} - : Renvoie une référence au document que la fenêtre contient. -- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. +- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés. -- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} - - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. -- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} + - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. +- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle. - {{domxref("Window.frameElement")}} {{readOnlyInline}} - : Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée. @@ -74,9 +74,9 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.history")}} {{ReadOnlyInline}} - : Retourne une référence à l'objet d'historique. - {{domxref("Window.innerHeight")}} {{readOnlyInline}} - - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. + - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. - {{domxref("Window.innerWidth")}} {{readOnlyInline}} - - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. + - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. - {{domxref("Window.isSecureContext")}} {{readOnlyInline}} - : Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés. - {{domxref("Window.length")}} {{readOnlyInline}} @@ -90,11 +90,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.menubar")}} {{ReadOnlyInline}} - : Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}} - - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. + - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. - {{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}} - - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. + - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. - {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. + - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - : Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} @@ -103,7 +103,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Récupère / définit le nom de la fenêtre. - {{domxref("Window.navigator")}} {{readOnlyInline}} - : Renvoie une référence à l'objet navigateur. -- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. - {{domxref("Window.opener")}} - : Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours. @@ -122,7 +122,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.parent")}} {{readOnlyInline}} - : Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours. - {{domxref("Window.performance")}} {{readOnlyInline}} - - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. + - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. - {{domxref("Window.personalbar")}} {{readOnlyInline}} - : Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.pkcs11")}} {{obsolete_inline(29)}} @@ -138,11 +138,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.scrollbars")}} {{readOnlyInline}} - : Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre. - {{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. + - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. - {{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). + - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). - {{domxref("Window.scrollX")}} {{readOnlyInline}} - - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. + - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. - {{domxref("Window.scrollY")}} {{readOnlyInline}} - : Renvoie le nombre de pixels dont le document a déjà été décalé verticalement. - {{domxref("Window.self")}} {{ReadOnlyInline}} @@ -168,14 +168,14 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - `window[0]`, `window[1]`, etc. - : Renvoie une référence à l'objet `window` dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails. -### Propriétés implémentées depuis ailleurs +### Propriétés implémentées depuis ailleurs - {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}} - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes. - {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}} - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}. - {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}} - - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). + - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). - {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}} - : Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.) @@ -188,15 +188,15 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Recule d'une page dans l'historique de la fenêtre. - {{domxref("Window.blur()")}} - - : Déplace la focalisation hors de la fenêtre. -- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} + - : Déplace la focalisation hors de la fenêtre. +- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}. -- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} +- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}. - {{domxref("Window.captureEvents()")}} {{Deprecated_inline}} - - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. + - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. - {{domxref("Window.clearImmediate()")}} - - : Annule l'exécution répétée définie en utilisant `setImmediate`. + - : Annule l'exécution répétée définie en utilisant `setImmediate`. - {{domxref("Window.close()")}} - : Ferme la fenêtre en cours. - {{domxref("Window.confirm()")}} @@ -210,9 +210,9 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}} - : {{todo("NeedsContents")}} - {{domxref("Window.find()")}} - - : Recherche la chaîne de caractères donnée dans une fenêtre. + - : Recherche la chaîne de caractères donnée dans une fenêtre. - {{domxref("Window.focus()")}} - - : Donne la focalisation à la fenêtre en cours. + - : Donne la focalisation à la fenêtre en cours. - {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Avance la fenêtre d'un document dans l'historique. - {{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -220,13 +220,13 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.getAttentionWithCycleCount()")}} - : {{todo("NeedsContents")}} - {{domxref("Window.getComputedStyle()")}} - - : 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. -- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} + - : 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. +- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} - : Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur. - {{domxref("Window.getSelection()")}} - - : Renvoie l'objet de sélection représentant les éléments sélectionnés. + - : Renvoie l'objet de sélection représentant les éléments sélectionnés. - {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}} - - : Renvoie le navigateur à la page d'accueil. + - : Renvoie le navigateur à la page d'accueil. - {{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}} - : Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée. - {{domxref("Window.maximize()")}} @@ -234,7 +234,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.minimize()")}} (top-level XUL windows only) - : Minimize la fenêtre. - {{domxref("Window.moveBy()")}} - - : Déplace la fenêtre en cours de la quantité indiquée. + - : Déplace la fenêtre en cours de la quantité indiquée. - {{domxref("Window.moveTo()")}} - : Déplace la fenêtre vers les coordonnées spécifiées. - {{domxref("Window.open()")}} @@ -251,10 +251,10 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - : Annule la capture des évènements d'un certain type par la fenêtre. - {{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}} - : 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. -- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} - - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. +- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} + - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. - {{domxref("Window.resizeBy()")}} - - : Redimensionne la fenêtre en cours d'une certaine quantité. + - : Redimensionne la fenêtre en cours d'une certaine quantité. - {{domxref("Window.resizeTo()")}} - : Redimensionne dynamiquement la fenêtre. - {{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -280,7 +280,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}} - : Dimensionne la fenêtre en fonction de son contenu. - {{domxref("Window.stop()")}} - - : Cette méthode arrête le chargement de la fenêtre. + - : Cette méthode arrête le chargement de la fenêtre. - {{domxref("Window.updateCommands()")}} {{Non-standard_inline}} - : Met à jour l'état des commandes de la fenêtre chrome en cours (IU). @@ -318,13 +318,13 @@ Ce sont des propriétés de l'objet window qui peuvent être définies pour éta _Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}._ -> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. +> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. - {{domxref("GlobalEventHandlers.onabort")}} - - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. + - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. <!----> @@ -350,12 +350,12 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr <!----> - {{domxref("GlobalEventHandlers.onclick")}} - - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. + - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. <!----> - {domxref("GlobalEventHandlers.ondblclick")}} - - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. + - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. - {{domxref("GlobalEventHandlers.onclose")}} - : Appelé après la fermeture de la fenêtre. @@ -372,7 +372,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - : Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles). - {{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}} - : Appelé lorsque l'orientation est modifiée (pour les appareils mobiles). -- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only +- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only - : Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil. - {{domxref("Window.ondeviceproximity")}} - : Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil. @@ -394,7 +394,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - {{domxref("Window.onappinstalled")}} - : Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}. - {{domxref("Window.ongamepadconnected")}} - - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). + - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). - {{domxref("Window.ongamepaddisconnected")}} - : Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche). - {{domxref("Window.oninput")}} @@ -522,10 +522,10 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr ## Constructeurs -Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). +Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("DOMParser")}} - - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). + - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). - {{domxref("Window.GeckoActiveXObject")}} - : {{todo("NeedsContents")}} - {{domxref("Image")}} @@ -537,7 +537,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("Window.XMLSerializer")}} - : {{todo("NeedsContents")}} - {{domxref("Worker")}} - - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) + - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) - {{domxref("Window.XPCNativeWrapper")}} - : {{todo("NeedsContents")}} - {{domxref("Window.XPCSafeJSObjectWrapper")}} @@ -545,7 +545,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). ## Interfaces -Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) +Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) ## Voir aussi diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md index dba8764f03..55a047fd8c 100644 --- a/files/fr/web/api/window/innerheight/index.md +++ b/files/fr/web/api/window/innerheight/index.md @@ -22,12 +22,12 @@ Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigat ### Valeur -Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. +Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. ## Notes -- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. -- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) 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. +- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. +- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) 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. ## Exemples @@ -49,11 +49,11 @@ var intOuterFramesetHeight = top.innerHeight; {{todo("ajouter ici un lien vers une démo interactive")}} - Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. -- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. +- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. ### Exemple graphique -L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`. +L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md index 882ae4d79e..47c2e50a05 100644 --- a/files/fr/web/api/window/innerwidth/index.md +++ b/files/fr/web/api/window/innerwidth/index.md @@ -14,7 +14,7 @@ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtr var largeur = window.innerWidth; -Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). +Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). ## Valeur renvoyée @@ -23,7 +23,7 @@ Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window ## Notes -La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. +La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. ## Example diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md index 31f70f5c81..c9efe7f9c0 100644 --- a/files/fr/web/api/window/length/index.md +++ b/files/fr/web/api/window/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/length --- {{ ApiRef() }} -Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. +Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. ## Syntaxe diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md index 081d5b2c86..3b3c572a50 100644 --- a/files/fr/web/api/window/location/index.md +++ b/files/fr/web/api/window/location/index.md @@ -8,7 +8,7 @@ browser-compat: api.Window.location La propriété en lecture seule **`Window.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location) qui contient des informations à propos de l'emplacement courant du document. -Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. +Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. Voir la page de l'interface [`Location`](/fr/docs/Web/API/Location) pour connaître l'ensemble des propriétés disponibles. @@ -140,7 +140,7 @@ La même chose mais avec un défilement animé : ```js var showBookmark = (function () { - var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, /* * nDuration: la durée, exprimée en millisecondes, pour chaque frame * nFrames: le nombre de frames pour chaque défilement @@ -188,7 +188,7 @@ var showBookmark = (function () { ## Voir aussi -- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). -- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). +- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). +- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). - [Manipuler l'historique du navigateur avec l'API History](/fr/docs/Web/API/History_API) - [`hashchange`](/fr/docs/Web/API/Window/hashchange_event) diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md index 73ab042772..690c42391e 100644 --- a/files/fr/web/api/window/name/index.md +++ b/files/fr/web/api/window/name/index.md @@ -31,11 +31,11 @@ window.name = "lab_view"; Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées. -Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. +Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. ## Spécifications | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md index 98bd7cc28f..19312bd827 100644 --- a/files/fr/web/api/window/offline_event/index.md +++ b/files/fr/web/api/window/offline_event/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/offline_event --- {{APIRef}} -L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. +L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. <table class="properties"> <tbody> diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md index d0be3ff011..1255f9a281 100644 --- a/files/fr/web/api/window/open/index.md +++ b/files/fr/web/api/window/open/index.md @@ -21,7 +21,7 @@ var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeature ### Valeur renvoyée et paramètres - `WindowObjectReference` - - : 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 `open()` ; elle sera à `null` 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 (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). + - : 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 `open()` ; elle sera à `null` 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 (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). - `strUrl` - : Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. _strUrl_ peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur. - `strWindowName` @@ -110,7 +110,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - toolbar - : Si cette fonctionnalité est définie à _yes_, 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 `dom.disable_window_open_feature.toolbar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - location - - : Si cette fonctionnalité est définie à _yes_, 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 `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). 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 **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). 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) }} + - : Si cette fonctionnalité est définie à _yes_, 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 `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). 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 **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). 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) }} - directories - : Si cette fonctionnalité est définie à _yes_, 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`dom.disable_window_open_feature.directories` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - personalbar @@ -139,11 +139,11 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - dependent - : Si définie à _yes_, 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 `showModelessDialog()`. - modal - - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, 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 [fonction alert()](fr/DOM/window.alert). 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 `showModalDialog()`. + - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, 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 [fonction alert()](fr/DOM/window.alert). 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 `showModalDialog()`. - dialog - : La fonctionnalité `dialog` 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*sheets*. - minimizable - - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, 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. + - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, 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. - fullscreen - : 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. `fullscreen` ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec `fullscreen` 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. `fullscreen` ne fonctionne plus vraiment dans Internet Explorer 6 SP2. @@ -152,7 +152,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite`, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le [PrivilegeManager](fr/PrivilegeManager). - chrome - - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, 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). + - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, 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). - titlebar - : Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à _no_, 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`dom.disable_window_open_feature.titlebar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - alwaysRaised @@ -164,9 +164,9 @@ Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite - close - : Lorsque défini à _no_, 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é `dialog` activée). `close=no` a précédence sur `minimizable=yes`.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant `dom.disable_window_open_feature.close` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). -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 _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. 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 _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. +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 _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. 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 _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. -Exemple : +Exemple : ```html <script type="text/javascript"> @@ -214,15 +214,15 @@ function openFFPromotionPopup() { l'adoption de Firefox</a></p> ``` -Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». +Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». -Plus d'informations sur l'utilisation de l'attribut target : +Plus d'informations sur l'utilisation de l'attribut target : [HTML 4.01, section 16.3.2 La sémantique de cible](http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2) [Comment créer un lien qui ouvre une nouvelle fenêtre?](http://www.htmlhelp.com/fr/faq/html/links.html#new-window) -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 : +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 : ```html <script type="text/javascript"> @@ -243,7 +243,7 @@ function openRequestedPopup(strUrl, strWindowName) { <p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p> ``` -Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : +Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : ```html <script type="text/javascript"> @@ -258,7 +258,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); } - else if(previousUrl != strUrl) + else if(previousUrl != strUrl) { WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); @@ -272,7 +272,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference.focus(); }; PreviousUrl = strUrl; - /* explication : on stocke l'URL courante afin de pouvoir la comparer + /* explication : on stocke l'URL courante afin de pouvoir la comparer dans le cas d'un autre appel à cette fonction. */ } </script> @@ -292,36 +292,36 @@ de Firefox</a></p> ### FAQ -- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? - - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) -- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? +- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? + - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) +- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? - : 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 [focus()](fr/DOM/window.focus). Il n'y a pas d'autre manière fiable. Un [exemple montrant comment utiliser la méthode focus()](#Bonnes_pratiques) est présenté ci-dessus. -- Comment forcer une fenêtre à être agrandie/maximisée ? +- Comment forcer une fenêtre à être agrandie/maximisée ? - : 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. -- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? +- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? - : 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 `about:config`. 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) à `yes` 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. -- Comment redimensionner une fenêtre en fonction de son contenu ? +- Comment redimensionner une fenêtre en fonction de son contenu ? - : 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 `Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes` dans Mozilla ou `Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes` dans Firefox, ou en positionnant `dom.disable_window_move_resize` à _true_ dans <kbd>about:config</kbd> ou encore en éditant leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). 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. La méthode [sizeToContent()](fr/DOM/window.sizeToContent) de l'objet window est également désactivée si l'utilisateur décoche la préférence `Déplacer ou redimensionner des fenêtres existantes`. 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. -- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? +- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? - : Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. [K-meleon 1.1](http://kmeleon.sourceforge.net/), 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 [propriété target du module CSS3 hyperlien](http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0) 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. -- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? +- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? - : 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 _WindowObjectReference_.closed est bien _false_. -- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? - - : 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 `window.open()` : elle sera _null_ 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. -- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? +- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? + - : 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 `window.open()` : elle sera _null_ 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. +- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? - : La valeur renvoyée par la méthode `window.open()` est la propriété [opener](fr/DOM/window.opener). La variable _WindowObjectReference_ lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé `opener` liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture). -- 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 ? - - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** 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 : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) +- 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 ? + - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** 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 : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) ### Problèmes d'utilisabilité #### Évitez de recourir à `window.open()` -De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : +De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : - 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. - Il existe à présent [plusieurs extensions à Mozilla](https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update) (comme Multizilla) et [à Firefox](https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing) (comme [Tabbrowser preferences](https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158)), 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. @@ -330,20 +330,20 @@ De manière générale, il est préférable d'éviter d'utiliser `window.open()` #### Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations -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 : +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 : -##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` +##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` -Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. +Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. -- 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é. -- 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. -- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. -- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). -- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. -- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. +- 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é. +- 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. +- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. +- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). +- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. +- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. -**Plus d'informations à ce sujet :** +**Plus d'informations à ce sujet :** - [Top Ten Web-Design Mistakes of 2002](http://www.useit.com/alertbox/20021223.html), 6. JavaScript in Links, Jakob Nielsen, Décembre 2002 - [Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/), Jeff Howden, Février 2002 @@ -351,32 +351,32 @@ Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'u ##### N'utilisez jamais `<a href="#" onclick="window.open(...);">` -Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, 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. +Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, 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. ##### Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut `title` du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris. -Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). +Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). -> « 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*Précédente* grisé. » +> « 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*Précédente* grisé. » > citation de [The Top Ten*New* Mistakes of Web Design](http://www.useit.com/alertbox/990530.html): 2. Opening New Browser Windows, Jakob Nielsen, mai 1999 -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). +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). **Références** -- « 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. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) -- « 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. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 +- « 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. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) +- « 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. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 - [Using Link Titles to Help Users Predict Where They Are Going](http://www.useit.com/alertbox/980111.html), Jakob Nielsen, janvier 1998 ##### Utilisez toujours l'attribut target -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 — **sans l'imposer** — à 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. +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 — **sans l'imposer** — à 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. ##### N'utilisez pas `target="_blank"` -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. +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. 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). @@ -423,11 +423,11 @@ WindowObjectReference = window.open("http://www.wwf.org/", Les positions et dimensions demandées dans la liste _strWindowFeatures_ ne seront pas respectées et **seront corrigées** 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. **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.** -[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), 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. +[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), 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. #### Note sur les barres de défilement -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 : +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 : - l'utilisateur a redimensionné la fenêtre - 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 @@ -435,24 +435,24 @@ Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fen - 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 `body` dans les différents navigateurs et versions de ceux-ci - l'utilisateur utilise une feuille de style utilisateur ([userContent.css in Mozilla-based browsers](http://www.mozilla.org/support/firefox/edit#content)) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut) - 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 -- 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. +- 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. - l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier -- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. +- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. - 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 #### Note sur la barre d'état -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 SSL (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. **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.** +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 SSL (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. **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.** #### Note sur les problèmes de sécurité liés à la présence de la barre d'état -Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : +Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : -> « Pour les fenêtres ouvertes à l'aide de `window.open()` : -> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » +> « Pour les fenêtres ouvertes à l'aide de `window.open()` : +> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » > citation de [Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) -> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. +> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. > Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...) > **Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.** (...) > Gestion de la barre d'état d'Internet Explorer par les scripts @@ -463,12 +463,12 @@ Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de ` #### Note sur le plein écran (fullscreen) -Dans Internet Explorer 6 pour XP SP2 : +Dans Internet Explorer 6 pour XP SP2 : -- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » -- « 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. » +- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » +- « 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. » -_Références :_ +_Références :_ - [Fine-Tune Your Web Site for Windows XP Service Pack 2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) - [Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA) @@ -477,11 +477,11 @@ _Références :_ ### Tutoriels -**en français :** +**en français :** [Créer des pop-up intelligentes](http://openweb.eu.org/articles/popup/) par Fabrice Bonny, OpenWeb -**en anglais :** +**en anglais :** [JavaScript windows (tutorial)](http://www.infimum.dk/HTML/JSwindows.html) par Lasse Reichstein Nielsen diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md index bee987dab6..950654278b 100644 --- a/files/fr/web/api/window/opener/index.md +++ b/files/fr/web/api/window/opener/index.md @@ -19,7 +19,7 @@ Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante. ### Exemple - if window.opener != indexWin { + if window.opener != indexWin { referToTop(window.opener); } diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md index 892db6a5cb..94e6404d2e 100644 --- a/files/fr/web/api/window/outerheight/index.md +++ b/files/fr/web/api/window/outerheight/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/outerHeight --- {{APIRef}} -`Window.outerHeight` 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. +`Window.outerHeight` 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. Cette propriété n'a pas de valeur par défaut. @@ -17,13 +17,13 @@ La valeur retournée correspond à la hauteur extérieure de la fenêtre. ## Notes -Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. +Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}. ### Exemple illustré -La figure suivante montre la différence entre `outerHeight` et `innerHeight`. +La figure suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md index 112cdea1ba..9e72791562 100644 --- a/files/fr/web/api/window/pageshow_event/index.md +++ b/files/fr/web/api/window/pageshow_event/index.md @@ -4,7 +4,7 @@ slug: Web/API/Window/pageshow_event translation_of: Web/API/Window/pageshow_event original_slug: Web/Events/pageshow --- -L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). +L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). ## Informations générales @@ -33,7 +33,7 @@ L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de ## Exemples -L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : +L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : ```js window.addEventListener('pageshow', function(event) { @@ -42,7 +42,7 @@ window.addEventListener('pageshow', function(event) { }); ``` -Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : +Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : ```html <body onload="myonload()" onpageshow="mypageshowcode()"> diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md index 907a645d93..c82013ed40 100644 --- a/files/fr/web/api/window/parent/index.md +++ b/files/fr/web/api/window/parent/index.md @@ -19,7 +19,7 @@ Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre co ### Exemple - if (window.parent != window.top) { + if (window.parent != window.top) { // on se trouve dans une imbrication de cadres } diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md index de1e53ba98..08bad0c219 100644 --- a/files/fr/web/api/window/popstate_event/index.md +++ b/files/fr/web/api/window/popstate_event/index.md @@ -3,11 +3,11 @@ title: popstate slug: Web/API/Window/popstate_event translation_of: Web/API/Window/popstate_event --- -L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. +L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. -Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). +Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). -Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. +Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. ## Informations générales @@ -50,7 +50,7 @@ history.back(); // Logs "location: http://example.com/example.html, state: null history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} ``` -Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. +Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. ## Spécifications diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md index c0df0fa2b6..abe8cc16ea 100644 --- a/files/fr/web/api/window/postmessage/index.md +++ b/files/fr/web/api/window/postmessage/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/postMessage --- {{ ApiRef() }} -La méthode **`window.postMessage`** 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 [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. +La méthode **`window.postMessage`** 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 [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un [`MessageEvent`](/fr/docs/Web/API/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 `window.postMessage` est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le [`MessageEvent`](/fr/docs/Web/API/MessageEvent) est de type `message`, a une propriété `data` qui est initialisée à la valeur du premier argument passé à `window.postMessage`, une propriété `origin` correspondant à l'origine du document principal de la fenêtre appelant `window.postMessage` au moment où `window.postMessage` a été appelée, et une propriété `source` qui est la fenêtre depuis laquelle `window.postMessage` est appelée (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues). @@ -24,7 +24,7 @@ La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un - `message` - : La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant [l'algorithme de clônage structuré](/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm). 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] - `targetOrigin` - - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (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 `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, 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 `postMessage` é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. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, 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.** + - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (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 `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, 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 `postMessage` é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. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, 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.** - `transfer` {{optional_Inline}} - : 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. @@ -37,7 +37,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { - if (event.origin !== "http://example.org:8080") + if (event.origin !== "http://example.org:8080") return; // ... @@ -86,7 +86,7 @@ function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? (il pourrait être // différent de la fenêtre que nous avons ouverte au départ, par exemple). - if (event.origin !== "http://example.org") + if (event.origin !== "http://example.org") return; // event.source est la popup @@ -104,7 +104,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? - if (event.origin !== "http://example.com:8080") + if (event.origin !== "http://example.com:8080") return; // event.source est window.opener diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md index 075e864e2c..05f84e3b80 100644 --- a/files/fr/web/api/window/requestanimationframe/index.md +++ b/files/fr/web/api/window/requestanimationframe/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/window/requestAnimationFrame --- {{APIRef("Window")}} -La méthode **`window.requestAnimationFrame()`** 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. +La méthode **`window.requestAnimationFrame()`** 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. > **Note :** Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode `requestAnimationFrame()`. -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. +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. 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. @@ -28,11 +28,11 @@ requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions ### Paramètres - `callback` - - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. + - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. ### Valeur retournée -`requestID` est un entier `long` 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. +`requestID` est un entier `long` 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. ## Exemple @@ -64,7 +64,7 @@ requestAnimationFrame(step); ### Notes pour Gecko -\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. +\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. \[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. `DOMTimeStamp` n'a qu'une précision de l'ordre de la milliseconde, mais `DOMHightResTimeStamp` a une précision minimale de l'ordre de 10 microsecondes. diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md index f70c6f1c13..3db65ac569 100644 --- a/files/fr/web/api/window/requestidlecallback/index.md +++ b/files/fr/web/api/window/requestidlecallback/index.md @@ -13,18 +13,18 @@ La méthode **`window.requestIdleCallback()`** mémorise une fonction qui sera a ### Retour de l'appel -Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. +Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. ### Paramètres - fonction - - : 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 : + - : 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 : - `timeRemaining` : fonction qui retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) repré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. `timeRemaining()` retournera toujours zéro si `didTimeout` est positionné à `true` (par exemple, 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. - `didTimeout` : un booléen positionné à `true` si la fonction est appelée car le timeout a été atteint, et `false` si elle a été appelée par le navigateur durant une période de repos. -- `options` {{optional_inline}} +- `options` {{optional_inline}} - : Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : - `timeout` : si `timeout` est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins `timeout` millisecondes si elle n'a pas été appelée par le navigateur au préalable. diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md index 79bbd5f09f..9582b7799d 100644 --- a/files/fr/web/api/window/screen/index.md +++ b/files/fr/web/api/window/screen/index.md @@ -11,7 +11,7 @@ tags: - Écran translation_of: Web/API/Window/screen --- -{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, 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. +{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, 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. ## Syntaxe @@ -31,7 +31,7 @@ if (screen.pixelDepth < 8) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | +| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md index a6c4a13e38..aeea7a1763 100644 --- a/files/fr/web/api/window/screenx/index.md +++ b/files/fr/web/api/window/screenx/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Window/screenX --- {{APIRef}} -La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. +La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. ## Syntax diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md index 8b76b7d25c..a0321124f7 100644 --- a/files/fr/web/api/window/scrollby/index.md +++ b/files/fr/web/api/window/scrollby/index.md @@ -18,10 +18,10 @@ Fait défiler le document dans la fenêtre du nombre de pixels passé en paramè ### Paramètres -- `X` est le nombre en pixels pour le défilement horizontal. -- `Y` est le nombre en pixels pour le défilement vertical. +- `X` est le nombre en pixels pour le défilement horizontal. +- `Y` est le nombre en pixels pour le défilement vertical. -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. +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. ## Exemples @@ -30,7 +30,7 @@ Des coordonnées positives feront défiler à droite et vers le bas de la page. ## Notes -[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) +[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) ## Spécification diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md index 947dccb77e..298b258494 100644 --- a/files/fr/web/api/window/scrollbypages/index.md +++ b/files/fr/web/api/window/scrollbypages/index.md @@ -31,7 +31,7 @@ Fait défiler le document du nombre de pages spécifié. ### Notes -Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). +Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). ### Spécification diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md index 7bb0be2506..68f79a5e4f 100644 --- a/files/fr/web/api/window/scrolly/index.md +++ b/files/fr/web/api/window/scrolly/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/scrollY --- {{APIRef}} -La propriété **`scrollY`** 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. +La propriété **`scrollY`** 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. ## Syntaxe diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md index add3c42855..b3e5223171 100644 --- a/files/fr/web/api/window/showmodaldialog/index.md +++ b/files/fr/web/api/window/showmodaldialog/index.md @@ -25,18 +25,18 @@ où - `retour` est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par `uri`. - `uri` est l'URI du document à afficher dans la boîte de dialogue. -- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). -- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : +- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). +- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : | Syntaxe | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | -| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | +| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogleft:left` | Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogtop:top` | Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` 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 `no`. | -| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` 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 `no`. | +| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` 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 `no`. | +| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` 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 `no`. | {{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }} @@ -52,4 +52,4 @@ Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Fir ### Spécification -Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) +Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md index 18ba0331c9..f768a84b19 100644 --- a/files/fr/web/api/window/unload_event/index.md +++ b/files/fr/web/api/window/unload_event/index.md @@ -7,21 +7,21 @@ tags: translation_of: Web/API/Window/unload_event original_slug: Web/Events/unload --- -L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. +L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. Il est lancé après : 1. [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable) 2. [pagehide](/en-US/docs/Mozilla_event_reference/pagehide) -Le document se trouve alors dans un état particulier : +Le document se trouve alors dans un état particulier : - Toutes les ressources existent encore (img, iframe etc.) - Plus rien n'est encore visible par l'utilisateur final - Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.) - Aucune erreur ne viendra interrompre le flux de déchargement. -Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). +Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). <table class="properties"> <tbody> @@ -59,7 +59,7 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre | `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | Le type d'événement. | | `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement remonte ou non. | | `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement est annulable ou non. | -| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | | `detail` {{readonlyInline}} | `long` (`float`) | 0. | ## Exemple @@ -84,29 +84,29 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre </html> ``` -Ci-dessous, le contenu de `child-frame.html`: +Ci-dessous, le contenu de `child-frame.html`: ```html <!DOCTYPE html> <html> <head> <title>Cadre enfant</title> - <script> - window.addEventListener('beforeunload', function(event) { - console.log('Je suis le 2nd.'); - }); + <script> + window.addEventListener('beforeunload', function(event) { + console.log('Je suis le 2nd.'); + }); window.addEventListener('unload', function(event) { console.log('Je suis le 4ème et dernier…'); }); </script> </head> <body> - ☻ + ☻ </body> </html> ``` -Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. +Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. ## Événements liés diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md index 815a35a5d5..8fcfff0066 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplayconnect` dans une méthode [`addEve ```js window.addEventListener('vrdisplayconnect', function() { - info.textContent = 'Affichage connecté.'; - reportDisplays(); + info.textContent = 'Affichage connecté.'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md index 3e84875409..6578664ce0 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplaydisconnect` dans une méthode [`add ```js window.addEventListener('vrdisplaydisconnect', function() { - info.textContent = 'Affichage déconnecté'; - reportDisplays(); + info.textContent = 'Affichage déconnecté'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/windowclient/focus/index.md b/files/fr/web/api/windowclient/focus/index.md index 4c1a00417c..4d61feab28 100644 --- a/files/fr/web/api/windowclient/focus/index.md +++ b/files/fr/web/api/windowclient/focus/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/focus --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Syntaxe @@ -28,7 +28,7 @@ Nil. ### Valeur de retour -Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Exemple diff --git a/files/fr/web/api/windowclient/focused/index.md b/files/fr/web/api/windowclient/focused/index.md index a6b34590e2..e8797d01d0 100644 --- a/files/fr/web/api/windowclient/focused/index.md +++ b/files/fr/web/api/windowclient/focused/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/focused --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . +La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . ## Syntax diff --git a/files/fr/web/api/windowclient/index.md b/files/fr/web/api/windowclient/index.md index 3fbcd1fde0..b91fb1fb80 100644 --- a/files/fr/web/api/windowclient/index.md +++ b/files/fr/web/api/windowclient/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. +L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. ## Méthodes @@ -32,7 +32,7 @@ _`WindowClient` hérite certaines propriétés de son parent, {{domxref("Client" - {{domxref("WindowClient.focused")}} {{readonlyInline}} - : Un booléen qui indique si oui ou non le client en cours est focus. - {{domxref("WindowClient.visibilityState")}} {{readonlyInline}} - - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. + - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. ## Exemple diff --git a/files/fr/web/api/windowclient/navigate/index.md b/files/fr/web/api/windowclient/navigate/index.md index 85041b1392..c75a684e61 100644 --- a/files/fr/web/api/windowclient/navigate/index.md +++ b/files/fr/web/api/windowclient/navigate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/navigate --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`navigate()`** 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). +La méthode **`navigate()`** 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). ## Syntaxe @@ -29,7 +29,7 @@ La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge ### Retour -Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . +Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . ## Spécifications diff --git a/files/fr/web/api/windowclient/visibilitystate/index.md b/files/fr/web/api/windowclient/visibilitystate/index.md index 3589b09443..785a1c8ef3 100644 --- a/files/fr/web/api/windowclient/visibilitystate/index.md +++ b/files/fr/web/api/windowclient/visibilitystate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/visibilityState --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. +La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. ## Syntaxe @@ -15,7 +15,7 @@ myVisState = WindowClient.visibilityState; ### Value -une {{domxref("DOMString")}}. +une {{domxref("DOMString")}}. ## Example diff --git a/files/fr/web/api/windoweventhandlers/index.md b/files/fr/web/api/windoweventhandlers/index.md index 16b52003b1..e813dad962 100644 --- a/files/fr/web/api/windoweventhandlers/index.md +++ b/files/fr/web/api/windoweventhandlers/index.md @@ -20,7 +20,7 @@ _Les propriétés d'événement, de la forme `onXYZ`, sont définis sur {{domxre - {{domxref("WindowEventHandlers.onbeforeunload")}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché. - {{domxref("WindowEventHandlers.onhashchange")}} - - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. + - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. - {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché. - {{domxref("WindowEventHandlers.onmessage")}} diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.md b/files/fr/web/api/windoweventhandlers/onafterprint/index.md index 2eff2b9b01..00693361e8 100644 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.md @@ -36,7 +36,7 @@ Safari ne reconnaît pas ces événements. | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md index 1df25a3c86..f62378ae29 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md @@ -37,7 +37,7 @@ mediaQueryList.addListener(function(mql) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.md b/files/fr/web/api/windoweventhandlers/onhashchange/index.md index 973f3353f8..36725fabc4 100644 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.md +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.md @@ -3,7 +3,7 @@ title: WindowEventHandlers.onhashchange slug: Web/API/WindowEventHandlers/onhashchange translation_of: Web/API/WindowEventHandlers/onhashchange --- -{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). +{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). ## Syntaxe @@ -38,9 +38,9 @@ function locationHashChanged() { window.onhashchange = locationHashChanged; ``` -## L'événement hashchange +## L'événement hashchange -Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: +Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: <table class="standard-table"> <tbody> @@ -62,7 +62,7 @@ Lorsque l'observateur d'événement déclenche l'événement hashchange il pass </tbody> </table> -### Une solution autour de event.newURL et event.oldURL +### Une solution autour de event.newURL et event.oldURL ```js //insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL @@ -76,15 +76,15 @@ if(!window.HashChangeEvent)(function(){ }()); ``` -### +### -## Spécifications +## Spécifications | Spécifications | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | -| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs @@ -93,5 +93,5 @@ if(!window.HashChangeEvent)(function(){ ## Voir aussi - [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur) -- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) -- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) +- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) +- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.md b/files/fr/web/api/windoweventhandlers/onpopstate/index.md index e9d7b97a63..4487baffd2 100644 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.md +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/WindowEventHandlers/onpopstate Un gestionnaire d'évènement pour l'évènement `popstate` de la fenêtre. -L'évènement `popstate` 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 `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. +L'évènement `popstate` 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 `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. -Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. +Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. ### Syntaxe window.onpopstate = funcRef; -- `funcRef` est une référence à une fonction. +- `funcRef` est une référence à une fonction. ### L'évènement popstate -Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: +Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: ```js window.onpopstate = function(event) { @@ -37,7 +37,7 @@ 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} ``` -Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. +Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. ### Spécification diff --git a/files/fr/web/api/worker/onmessage/index.md b/files/fr/web/api/worker/onmessage/index.md index 5e3e925e37..98c6720c15 100644 --- a/files/fr/web/api/worker/onmessage/index.md +++ b/files/fr/web/api/worker/onmessage/index.md @@ -32,8 +32,8 @@ first.onchange = function() { } myWorker.onmessage = function(e) { - result.textContent = e.data; - console.log('Message reçu du worker'); + result.textContent = e.data; + console.log('Message reçu du worker'); } ``` diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md index 19af80e667..7547415b2c 100644 --- a/files/fr/web/api/worker/postmessage/index.md +++ b/files/fr/web/api/worker/postmessage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Worker/postMessage --- {{ apiref("Worker") }} -La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. +La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. @@ -45,7 +45,7 @@ second.onchange = function() { } ``` -Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). +Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). > **Note :** `postMessage()` peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau. diff --git a/files/fr/web/api/workerglobalscope/console/index.md b/files/fr/web/api/workerglobalscope/console/index.md index 7639bfe044..647aebc499 100644 --- a/files/fr/web/api/workerglobalscope/console/index.md +++ b/files/fr/web/api/workerglobalscope/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WorkerGlobalScope/console --- {{APIRef("Web Workers API")}}{{Non-standard_header}} -La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. +La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. ## Syntaxe @@ -32,13 +32,13 @@ Cette propriété vous permet d'avoir accès à la console du navigateur à des console.log('test'); ``` -dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. +dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. -Si vous appelez `console.log()` 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 `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. +Si vous appelez `console.log()` 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 `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. ## Spécifications -Ne fait pas encore parti d'une spécification. +Ne fait pas encore parti d'une spécification. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/workerglobalscope/dump/index.md b/files/fr/web/api/workerglobalscope/dump/index.md index d2086da3d8..c3bc8dd3a0 100644 --- a/files/fr/web/api/workerglobalscope/dump/index.md +++ b/files/fr/web/api/workerglobalscope/dump/index.md @@ -25,7 +25,7 @@ Rien. ## Exemple -Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): +Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): ```bash ./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.md b/files/fr/web/api/workerglobalscope/importscripts/index.md index 409e24cafe..f76d6ef889 100644 --- a/files/fr/web/api/workerglobalscope/importscripts/index.md +++ b/files/fr/web/api/workerglobalscope/importscripts/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts --- {{APIRef("Web Workers API")}} -La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. +La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. ## Syntaxe diff --git a/files/fr/web/api/workerglobalscope/index.md b/files/fr/web/api/workerglobalscope/index.md index a0c26cd26e..7abb31dce3 100644 --- a/files/fr/web/api/workerglobalscope/index.md +++ b/files/fr/web/api/workerglobalscope/index.md @@ -25,7 +25,7 @@ _Cette interface hérite des propriétés de l'interface {{domxref("EventTarget" - {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers. - {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}} - - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. + - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. - {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers. diff --git a/files/fr/web/api/workerglobalscope/location/index.md b/files/fr/web/api/workerglobalscope/location/index.md index c21bab74f5..454c77289c 100644 --- a/files/fr/web/api/workerglobalscope/location/index.md +++ b/files/fr/web/api/workerglobalscope/location/index.md @@ -25,20 +25,20 @@ Si vous appelez l'instruction suivante dans un document délivré par `localhost console.log(location); ``` -à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : +à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : ```js WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} - hash: "" - host: "localhost:8000" - hostname: "localhost" - href: "http://localhost:8000/worker.js" - origin: "http://localhost:8000" - pathname: "/worker.js" - port: "8000" - protocol: "http:" - search: "" - __proto__: WorkerLocation + hash: "" + host: "localhost:8000" + hostname: "localhost" + href: "http://localhost:8000/worker.js" + origin: "http://localhost:8000" + pathname: "/worker.js" + port: "8000" + protocol: "http:" + search: "" + __proto__: WorkerLocation ``` 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. diff --git a/files/fr/web/api/workerglobalscope/navigator/index.md b/files/fr/web/api/workerglobalscope/navigator/index.md index f9895b1185..68cdfef74d 100644 --- a/files/fr/web/api/workerglobalscope/navigator/index.md +++ b/files/fr/web/api/workerglobalscope/navigator/index.md @@ -15,7 +15,7 @@ var navigatorObj = self.navigator; ### Valeur de retour -Un objet {{domxref("WorkerNavigator")}}. +Un objet {{domxref("WorkerNavigator")}}. ## Exemple diff --git a/files/fr/web/api/workerglobalscope/self/index.md b/files/fr/web/api/workerglobalscope/self/index.md index 48a1670388..e5e1665b14 100644 --- a/files/fr/web/api/workerglobalscope/self/index.md +++ b/files/fr/web/api/workerglobalscope/self/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/self --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. +La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. ## Syntaxe @@ -30,8 +30,8 @@ au sein d'un worker, vous obtiendrez un worker global scope du même type que l' ```js DedicatedWorkerGlobalScope { undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…} - Infinity: Infinity - Array: function Array() { [native code] } + Infinity: Infinity + Array: function Array() { [native code] } arguments: null caller: null isArray: function isArray() { [native code] } @@ -42,7 +42,7 @@ undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: unobserve: function unobserve() { [native code] } __proto__: function Empty() {} <function scope> - ArrayBuffer: function ArrayBuffer() { [native code] } + ArrayBuffer: function ArrayBuffer() { [native code] } Blob: function Blob() { [native code] } Boolean: function Boolean() { [native code] } DataView: function DataView() { [native code] } diff --git a/files/fr/web/api/workerlocation/index.md b/files/fr/web/api/workerlocation/index.md index e6bd9e25cb..be2c1c1926 100644 --- a/files/fr/web/api/workerlocation/index.md +++ b/files/fr/web/api/workerlocation/index.md @@ -8,39 +8,39 @@ translation_of: Web/API/WorkerLocation --- {{APIRef("Web Workers API")}} -L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. +L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. -Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. +Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. ## Propriétés -_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison`':'`. - {{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique. - {{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. + - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. ## Méthodes -_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.toString()")}} - - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. + - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. ## Spécifications @@ -54,5 +54,5 @@ _L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les ## Voir aussi -- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. -- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) +- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. +- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) diff --git a/files/fr/web/api/xmldocument/load/index.md b/files/fr/web/api/xmldocument/load/index.md index e67f1cdece..7125d2192a 100644 --- a/files/fr/web/api/xmldocument/load/index.md +++ b/files/fr/web/api/xmldocument/load/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/XMLDocument/load --- {{APIRef("DOM")}} -`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). 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 [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). +`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). 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 [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). ## Exemples @@ -27,7 +27,7 @@ translation_of: Web/API/XMLDocument/load xmlDoc.addEventListener("load", documentCharge, false); xmlDoc.load('querydata.xml'); -{{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.) +{{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.) ## Spécification @@ -40,4 +40,4 @@ translation_of: Web/API/XMLDocument/load ## Voir aussi - [document.async](/fr/docs/Web/API/Document/async) -- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) +- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md index ef2a2c8481..bbf78ebcb6 100644 --- a/files/fr/web/api/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -83,7 +83,7 @@ Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRe D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (`onload`, `onerror`, `onprogress`, etc.). Voir le guide [Manipuler XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest). -La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). +La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). ## Méthodes diff --git a/files/fr/web/api/xmlhttprequest/load_event/index.md b/files/fr/web/api/xmlhttprequest/load_event/index.md index 8d314127c3..1b9875fcef 100644 --- a/files/fr/web/api/xmlhttprequest/load_event/index.md +++ b/files/fr/web/api/xmlhttprequest/load_event/index.md @@ -14,7 +14,7 @@ The **`XMLHttpRequestEventTarget.onload`** is the function called when an {{domx ### Values -- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. +- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. ## Example diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md index 0622599286..60f69ba432 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.md +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/open La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante. -> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. +> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. ## Syntaxe @@ -24,9 +24,9 @@ La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête. - `async` {{optional_inline}} - - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, 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 `multipart` est sur "true" aussi ou une exception sera levée. + - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, 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 `multipart` est sur "true" aussi ou une exception sera levée. - > **Note :** 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")}}. + > **Note :** 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")}}. - `user` {{optional_inline}} - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md index f453f7aa74..5564c8b433 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.md +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -51,11 +51,11 @@ La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve u - UNSENT - : Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée. - OPENED - - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. + - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. - HEADERS_RECEIVED - : send() a été appelé et les en-têtes de réponse ont été reçus - LOADING - - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. + - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. - DONE - : L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué. diff --git a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md index c9cf4293db..7f3216a653 100644 --- a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md +++ b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/XMLHttpRequest/onreadystatechange --- {{APIRef}} -Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** 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. +Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** 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. > **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif. @@ -28,8 +28,8 @@ var xhr = new XMLHttpRequest(), xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { - console.log(xhr.responseText); - } + console.log(xhr.responseText); + } }; xhr.send(); ``` diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md index d07b064c06..89ff616f78 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.md +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -107,7 +107,7 @@ translation_of: Web/API/XMLHttpRequest/response </tbody> </table> -> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. +> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. ## Example @@ -115,16 +115,16 @@ translation_of: Web/API/XMLHttpRequest/response var url = 'somePage.html'; // une page locale function load(url, callback) { - var xhr = new XMLHttpRequest(); + var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - console.log(xhr.response); // Par défault une DOMString - } - } + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + console.log(xhr.response); // Par défault une DOMString + } + } xhr.open('GET', url, true); - xhr.send(''); + xhr.send(''); } ``` diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md index 5b78aee1da..183f096c1a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.md +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -13,7 +13,7 @@ La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** re ### Value -A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. +A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. Lors du traitement d'une requête asynchrone, la valeur de `responseText` reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues. diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md index 1261f8a9b3..81d150e4ee 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.md +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/send --- {{APIRef('XMLHttpRequest')}} -La méthode {{domxref("XMLHttpRequest")}} **`send()`** 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. +La méthode {{domxref("XMLHttpRequest")}} **`send()`** 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. -`send()` accepte un paramètre optionnel 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 `body` est ignoré et le corps de la requête est fixé à `null`. +`send()` accepte un paramètre optionnel 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 `body` est ignoré et le corps de la requête est fixé à `null`. Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" `Accept` avec le type `"*/*"` (tous types) est envoyé. @@ -39,7 +39,7 @@ Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref(" Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée. -La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. +La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. ### Valeur de retour diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md index 14381808cd..4b5b525ba4 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader --- {{APIRef('XMLHttpRequest')}} -La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. +La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. -A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. +A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. -Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. +Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. -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)}}. +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)}}. -> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" 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. +> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" 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. ## Syntax diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index ef65aa1245..9c366f23af 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -14,11 +14,11 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- -[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) 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 [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) 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. +[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) 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 [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) 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. ```js function reqListener () { - console.log(this.responseText); + console.log(this.responseText); } var oReq = new XMLHttpRequest(); @@ -29,37 +29,37 @@ oReq.send(); ## Types de requêtes -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 [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) 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 [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. +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 [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) 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 [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. > **Note :** 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. ## Gérer les réponses -Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) 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. +Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) 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. -### Analyser et manipuler la propriété `responseXML` +### Analyser et manipuler la propriété `responseXML` Si vous utilisez `XMLHttpRequest` pour obtenir le contenu d'un fichier XML distant, la propriété `responseXML` sera un objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatre moyens principaux d'analyser ce document XML : -1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. -2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. -3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. -4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** +1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. +2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. +3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. +4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** 5. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `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. -### Analyser et manipuler une propriété `responseText` contenant un document HTML +### Analyser et manipuler une propriété `responseText` contenant un document HTML -> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. +> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. -Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` 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 : +Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` 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 : -1. Utiliser la propriété `XMLHttpRequest.responseXML`. -2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. +1. Utiliser la propriété `XMLHttpRequest.responseXML`. +2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. 3. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `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. ## Gérer les données binaires -Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. +Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. ```js var oReq = new XMLHttpRequest(); @@ -69,7 +69,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); /* ... */ ``` -La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. +La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. ```js var oReq = new XMLHttpRequest(); @@ -77,19 +77,19 @@ var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { - var arraybuffer = oReq.response; // n'est pas responseText - /* ... */ + var arraybuffer = oReq.response; // n'est pas responseText + /* ... */ } oReq.send(); ``` -Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) +Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) ## Surveiller la progression -`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. +`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. -Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. +Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. ```js var oReq = new XMLHttpRequest(); @@ -105,12 +105,12 @@ oReq.open(); // progression des transferts depuis le serveur jusqu'au client (téléchargement) function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Impossible de calculer la progression puisque la taille totale est inconnue - } + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Impossible de calculer la progression puisque la taille totale est inconnue + } } function transferComplete(evt) { @@ -126,13 +126,13 @@ function transferCanceled(evt) { } ``` -Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. +Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. -> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. +> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. -Le gestionnaire de progression, spécifié par la fonction `updateProgress()` 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 `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. +Le gestionnaire de progression, spécifié par la fonction `updateProgress()` 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 `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. -Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: +Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: ```js var oReq = new XMLHttpRequest(); @@ -145,15 +145,15 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); ``` -> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. +> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. -> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). +> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). -> **Note :** 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. +> **Note :** 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. -> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. +> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. -Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : +Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : ```js req.addEventListener("loadend", loadEnd, false); @@ -163,32 +163,32 @@ function loadEnd(e) { } ``` -Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. +Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. ## Envoyer des formulaires et uploader des fichiers -Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : +Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : - n'utiliser rien de plus qu'AJAX -- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) +- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) -La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). -La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. +La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). +La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. -### Rien de plus que `XMLHttpRequest` +### Rien de plus que `XMLHttpRequest` -Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. +Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. #### Une brève introduction au méthodes de submission Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières : -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; -- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; +- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). -Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : +Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : - Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut): @@ -220,13 +220,13 @@ Maintenant, considérons qu'on envoie un formulaire contenant seulement deux cha -----------------------------314911788813839-- -Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : +Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. #### Un petit framework vanilla -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 _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: +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 _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: ```html <!doctype html> @@ -240,140 +240,140 @@ Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTML /*\ |*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() \*/ if (!XMLHttpRequest.prototype.sendAsBinary) { - XMLHttpRequest.prototype.sendAsBinary = function(sData) { - var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; } /*\ |*| -|*| :: AJAX Form Submit Framework :: +|*| :: AJAX Form Submit Framework :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest |*| |*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| -|*| Syntax: +|*| Syntax: |*| -|*| AJAXSubmit(HTMLFormElement); +|*| AJAXSubmit(HTMLFormElement); \*/ var AJAXSubmit = (function () { - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + else { + /* method is POST */ + oAjaxReq.open("post", oData. + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxR + oAjaxR + } else { + /* enctype is application/x-www-form-urlencoded or text/plain + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + else { + /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + else if ((sFieldTyp + /* field type is no + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField + * enctype is application/x-www-form-urlencoded or + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; })(); @@ -386,94 +386,94 @@ var AJAXSubmit = (function () { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> <form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: +Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: ```php <?php @@ -504,15 +504,15 @@ La syntaxe de ce script est la suivante: AJAXSubmit(myForm); -> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) 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 **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. +> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) 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 **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. -> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). 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 [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). +> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). 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 [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). > **Note :** La méthode non-standard `sendAsBinary` est dépréciée à partir de Gecko 31 et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place. ### Utiliser les objets FormData -Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. 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 `submit()` 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 [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : +Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. 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 `submit()` 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 [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : ```html <!doctype html> @@ -524,31 +524,31 @@ Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous p "use strict"; function ajaxSuccess () { - alert(this.responseText); + alert(this.responseText); } function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + else { + var oField, sFieldType, nFile, sSearch = + for (var nItem = 0; nItem < oFormElement + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("na + sFieldType = oField.nodeName + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + esca + } + + + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } } </script> </head> @@ -559,32 +559,32 @@ function AJAXSubmit (oFormElement) { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> @@ -594,51 +594,51 @@ function AJAXSubmit (oFormElement) { <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. +> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. ## Récupérer la date de modification ```js function getHeaderTime () { - alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ + alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ } var oReq = new XMLHttpRequest(); @@ -654,24 +654,24 @@ Créons deux fonctions: ```js function getHeaderTime () { - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + var + nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), + nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } } function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); } ``` @@ -681,15 +681,15 @@ Test: /* Testons le fichier "mapage.html"... */ ifHasChanged("mapage.html", function (nModif, nVisit) { - alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); + alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); }); ``` -Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). +Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). ## Cross-site XMLHttpRequest -Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. +Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. ## Contourner le cache @@ -711,9 +711,9 @@ oReq.send(null); ## Sécurité -{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} +{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} -{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} +{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} La manière recommandée d'activer les requêtes intersites est d'utiliser l'en-tête HTTP `Access-Control-Allow-Origin` dans la réponse du `XMLHttpRequest`. @@ -723,7 +723,7 @@ Si vous vous retrouvez avec une `XMLHttpRequest` ayant `status=0` et `statusText ## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM -Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. 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. +Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. 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. ```js const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md index ec22be411b..e7cb522304 100644 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/XMLHttpRequest/withCredentials --- {{APIRef('XMLHttpRequest')}} -La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. +La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. -Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. +Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. Les cookies tiers obtenus lorsque `withCredentials` vaut `true` continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via [`document.cookie`](/fr/docs/Web/API/Document/cookie) ou depuis les en-têtes de la réponse. @@ -34,7 +34,7 @@ xhr.send(null); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | +| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md index 58857af3a9..df589c5b4d 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -35,7 +35,7 @@ Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum ini ## La syntaxe de Firefox non-standard -Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. +Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. const request = new XMLHttpRequest(paramsDictionary); diff --git a/files/fr/web/api/xmlserializer/index.md b/files/fr/web/api/xmlserializer/index.md index 0823351087..58d40e6ce9 100644 --- a/files/fr/web/api/xmlserializer/index.md +++ b/files/fr/web/api/xmlserializer/index.md @@ -28,16 +28,16 @@ original_slug: XMLSerializer var s = new XMLSerializer(); var stream = { - close : function() + close : function() { alert("Flux fermé"); }, - flush : function() + flush : function() { }, - write : function(string, count) + write : function(string, count) { - alert("'" + string + "'\n nb d'octets : " + count + ""); + alert("'" + string + "'\n nb d'octets : " + count + ""); } }; s.serializeToStream(document, stream, "UTF-8"); diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.md b/files/fr/web/api/xsltprocessor/basic_example/index.md index f7de3132b2..d756065dd3 100644 --- a/files/fr/web/api/xsltprocessor/basic_example/index.md +++ b/files/fr/web/api/xsltprocessor/basic_example/index.md @@ -18,9 +18,9 @@ La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xm Une feuille de style XSLT débute par l'élément `xsl:stylesheet`, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds `Author`. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via `apply-templates`) correspondant aux nœuds `Author` qui sont les descendants du nœud `Authors`. -Figure 1 : exemple XSLT simple +Figure 1 : exemple XSLT simple -Document XML (exemple.xml) : +Document XML (exemple.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="exemple.xsl"?> @@ -33,7 +33,7 @@ Document XML (exemple.xml) : <Body>Ceci est le texte de mon article.</Body> </Article> -Feuille de style XSL (exemple.xsl) : +Feuille de style XSL (exemple.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> @@ -42,7 +42,7 @@ Feuille de style XSL (exemple.xsl) : <xsl:template match="/"> Article - <xsl:value-of select="/Article/Title"/> - Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> + Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> </xsl:template> <xsl:template match="Author"> @@ -51,10 +51,10 @@ Feuille de style XSL (exemple.xsl) : </xsl:stylesheet> -Sortie dans le navigateur : +Sortie dans le navigateur : Article - Mon article - Auteurs : + Auteurs : - M. Foo - M. Bar diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md index 535ee31fe5..6b79d2d94e 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.md +++ b/files/fr/web/api/xsltprocessor/generating_html/index.md @@ -16,7 +16,7 @@ Une application courante de XSLT dans les navigateurs est la transformation de c L'élément `<body>` de l'article contient maintenant des éléments HTML (des balises `<strong>` et `<em>`, 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 `xsl:output` 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, [`http://devedge.netscape.com/2002/de`](http://devedge.netscape.com/2002/de), à qui nous donnons le préfixe myNS `(xmlns:myNS="http://devedge.netscape.com/2002/de")`. -**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** 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;"> +**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** 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;"> <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> @@ -34,7 +34,7 @@ L'élément `<body>` de l'article contient maintenant des éléments HTML (des b 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 à `HTML` à l'aide de l'élément `xsl:output`. 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. -**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): +**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -47,7 +47,7 @@ La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un po 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. -**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): +**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): ... <xsl:template match="/"> @@ -71,7 +71,7 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p <xsl:value-of select="/myNS:Article/myNS:Title"/> </span> <br /> - Auteurs : <br /> + Auteurs : <br /> <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> </p> @@ -85,16 +85,16 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p </xsl:template> ... -Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. 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. +Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. 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. -**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): +**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): ... <xsl:template match="myNS:Author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> + :: <strong> <xsl:value-of select="@company" /> </strong> </xsl:if> <br /> @@ -113,9 +113,9 @@ Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exe </xsl:template> ... -La feuille de style XSLT finale est donc : +La feuille de style XSLT finale est donc : -**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : +**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -162,7 +162,7 @@ La feuille de style XSLT finale est donc : -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <b> <xsl:value-of select="@company" /> </b> + :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md index 59b57119e7..8006c9c22f 100644 --- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md @@ -6,21 +6,21 @@ tags: translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla --- -#### Pourquoi ma feuille de style ne s'applique pas ? +#### Pourquoi ma feuille de style ne s'applique pas ? Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir `text/xml` ou `application/xml`. L'espace de nommage XSLT est `http://www.w3.org/1999/XSL/Transform`. Utilisez l'instruction de traitement `<?xml-stylesheet ?>` plutôt que l'élément non standard `xml:stylesheet`. 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 [LiveHTTPHeaders (en)](http://livehttpheaders.mozdev.org/) 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é. -#### Cela fonctione dans IE, mais pas dans Mozilla ? +#### Cela fonctione dans IE, mais pas dans Mozilla ? 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. -#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? +#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? 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 **d-o-e** plutôt que de provoquer des crashes ou de ralentir le processus. -#### Que dire de `document.write` ? +#### Que dire de `document.write` ? -Tout comme pour le XHTML, `document.write` 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 : +Tout comme pour le XHTML, `document.write` 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 : <xsl:if test="system-property('xsl:vendor')='Transformiix'"> <!-- Balisage propre à Mozilla --> @@ -29,7 +29,7 @@ Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les trans <!-- Balisage propre à IE --> </xsl:if> -Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : +Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> @@ -38,7 +38,7 @@ Vérifiez system-properties.xml pour les propriétés de votre système favori. #### Que dire de `media="print"`? -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 `media` 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 `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. +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 `media` 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 `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient `media` comme les pages sans XSLT**.** @@ -46,10 +46,10 @@ Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, Il existe `transformToDocument` et `transformToFragment` depuis Mozilla 1.2, voir [Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL](fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL). -#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? +#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? -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. +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. -#### Comment compiler une version autonome de TransforMiiX ? +#### Comment compiler une version autonome de TransforMiiX ? Voir l'article sur [Compilation de TransforMiiX](fr/Compilation_de_TransforMiiX). |
