diff options
Diffstat (limited to 'files')
19 files changed, 1475 insertions, 1602 deletions
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.md b/files/fr/web/api/audiobuffersourcenode/buffer/index.md index 81421a685b..91ac9e346e 100644 --- a/files/fr/web/api/audiobuffersourcenode/buffer/index.md +++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.md @@ -2,58 +2,90 @@ title: AudioBufferSourceNode.buffer slug: Web/API/AudioBufferSourceNode/buffer translation_of: Web/API/AudioBufferSourceNode/buffer +browser-compat: api.AudioBufferSourceNode.buffer --- -{{ APIRef("Web Audio API") }} +{{APIRef("Web Audio API")}} -La propriété **`buffer`** de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio. +La propriété **`buffer`** de l'interface [`AudioBufferSourceNode`](/fr/docs/Web/API/AudioBufferSourceNode) donne la possibilité de lire un son en utilisant un objet [`AudioBuffer`](/fr/docs/Web/API/AudioBuffer) comme ressource audio. -Si la propriété `buffer` a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0). +Si la propriété `buffer` a la valeur `null`, le nœud génère un canal unique silencieux (chaque échantillon vaut `0`). ## Syntaxe - AudioBufferSourceNode.buffer = soundBuffer; +```js +AudioBufferSourceNode.buffer = soundBuffer; +``` ### Valeur -Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire. +Un objet [`AudioBuffer`](/fr/docs/Web/API/AudioBuffer) qui contient les données représentant le son que le nœud va lire. ## Exemple -> **Note :** Pour un exemple complet, voir [le code interprété](http://mdn.github.io/audio-buffer/), ou [le code source](https://github.com/mdn/audio-buffer). +> **Note :** Pour un exemple complet, voir [cette démonstration](https://mdn.github.io/webaudio-examples/audio-buffer/), ou [le code source correspondant](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html). ```js -var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); +let AudioContext = window.AudioContext || window.webkitAudioContext; +let audioCtx; + +// Stereo +let channels = 2; + +function init() { + audioCtx = new AudioContext(); +} button.onclick = function() { - // Remplit le buffer avec du bruit blanc; - // valeurs aléatoires entre -1.0 et 1.0 - for (var channel = 0; channel < channels; channel++) { - // Crée le ArrayBuffer qui contient effectivement les données - var nowBuffering = myArrayBuffer.getChannelData(channel); - for (var i = 0; i < frameCount; i++) { - // Math.random() is in [0; 1.0] - // audio doit être compris entre [-1.0; 1.0] + if(!audioCtx) { + init(); + } + + // On crée un tampon stéréo vide de deux secondes + // qui utilise l'échantillonage de AudioContext + let frameCount = audioCtx.sampleRate * 2.0; + + let myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate); + + // On remplit le buffer avec du bruit blanc ; + // soit des valeurs entre -1.0 et 1.0 + for (let channel = 0; channel < channels; channel++) { + // Voici le calcul du tableau réel qui contient + // les données + let nowBuffering = myArrayBuffer.getChannelData(channel); + for (let i = 0; i < frameCount; i++) { + // Math.random() donne une valeur sur [0; 1.0] + // audio doit être sur [-1.0; 1.0] nowBuffering[i] = Math.random() * 2 - 1; } } - // Crée un AudioBufferSourceNode. - // C'est le AudioNode à utiliser pour jouer un AudioBuffer - var source = audioCtx.createBufferSource(); - // Définit le buffer dans l'AudioBufferSourceNode + // On récupère un AudioBufferSourceNode. + // C'est l'objet AudioNode à utiliser pour lire + // un AudioBuffer + let source = audioCtx.createBufferSource(); + // on passe le buffer avec AudioBufferSourceNode source.buffer = myArrayBuffer; + // on connecte le nœud AudioBufferSourceNode à + // la destination afin d'entendre le son + source.connect(audioCtx.destination); + // on lance la lecture + source.start(); + + source.onended = () => { + console.log('Bruit blanc terminé'); + } +} ``` ## Spécifications -| Spécification | Statut | Commentaire | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}} | {{Spec2("Web Audio API")}} | Définition initiale | +{{Specifications}} ## Compatibilité navigateurs -{{Compat("api.AudioBufferSourceNode.buffer")}} +{{Compat}} ## Voir aussi -{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}} +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [L'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API) diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index 225e9b0519..b90ed1d32a 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -1,84 +1,78 @@ --- title: AudioListener slug: Web/API/AudioListener -tags: - - API - - Experimental - - Reference - - Web Audio API translation_of: Web/API/AudioListener +browser-compat: api.AudioListener --- {{APIRef("Web Audio API")}} -L'interface _AudioListener_ représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une [spatialisation audio](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet _AudioListener_ stocké dans la propriété {{domxref ("AudioContext.listener")}}. +L'interface `AudioListener` représente la position et l'orientation de l'unique personne écoutant la scène audio ; elle est utilisée dans le cadre d'une [spatialisation audio](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Tous les objets [`PannerNode`](/fr/docs/Web/API/PannerNode) sont spatialisés par rapport à l'objet `AudioListener` stocké dans la propriété [`BaseAudioContext.listener`](/fr/docs/Web/API/BaseAudioContext/listener). -Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}. +Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un [`AudioNode`](/fr/docs/Web/API/AudioNode). - + ## Propriétés -_Hérite des propriétés de son parent,_ `AudioNode`. - -> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. - -- {{domxref("AudioListener.positionX")}} - - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. -- {{domxref("AudioListener.positionY")}} - - : Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. -- {{domxref("AudioListener.positionZ")}} - - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. -- {{domxref("AudioListener.forwardX")}} - - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. -- {{domxref("AudioListener.forwardY")}} - - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. -- {{domxref("AudioListener.forwardZ")}} - - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. -- {{domxref("AudioListener.upX")}} - - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. -- {{domxref("AudioListener.upY")}} - - : Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. -- {{domxref("AudioListener.upZ")}} - - : Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +> **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éfinie à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme telle dans la spécification IDL. + +- [`AudioListener.positionX`](/fr/docs/Web/API/AudioListener/positionX) + - : La position horizontale de la personne qui écoute avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est `0`. +- [`AudioListener.positionY`](/fr/docs/Web/API/AudioListener/positionY) + - : La position verticale de la personne qui écoute avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est `0`. +- [`AudioListener.positionZ`](/fr/docs/Web/API/AudioListener/positionZ) + - : La position longitudinale (avant et arrière) de la personne qui écoute avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est `0`. +- [`AudioListener.forwardX`](/fr/docs/Web/API/AudioListener/forwardX) + - : La position horizontale de l'orientation vers l'avant de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `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`. +- [`AudioListener.forwardY`](/fr/docs/Web/API/AudioListener/forwardY) + - : La position verticale de l'orientation vers l'avant de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `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`. +- [`AudioListener.forwardZ`](/fr/docs/Web/API/AudioListener/forwardZ) + - : La position longitudinale (avant et arrière) de l'orientation vers l'avant de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `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 `-1`. +- [`AudioListener.upX`](/fr/docs/Web/API/AudioListener/upX) + - : La position horizontale du haut de la tête de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `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`. +- [`AudioListener.upY`](/fr/docs/Web/API/AudioListener/upY) + - : La position verticale du haut de la tête de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `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 `1`. +- [`AudioListener.upZ`](/fr/docs/Web/API/AudioListener/upZ) + - : La position longitudinale (avant et arrière) du haut de la tête de la personne qui écoute avec le même système de coordonnées cartésiennes que les valeurs de position (`positionX`, `positionY`, et `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est `0`. ## Méthodes -_Hérite des propriétés de son parent,_ `AudioNode`. +- [`AudioListener.setOrientation()`](/fr/docs/Web/API/AudioListener/setOrientation) {{deprecated_inline}} + - : Définit l'orientation de la personne qui écoute. +- [`AudioListener.setPosition()`](/fr/docs/Web/API/AudioListener/setPosition) {{deprecated_inline}} + - : Définit la position de la personne qui écoute. -- {{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. +> **Note :** Bien que ces méthodes soient dépréciées, il s'agit de l'unique façon de définir l'orientation et la position pour Firefox, Internet Explorer et Safari. -## Fonctionnalités obsolètes +## Fonctionnalités dépréciées -- {{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}} - - : Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un [effet doppler](http://en.wikipedia.org/wiki/Doppler_effect). -- {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} - - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. +- [`AudioListener.dopplerFactor`](/fr/docs/Web/API/AudioListener/dopplerFactor) {{deprecated_inline}} + - : Nombre flottant à double précision représentant la quantité de décalage de fréquence (<i lang="en">pitch shift</i>) à utiliser pour le rendu d'un [effet doppler](https://fr.wikipedia.org/wiki/Effet_Doppler). +- [`AudioListener.speedOfSound`](/fr/docs/Web/API/AudioListener/speedOfSound) {{deprecated_inline}} + - : Nombre flottant à précision double 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()` pouvaient être utilisés pour contrôler un effet Doppler appliqué à un [`AudioBufferSourceNode`](/fr/docs/Web/API/AudioBufferSourceNode) connecté en aval. Ils pouvaient être transposés en fonction de la vitesse relative du [`PannerNode`](/fr/docs/Web/API/PannerNode), et de l'`AudioListener`. Ces fonctionnalités soulevaient un certain nombre de problèmes : -- Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. -- Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. -- Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son. +- Seuls les [`AudioBufferSourceNode`](/fr/docs/Web/API/AudioBufferSourceNode) étaient transposés, pas les autres nœuds source. +- Le comportement à adopter lorsqu'un [`AudioBufferSourceNode`](/fr/docs/Web/API/AudioBufferSourceNode) était connecté à plusieurs [`PannerNode`](/fr/docs/Web/API/PannerNode) n'était pas clair. +- Comme la vélocité du panoramique et de la personne qui écoute n'étaient pas des [`AudioParam`](/fr/docs/Web/API/AudioParam), la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son. C'est la raison pour laquelle elles ont été supprimées. +Les méthodes `setOrientation()` et `setPosition()` ont été remplacées par la capacité à modifier les valeurs des propriétés correspondantes. Ainsi, `setPosition(x, y, z)` pourra être réalisé en agissant sur les propriétés `positionX.value`, `positionY.value`, et `positionZ.value`. + ## Exemples -{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}} +Voir la page sur [`BaseAudioContext.createPanner()`](/fr/docs/Web/API/BaseAudioContext/createPanner#exemple) pour un exemple de code. ## Spécifications -| Spécification | Statut | Commentaire | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} -## Compatibilité navigateurs +## Compatibilité des navigateurs -{{Compat("api.AudioListener")}} +{{Compat}} ## Voir aussi -- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiolistener/webaudiolistenerreduced.svg b/files/fr/web/api/audiolistener/webaudiolistenerreduced.svg new file mode 100644 index 0000000000..e76786336b --- /dev/null +++ b/files/fr/web/api/audiolistener/webaudiolistenerreduced.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="233" viewBox="-0.5 -0.5 500 233"><path d="M92 193v-63.63" fill="none" stroke="#0f0" stroke-miterlimit="10" pointer-events="stroke"/><path d="m92 124.12 3.5 7-3.5-1.75-3.5 1.75z" fill="#0f0" stroke="#0f0" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:123px;margin-left:82px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap">y</div></div></div></foreignObject><text x="82" y="128" font-family="Helvetica" font-size="16" text-anchor="middle">y</text></switch><path d="M92 193h53.63" fill="none" stroke="red" stroke-miterlimit="10" pointer-events="stroke"/><path d="m150.88 193-7 3.5 1.75-3.5-1.75-3.5z" fill="red" stroke="red" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:203px;margin-left:152px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap">x</div></div></div></foreignObject><text x="152" y="208" font-family="Helvetica" font-size="16" text-anchor="middle">x</text></switch><path d="m92 193-34.91 26.18" fill="none" stroke="#00f" stroke-miterlimit="10" pointer-events="stroke"/><path d="m52.89 222.33 3.5-7 .7 3.85 3.5 1.75z" fill="#00f" stroke="#00f" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:223px;margin-left:72px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap">z</div></div></div></foreignObject><text x="72" y="228" font-family="Helvetica" font-size="16" text-anchor="middle">z</text></switch><path d="m92 193 144.38-77" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m241.01 113.53-4.53 6.38-.1-3.91-3.19-2.27z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:183px;margin-left:262px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:11px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap"><div>Le vecteur de position qui place la source<br/></div><div>dans l'espace avec un repère cartésien<br/></div></div></div></div></foreignObject><text x="262" y="186" font-family="Helvetica" font-size="11" text-anchor="middle">Le vecteur...</text></switch><image x="217.5" y="46.5" width="52" height="123" xlink:href="data:image/webp;base64,UklGRvQGAABXRUJQVlA4TOcGAAAvf8AfEOfGppEkR5U+fxiP7UPv5u49BDaNJDmq9PjDOGwXvjfNppEkR5UefxiH7cL3ph1GstU20kN/nnN24a7QFeT8AD0Utm3bZKdTyBnoUn07J/pti+W+gYLZ/n1ApJgCAsQF7xSxBxEAAkSAwPUSVqmGCmGEYYwwCowCQTDeEJQCeCMCsKj3rogBCQCQAASmAHoAeKyfIK8vYTi7OwTSjQRxfvCOgCkIgilAWIEACOIIgqkzBEEwhHtqimlK+OGXmqd+x/+jGeMJwzAajIp2vvR3HaXO5BoLKsYHAcqJce8gGK1b6wTD8HZr2/K22bZtkqlywFRm5oaZmZMyGhvmxA7JbCvMHNNiDoPCzMxkqFs5/+ZQRvd9P/b023mOiP5PgPzfhnHd+jeknZ8T9FdX+4Nzzt9o6N8t7sXR7s0HmSjdlzwg9gWwafQRtM4b9Y3Vyt6diYEzBpfZaul3tTw/99QfI97qmrA9JhSK2Z7Q9a0Rt07lPgdqH/ls1OHbXMJXnWn4IkIUtnYZNqkmDOTd2Wyb6G/zCZs/8aNy0di+36RKB1SNL7JK332Ezfp7h2gPDMtywMK19uhwibBHP4gSI6PePuKAy7GWWLMT5/xPnomx3rVBB/5eNohqKACobogQo0uH5wIUfBty3baZOK92FOOXX8F5bpnLOhwByBvmETcOqAbIXO6qhIUAWV3FpV0OA+zt7KLu9QDp0eLardcA6r90zcqdAHeixMXe+wD1iS7puAjgW4+42jMcYE+8K7YFAYaJ61sA5i9zQeFMgAax4BiAcyHzHgH85rGB5yeAJ8Z9WgCkt4oVWzOAgtcNW7oLCEaLJbdmAv4ORnkuATVJYs1V1cAko/oCDBaLDgH4xKDoRcBVj008V4CFReY8AmrixaptcoHxxizPB/4Sy44Aqjqacg84HGGb0iDwoyFL84A+Yt2PgeqAGQ+B+V77eOcB3xpRXAt8IBbuD9TGmfAusCBko6gsYJAJM4G/Ra0vpa4ubbMuX0pdXdpmNdICnDOgE5C/Q41vF4Dfp8e3C8DvUxOoBOL1jQYmitoUwibrSSFsshq5DIzUdwT4SFFduHo9deHqFa0DjmkLANXlerKNyFZUkQcF23R9CEwVxWnhbulJC3dLkUwD+ur6BRiuarPfsSSgZ7PfsSSgagRwT9dBYL0q8SXX198KiGZfcn39rYCo7gFkaioDaguVWTAiFyjR8xVwSiw+B+iqpz/wh81uAuv0jAGabdYENOpJA/rarB+Qqmc60M1mq4Fpek4AK2y2EjipJwuItVkHIFPPLqDEZmXAbj3VQMhmhUDNf5tdQInNyoDderKAWJt1ADL1nABW2GwlcFLPdKCbzVYD0/SkAX1t1g9I1dMANNusCRil523gD5vdBD7U0w04ZbM5wAY9cUBtob0icoEYPZIFdLdXDyBTNP8CDLfXSOC+rg+Bqfa6ALylawdQ3d5WRXlQsE2XHAX6KXrkNaf1e0UfAMdF+yhgkiImtjMlMAVFk4ER+r4BKgOK2NPbCM+HfhT5KoHl+uQsMEwVTNqkL3EaqGoBzouBg4EFISUDqoDK9C56Ot/JB/LfURKVBQw0oawW6K9EXl0EUJD+WYSqircu4jzwiih9H8iJM0EeAfO8SqT4JmGzf32t4t/F9UmpxVnwa4wo9c4HJoiRvmpgrRqRL445gKqZDwZ/nvBSjDyLadel5z935xYQftZXorgvULPDDLkPZEUqkmc9z4RRfvpDryguzQR+EEM7VgHNqkQ8r6Xlqqr7vbuobwLyOpgi44Hc5cpEJPrD9Lp/t+TWG6WiMb4GeCrGFi0Erng0iEhr0oBHGXMW+6n0Lzpzfey6th7R6pkEHGhvjqwFeEeP6UMBeovJl4HqVfbYkAdcEaN9S4CDJbbYmgn4t5glvQqAa612iPoTKHhNTH8McNtjA8/PAGPF+NA5gDE2GAtwIco8WTYfoMV9LQBHisWN2/cBfPvMXZ7hAPs6iDsTdgLciXKT9z5AfWdx6/psgIyt7on5EyB7tbh3xX6Agy+7JSkIsGijuLnDPICqYR43eN6pBgi2EXcvO4fzynLz4ifhvFAsbm8dXgmQ9225WaXDawAKvg2JBV/fhTP4sdccb99DOJe8JnaMneSAI/1DZoTen0/YKz6x5tqFDjjYEtDnazlI2ANvik2Lxlc5oPLyugodResmVxI2b1x7seyWb3MdQP6Zhi8iVLR2GTaphvDVd5aLhQPf1oZx1sxObvroq6+3l4RCJdu//qpfU/LJGp6fM2GHWDpu0LnnaD3/XonYPH7kMT3Hm5eL/V9680FQzb7kAT55YZZ0/WB06oXZwV3V1buCs6elNq7rGiP/kxEA" preserveAspectRatio="none" transform="rotate(20 244 108.5)"/><path d="m242 113 27.76-74.04" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m271.61 34.05.82 7.78-2.67-2.87-3.89.41z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:13px;margin-left:302px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: #000000; background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:11px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap"><div>Le vecteur haut (<i>up</i>) qui représente la direction du haut</div><div>de la tête de la personne qui écoute<br/></div></div></div></div></foreignObject><text x="302" y="16" font-family="Helvetica" font-size="11" text-anchor="middle">Le vecteur...</text></switch><path d="m242 113-53.96-17.99" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/><path d="m183.06 93.35 7.75-1.1-2.77 2.76.55 3.88z" stroke="#000" stroke-miterlimit="10" pointer-events="all"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1px;height:1px;padding-top:63px;margin-left:248px"><div style="box-sizing:border-box;font-size:0;text-align:center" data-drawio-colors="color: #000000; background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:16px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap"><div style="font-size:11px"><font style="font-size:11px">Le vecteur avant (<i>front</i>) qui indique la direction vers laquelle la personne fait face (où pointe son nez)</font></div></div></div></div></foreignObject><text x="112" y="68" font-family="Helvetica" font-size="16" text-anchor="middle">Le vect...</text></switch><path d="m212 173-40-20m40-50-30-30m130-40-47 22m67 58-92-5" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="1 1" pointer-events="stroke"/><switch transform="translate(-.5 -.5)"><foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe flex-start;width:1px;height:1px;padding-top:113px;margin-left:334px"><div style="box-sizing:border-box;font-size:0;text-align:left" data-drawio-colors="color: #000000; background-color: rgb(255, 255, 255);"><div style="display:inline-block;font-size:11px;font-family:Helvetica;color:#000;line-height:1.2;pointer-events:all;background-color:#fff;white-space:nowrap"><div>Les vecteurs avant et haut<br/></div><div>sont toujours perpendiculaires</div><div>(ils forment un angle de 90°)</div></div></div></div></foreignObject><text x="334" y="116" font-family="Helvetica" font-size="11">Les vecteu...</text></switch><path d="m232 110 4-10m10 3-10-3" fill="none" stroke="#000" stroke-miterlimit="10" pointer-events="stroke"/></svg>
\ No newline at end of file diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index e641539367..81ed1cfe1d 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -1,37 +1,35 @@ --- title: BiquadFilterNode slug: Web/API/BiquadFilterNode -tags: - - API - - Experimental - - Reference - - Web Audio API translation_of: Web/API/BiquadFilterNode +browser-compat: api.BiquadFilterNode --- {{APIRef("Web Audio API")}} -L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un `BiquadFilterNode` a toujours exactement une entrée et une sortie. +L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, créé avec la méthode [`AudioContext.createBiquadFilter()`](/fr/docs/Web/API/AudioContext/createBiquadFilter). Il s'agit d'un objet [`AudioNode`](/fr/docs/Web/API/AudioNode) qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un objet `BiquadFilterNode` possède toujours exactement une entrée et une sortie. + +{{InheritanceDiagram}} <table class="properties"> <tbody> <tr> - <th scope="row"><dfn>Nombre d'entrées</dfn></th> + <th scope="row">Nombre d'entrées</th> <td><code>1</code></td> </tr> <tr> - <th scope="row"><dfn>Nombre de sorties</dfn></th> + <th scope="row">Nombre de sorties</th> <td><code>1</code></td> </tr> <tr> - <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> + <th scope="row">Mode de comptage des canaux</th> <td><code>"max"</code></td> </tr> <tr> - <th scope="row"><dfn>Nombre de canaux</dfn></th> + <th scope="row">Nombre de canaux</th> <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td> </tr> <tr> - <th scope="row"><dfn>Interprétation du canal</dfn></th> + <th scope="row">Interprétation du canal</th> <td><code>"speakers"</code></td> </tr> </tbody> @@ -39,27 +37,27 @@ 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`. +- [`BiquadFilterNode()`](/fr/docs/Web/API/BiquadFilterNode/BiquadFilterNode) + - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. ## Propriétés -_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. +_Hérite des propriétés de son parent, [`AudioNode`](/fr/docs/Web/API/AudioNode)._ -- {{domxref("BiquadFilterNode.frequency")}} - - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz. -- {{domxref("BiquadFilterNode.detune")}} - - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en [cents](https://fr.wikipedia.org/wiki/Cent_et_savart). -- {{domxref("BiquadFilterNode.Q")}} - - : Est un [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant un [facteur Q](https://en.wikipedia.org/wiki/Q_factor), ou facteur de qualité. -- {{domxref("BiquadFilterNode.gain")}} {{readonlyInline}} - - : Est un [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le [gain](https://en.wikipedia.org/wiki/Gain) utilisé dans l'algorithme de filtrage. -- {{domxref("BiquadFilterNode.type")}} +- [`BiquadFilterNode.frequency`](/fr/docs/Web/API/BiquadFilterNode/frequency) + - : Un objet [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [`a-rate`](/fr/docs/Web/API/AudioParam#a-rate) : c'est un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz. +- [`BiquadFilterNode.detune`](/fr/docs/Web/API/BiquadFilterNode/detune) + - : Un objet [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [`a-rate`](/fr/docs/Web/API/AudioParam#a-rate) : c'est un nombre flottant à double précision représentant le désaccordage de la fréquence exprimée en [cents](https://fr.wikipedia.org/wiki/Cent_et_savart). +- [`BiquadFilterNode.Q`](/fr/docs/Web/API/BiquadFilterNode/Q) + - : Un objet [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [`a-rate`](/fr/docs/Web/API/AudioParam#a-rate) : c'est un nombre flottant à double précision représentant un [facteur de qualité](https://en.wikipedia.org/wiki/Q_factor). +- [`BiquadFilterNode.gain`](/fr/docs/Web/API/BiquadFilterNode/gain) {{readonlyInline}} + - : Un objet [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [`a-rate`](/fr/docs/Web/API/AudioParam#a-rate) : c'est un nombre flottant à double précision représentant le [gain](https://fr.wikipedia.org/wiki/Gain_(électronique)) utilisé dans l'algorithme de filtrage. +- [`BiquadFilterNode.type`](/fr/docs/Web/API/BiquadFilterNode/type) - - : Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous) + - : Une chaîne de caractères définissant le type d'algorithme de filtrage que le nœud implémente. <table class="standard-table"> - <caption></caption> + <caption>La signification des paramètres diffère en fonction du type du filtre (sauf <code>detune</code> qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)</caption> <thead> <tr> <th scope="row"><code>type</code></th> @@ -73,127 +71,97 @@ _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 - 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les - fréquences supérieures sont atténuées. + Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées ; les fréquences supérieures sont atténuées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la - valeur est élevée, plus le point culminant est haut + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut. </td> <td>Non utilisé</td> </tr> <tr> <th scope="row"><code>highpass</code></th> <td> - Filtre standard passe-haut résonnant de second ordre avec atténuation de - 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont - atténuées, les fréquences supérieures sont inchangées. + Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la - valeur est élevée, plus le point culminant est haut + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut. </td> <td>Non utilisé</td> </tr> <tr> <th scope="row"><code>bandpass</code></th> - <td> - Filtre standard passe-bande de second ordre. Les fréquences en dehors de - la plage donnée de fréquences sont atténués, et les fréquences à - l'intérieur sont inchangées. + <td> Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées. </td> <td>Le centre de la gamme de fréquences.</td> <td> - Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus - la bande de fréquences est grande. + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande. </td> <td>Non utilisé</td> </tr> <tr> <th scope="row"><code>lowshelf</code></th> <td> - Filtre standard de dégradé de basses fréquences de second ordre. Les - fréquences inférieures à la fréquence obtiennent une impulsion ou une - atténuation; Les fréquences supérieurs sont inchangées. + Filtre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation ; les fréquences supérieures sont inchangées. </td> <td> - La limite supérieure des fréquences obtenant une impulsion ou une - atténuation + La limite supérieure des fréquences obtenant une impulsion ou une atténuation. </td> <td>Non utilisé</td> <td> - L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une - atténuation. + L'impulsion, en dB, à appliquer ; s'il est négatif, ce sera une atténuation. </td> </tr> <tr> <th scope="row"><code>highshelf</code></th> <td> - Filtre standard de dégradé de hautes fréquences de second ordre. Les - fréquences supérieures à la fréquence obtiennent une impulsion, ou une - atténuation; Les fréquences inférieurs restent inchangées + Filtre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation ; les fréquences inférieures restent inchangées. </td> <td> - La limite inférieure des fréquences obtenant une impulsion ou une - atténuation + La limite inférieure des fréquences obtenant une impulsion ou une atténuation. </td> <td>Non utilisé</td> <td> - L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une - atténuation. + L'impulsion, en dB, à appliquer ; s'il est négatif, ce sera une atténuation. </td> </tr> <tr> <th scope="row"><code>peaking</code></th> <td> - Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une - atténuation; les fréquences en dehors de celle-ci sont inchangées. + Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation ; les fréquences en dehors de celle-ci sont inchangées. </td> <td> - Le milieu de la gamme de fréquences obtiennent une impulsion, ou un - attenuation + Le milieu de la gamme de fréquences obtiennent une impulsion, ou une atténuation. </td> <td> - Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus - grande est la bande de fréquences. + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences. </td> <td> - L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une - atténuation. + L'impulsion, en dB, à appliquer ; s'il est négatif, ce sera une atténuation. </td> </tr> <tr> <th scope="row"><code>notch</code></th> <td> - Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un - filtre passe-bande: les fréquences en dehors de la gamme de fréquences - donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont - atténuées. + Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande : les fréquences en dehors de la gamme de fréquences donnée sont inchangées ; les fréquences à l'intérieur de celle-ci sont atténuées. </td> <td>Le centre de la gamme de fréquences.</td> <td> - Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus - grande est la bande de fréquences. + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences. </td> <td>Non utilisé</td> </tr> <tr> <th scope="row"><code>allpass</code></th> <td> - Filtre standard passe-tout du second ordre. Laisse toutes les fréquences - inchangées, mais modifie le rapport de phase entre les différentes - fréquences. + Filtre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences. </td> <td> - La fréquence du retard de groupe maximal, qui est la fréquence à - laquelle le centre de la transition de phase se produit. + La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit. </td> <td> - Contrôle finement la transition à la fréquence moyenne. Plus ce - paramètre est grand, plus la transition est fine et large. + Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large. </td> <td>Non utilisé</td> </tr> @@ -202,25 +170,23 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. ## Méthodes -_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. +_Hérite des propriétés de son parent, [`AudioNode`](/fr/docs/Web/API/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. +- [`BiquadFilterNode.getFrequencyResponse()`](/fr/docs/Web/API/BiquadFilterNode/getFrequencyResponse) + - : À partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences `frequencyHz` passé en paramètre. ## Exemples -{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}} +Voir la page [`AudioContext.createBiquadFilter`](/fr/docs/Web/API/BaseAudioContext/createBiquadFilter#exemple) pour un exemple de code illustrant comment utiliser un objet `AudioContext` afin de créer un nœud de filtre. -## Spécification +## Spécifications -| Spécification | Statut | Commentaire | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} -## Compatibilité navigateurs +## Compatibilité des navigateurs -{{Compat("api.BiquadFilterNode")}} +{{Compat}} ## Voir aussi -- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/customevent/index.md b/files/fr/web/api/customevent/index.md index e99ca8a535..69d2afb2d8 100644 --- a/files/fr/web/api/customevent/index.md +++ b/files/fr/web/api/customevent/index.md @@ -1,72 +1,45 @@ --- title: CustomEvent slug: Web/API/CustomEvent -tags: - - API - - DOM - - Interface - - Reference - - évènements translation_of: Web/API/CustomEvent +browser-compat: api.CustomEvent --- {{APIRef("DOM")}} -Les interfaces `CustomEvent` DOM sont des évènements initialisés par une application pour n'importe quel usage. +L'interface **`CustomEvent`** représente un évènement initialisé par une application dans un but quelconque. {{AvailableInWorkers}} +{{InheritanceDiagram}} + ## Constructeur -- {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} - - : Crée un `CustomEvent.` +- [`CustomEvent()`](/fr/docs/Web/API/CustomEvent/CustomEvent) + - : Crée un nouvel objet `CustomEvent`. ## Propriétés -- {{domxref("CustomEvent.detail")}} {{readonlyinline}} - - : Toute donnée transmise lors de l'initialisation de l'événement. - -Cette interface hérite des propriétés de son parent {{domxref("Event")}}: +_Cette interface hérite des propriétés de son parent, [`Event`](/fr/docs/Web/API/Event)._ -{{Page("/fr/docs/Web/API/Event", "Propriétés")}} +- [`CustomEvent.detail`](/fr/docs/Web/API/CustomEvent/detail) {{readonlyinline}} + - : Renvoie toutes les données passées lor de l'initialisation de l'évènement. ## Méthodes -- {{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}} - - : Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien. +_Cette interface hérite des propriétés de son parent, [`Event`](/fr/docs/Web/API/Event)._ -Cette interface hérite les méthodes de son parent {{domxref("Event")}}: - -{{Page("/fr/docs/Web/API/Event", "Méthodes")}} +- [`CustomEvent.initCustomEvent()`](/fr/docs/Web/API/CustomEvent/initCustomEvent) {{deprecated_inline}} + - : Initialise un objet `CustomEvent`. Si l'évènement a déjà été diffusé, cette méthode n'a aucun effet. ## Spécifications -| Spécification | Statut | Commentaire | -| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ | -| {{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}} | {{Spec2('DOM WHATWG')}} | Définition initial | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.CustomEvent")}} - -## Déclenchement à partir de code privilégié vers du code non-privilégié - -Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu. - -Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même [fenêtre](/fr/docs/Mozilla/Tech/XUL/window) que celle où vous déclencherez l'évenement. - -```js -// doc est une référence au contenu du document -function dispatchCustomEvent(doc) { - var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView); - var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail); - doc.dispatchEvent(myEvent); -} -``` - -Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité. +{{Compat}} ## Voir aussi -- [Interaction entre pages privilégiées et non-privilégiées](/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges) -- [Window.postMessage](/fr/docs/Web/API/Window/postMessage) -- [Création et déclenchement d'événements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) +- [`Window.postMessage()`](/fr/docs/Web/API/Window/postMessage) +- [Créer et déclencher des évènements](/fr/docs/Web/Events/Creating_and_triggering_events) diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md index 020ef1466b..0d107fa619 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.md +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -1,46 +1,45 @@ --- title: DataTransfer.clearData() slug: Web/API/DataTransfer/clearData -tags: - - API - - HTML DOM - - Method - - Reference - - drag and drop translation_of: Web/API/DataTransfer/clearData +browser-compat: api.DataTransfer.clearData --- {{APIRef("HTML Drag and Drop API")}} -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. +La méthode **`DataTransfer.clearData()`** retire les données du type indiqué de l'opération de glisser-déposer. S'il n'existe pas de données pour le type indiqué, cette méthode n'a 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. +Si cette méthode est appelée sans argument ou que le format est une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) vide, la suppression des données concernera tous les types. -## Syntaxe +Cette méthode _ne retire pas_ les fichiers de l'opération de glisser-déposer et il est donc possible d'avoir un élément restant avec le type `Files` dans la liste [`DataTransfer.types`](/fr/docs/Web/API/DataTransfer/types) si des fichiers font partie du glisser-déposer. - void dataTransfer.clearData([format]); +> **Note :** Cette méthode peut uniquement être utilisée dans le gestionnaire d'évènement pour [`dragstart`](/fr/docs/Web/API/Document/dragstart_event), car c'est le seul moment où le magasin de données pour l'opération de glisser-déposer est accessible en écriture. -### Paramètres +## Syntaxe -- format{{optional_inline}} - - : Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer. +```js +DataTransfer.clearData([format]); +``` -### Valeur de retour +### Paramètres -Void. +- `format` {{optional_inline}} + - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui indique le type de données à retirer. Si ce paramètre est une chaîne vide ou qu'il n'est pas fourni, les données pour l'ensemble des types seront retirées. ## Exemple -Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}. +Cet exemple illustre l'utilisation des méthodes +[`getData()`](/fr/docs/Web/API/DataTransfer/getData), +[`setData()`](/fr/docs/Web/API/DataTransfer/setData) et `clearData()` de l'objet [`DataTransfer`](/fr/docs/Web/API/DataTransfer). ### HTML ```html <span class="tweaked" id="source" draggable="true"> - Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer. + Sélectionnez cet élément, glissez-le dans la zone de dépôt puis relâcher la sélection pour déplacer l'élément. </span> -<span class="tweaked" id="target">Zone de Dépose</span> -<div>Status: <span id="status">Glissez pour démarrer</span></div> -<div>Data is: <span id="data">non initialisé</span></div> +<span class="tweaked" id="target">Zone de dépôt</span> +<div>État : <span id="status">Glisser pour démarrer</span></div> +<div>Données : <span id="data">non-initialisée</span></div> ``` ### CSS @@ -66,101 +65,113 @@ span.tweaked { ```js window.addEventListener('DOMContentLoaded', function () { - // Séléctionner les éléments HTML - var draggable = document.getElementById('source') - var dropable = document.getElementById('target') - var status = document.getElementById('status') - var data = document.getElementById('data') - var dropped = false - - // Enregistrer les évènements - draggable.addEventListener('dragstart', dragStartHandler) - draggable.addEventListener('dragend', dragEndHandler) - dropable.addEventListener('dragover', dragOverHandler) - dropable.addEventListener('dragleave', dragLeaveHandler) - dropable.addEventListener('drop', dropHandler) + // On sélectionne les éléments HTML + let draggable = document.getElementById('source'); + let droppable = document.getElementById('target'); + let status = document.getElementById('status'); + let data = document.getElementById('data'); + let dropped = false; + + // On enregistre les gestionnaires d'évènements + draggable.addEventListener('dragstart', dragStartHandler); + draggable.addEventListener('dragend', dragEndHandler); + droppable.addEventListener('dragover', dragOverHandler); + droppable.addEventListener('dragleave', dragLeaveHandler); + droppable.addEventListener('drop', dropHandler); function dragStartHandler (event) { - status.innerHTML = 'Glisse en cours' + status.textContent = 'Glisser-déposer en cours'; + + // On change la bordure de l'élément cible pour + // indiquer que le glisser-déposer a démarré + event.currentTarget.style.border = '1px dashed blue'; + + // On commence par nettoyer les presse-papiers + // existants. Cela porte sur tous les types vu qu'on + // ne passe pas de type en argument. - // Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré - event.currentTarget.style.border = '1px dashed blue' + event.dataTransfer.clearData(); - // Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée) - event.dataTransfer.setData('text/plain', event.target.id) + // On définit le format et les données pour l'opération + // on utilise l'identifiant de la cible d'évènement comme + // donnée + event.dataTransfer.setData('text/plain', event.target.id); - data.innerHTML = event.dataTransfer.getData('text/plain') + data.textContent = event.dataTransfer.getData('text/plain'); } function dragEndHandler (event) { if (!dropped) { - status.innerHTML = 'Glisse annulée' + status.textContent = 'Glisser-déposer annulé'; } - data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide' + data.textContent = event.dataTransfer.getData('text/plain') || 'vide'; - // Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours - event.currentTarget.style.border = '1px solid black' + // On change la bordure afin d'indiquer que le glisser- + // déposer n'est plus en cours + event.currentTarget.style.border = '1px solid black'; if (dropped) { - // Retirer tous les évènements enregistrés précédemment - draggable.removeEventListener('dragstart', dragStartHandler) - draggable.removeEventListener('dragend', dragEndHandler) - dropable.removeEventListener('dragover', dragOverHandler) - dropable.removeEventListener('dragleave', dragLeaveHandler) - dropable.removeEventListener('drop', dropHandler) + // On retire les gestionnaires d'évènements + draggable.removeEventListener('dragstart', dragStartHandler); + draggable.removeEventListener('dragend', dragEndHandler); + droppable.removeEventListener('dragover', dragOverHandler); + droppable.removeEventListener('dragleave', dragLeaveHandler); + droppable.removeEventListener('drop', dropHandler); } } function dragOverHandler (event) { - status.innerHTML = 'Dépose disponible' + status.textContent = 'Dépôt disponible'; - event.preventDefault() + event.preventDefault(); } function dragLeaveHandler (event) { - status.innerHTML = 'Glisse en cours (la dépose était disponible)' + status.textContent = 'Glisser-déposer en cours (le dépôt était disponible)'; - event.preventDefault() + event.preventDefault(); } function dropHandler (event) { - dropped = true + dropped = true; - status.innerHTML = 'Dépose effectuée' + status.textContent = 'Dépôt effectué'; - event.preventDefault() + event.preventDefault(); - // Récupérer la donnée liée au type « text/plain » - var _data = event.dataTransfer.getData('text/plain') - var element = document.getElementById(_data) + // On récupère les données liées à l'évènement + // et qui sont au format « text » + let _data = event.dataTransfer.getData('text/plain'); + let element = document.getElementById(_data); - // Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose - event.target.appendChild(element) + // On ajoute l'élément source glissé à l'élément qui + // est la cible de l'évènement + event.target.appendChild(element); - // Modifier les styles CSS et le texte affiché - element.style.cssText = 'border: 1px solid black;display: block; color: red' - element.innerHTML = "J'suis dans la Zone de Dépose !" - - // Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre) - event.dataTransfer.clearData() + // On modifie les styles CSS et le texte affiché + element.style.cssText = 'border: 1px solid black;display: block; color: red'; + element.textContent = 'Je suis dans la zone de dépôt !'; } }) ``` -{{EmbedLiveSample('Exemple', 300, 250)}} +### Résultat + +{{EmbedLiveSample('', 300, 280)}} ## Spécifications -| Spécification | Statut | Commentaire | -| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML5.1')}} | Définition initiale | +{{Specifications}} -## Compatibilité +## Compatibilité des navigateurs -{{Compat("api.DataTransfer.clearData")}} +{{Compat}} -## À voir également +## Voir aussi -{{page("/fr/docs/Web/API/DataTransfer", "See also")}} +- [L'API <i lang="en">Drag and drop</i> pour le glisser-déposer](/fr/docs/Web/API/HTML_Drag_and_Drop_API) +- [Les opérations de glisser-déposer](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations) +- [Types de données pour le glisser-déposer](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types) +- [Glisser-déposer plusieurs objets](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items) +- [Test `DataTransfer` — Coller ou glisser ?](https://codepen.io/tech_query/pen/MqGgap) diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md index aee893522d..7cd7872202 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.md +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -3,35 +3,32 @@ title: DeviceOrientationEvent.absolute slug: Web/API/DeviceOrientationEvent/absolute translation_of: Web/API/DeviceOrientationEvent/absolute original_slug: Web/API/DeviceOrientationEvent.absolute +browser-compat: api.DeviceOrientationEvent.absolute --- -{{ ApiRef() }} +{{APIRef("Device Orientation Events")}} -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. +Cette propriété indique si l'appareil fournit des données d'orientation dans un repère absolu (utilisant les coordonnées par rapport à la Terre) ou s'il utilise un repère arbitraire propre. Voir [le guide sur les données d'orientation et de déplacement](/fr/docs/Web/Events/Orientation_and_motion_data_explained) pour plus de détails. ## Syntaxe - var absolute = instanceOfDeviceOrientationEvent.absolute; +```js +let absolute = instanceOfDeviceOrientationEvent.absolute; +``` -`DeviceOrientationEvent.absolute` retourne un booléen : - -- `true` : si les données d'orientation dans `instanceOfDeviceOrientationEvent` est proposer dans un référentiel terrestre. -- `false` : si les données d'orientation utilisent un référentiel arbitraire. +_`absolute`_ vaut `true` si les données d'orientation fournies par l'évènement `instanceOfDeviceOrientationEvent` sont fournies comme la différence entre l'orientation de l'appareil et celle du repère terrestre ou `false` si les données d'orientation sont fournies relativement à un repère arbitraire fixé par l'appareil. ## Spécifications -| Spécification | Statuts | Commentaires | -| -------------------------------------------- | ---------------------------------------- | ---------------------- | -| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Initial specification. | +{{Specifications}} -## Compatibilité entre les navigateurs +## Compatibilité des navigateurs -{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }} +{{Compat}} ## Voir aussi -- {{ domxref("DeviceOrientationEvent") }} -- [Detecting device orientation](/en/Detecting_device_orientation) -- [Orientation and motion data explained](/en/DOM/Orientation_and_motion_data_explained) -- {{ domxref("window.ondeviceorientation") }} - -{{ event("deviceorientation") }} +- [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent) +- [Détecter l'orientation d'un appareil](/fr/docs/Web/Events/Detecting_device_orientation) +- [Guide sur les données d'orientation et de déplacement](/fr/docs/Web/Events/Orientation_and_motion_data_explained) +- L'évènement [`window.ondeviceorientation`](/fr/docs/Web/API/Window/ondeviceorientation) +- [`deviceorientation`](/fr/docs/Web/API/Window/deviceorientation_event) diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md index 24e4cf5f7d..f3d67b48de 100644 --- a/files/fr/web/api/document/index.md +++ b/files/fr/web/api/document/index.md @@ -1,410 +1,466 @@ --- -title: document +title: Document slug: Web/API/Document -tags: - - API - - DOM - - Document - - Interface - - Reference translation_of: Web/API/Document +browser-compat: api.Document --- -{{ApiRef}} +{{APIRef("DOM")}} -L'interface **`Document`** représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} _(corps)_ et {{HTMLElement ("table")}} _(tableau)_, parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document. +L'interface **`Document`** représente n'importe quelle page web chargée dans le navigateur et sert de point d'entrée pour accéder au contenu de la page qui est formé par [l'arbre du DOM](/fr/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core). -{{inheritanceDiagram}} +L'arbre du DOM inclut les éléments tels que [`<body>`](/fr/docs/Web/HTML/Element/body), [`<table>`](/fr/docs/Web/HTML/Element/table) et [tous les autres](/fr/docs/Web/HTML/Element) présents dans la page. Il fournit des fonctionnalités à l'ensemble du document et permet, par exemple, d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document. -L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type `text/html`, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}. +{{InheritanceDiagram}} + +L'interface `Document` décrit les propriétés et méthodes communes à toutes sortes de documents. Selon le type de document (par exemple [HTML](/fr/docs/Web/HTML), [XML](/fr/docs/Web/XML), SVG, etc.), une API plus grande pourra être disponible. Ainsi, les documents HTML, servis avec le type de contenu `text/html` implémenteront également l'interface [`HTMLDocument`](/fr/docs/Web/API/HTMLDocument) tandis que les documents XML et SVG implémenteront l'interface [`XMLDocument`](/fr/docs/Web/API/XMLDocument). ## Constructeur -- {{domxref("Document.Document","Document()")}}{{non-standard_inline}} - - : crée un nouvel objet `Document` . +- [`Document()`](/fr/docs/Web/API/Document/Document) + - : Crée un nouvel objet `Document`. ## Propriétés -_Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} ._ - -- {{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}} - - : fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée. - -<!----> - -- {{domxref("Document.async")}} {{Deprecated_inline}} - - : utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone. - -<!----> - -- {{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}} - - : renvoie le jeu de caractères utilisé par le document. - -<!----> - -- {{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}} - - : indique si le document est rendu en mode _Quirks_ ou _Strict_. - -<!----> - -- {{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}} - - : Renvoie le type de contenu de l'en-tête MIME du document courant. - -<!----> - -- {{domxref("Document.doctype")}} {{readonlyinline}} - - : Renvoie le DTD (Document Type Definition) du document courant. - -<!----> - -- {{domxref("Document.documentElement")}} {{readonlyinline}} - - : Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}. -- {{domxref("Document.documentURI")}} {{readonlyinline}} - - : retroune l'emplacement du document sous la forme d'une chaîne de caractères. -- {{domxref("Document.domConfig")}} {{Deprecated_inline}} - - : devrait retourner un objet {{domxref("DOMConfiguration")}} . -- {{domxref("Document.fullscreen")}} {{obsolete_inline}} - - : `true` _(vrai)_ quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}. -- {{domxref("Document.hidden")}} {{readonlyinline}} - - : ... -- {{domxref("Document.implementation")}} {{readonlyinline}} - - : Renvoie l'implémentation DOM associée au document courant. -- {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}} - - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place. -- {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}} - - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. -- {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} - - : 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}} - - : L'élément qui est actuellement affiché en mode plein écran pour ce document. -- {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} - - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. -- {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}} - - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document. -- {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}} - - : renvoie la page de style préférée spécifiée par l'auteur de la page. -- {{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}} - - : retourne une référence à l'{{domxref("Element")}} qui fait défiler le document. -- {{domxref("Document.selectedStyleSheetSet")}} - - : renvoie la feuille de style actuellement utilisée. -- {{domxref("Document.styleSheets")}} {{readonlyinline}} - - : Renvoie une liste de tous les objets {{domxref("stylesheet")}} _(feuilles de styles)_ du document courant. -- {{domxref("Document.timeline")}} {{readonlyinline}} - - : ... -- {{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}} - - : ... -- {{domxref("Document.visibilityState")}} {{readonlyinline}} - - : renvoie une `string` _(chaîne de caractères)_ indiquant l'état de visibilité du document. Les valeurs possibles sont `visible` , `hidden (masqué)` , prerender _(pré-rendu)_ et `unloaded` (_déchargées_). -- {{domxref("Document.xmlEncoding")}} {{Deprecated_inline}} - - : retourne le codage déterminé par une déclaration XML. -- {{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}} - - : renvoie `true` si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon `false` _(faux)_. -- {{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}} - - : retourne le numéro de la version spécifié dans la déclaration XML ou `"1.0"` si la déclaration est absente. - -L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} : - -{{page("/fr/docs/Web/API/ParentNode","Propriétés")}} - -### Extensions du document HTML - -L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. - -- {{domxref("Document.activeElement")}} {{readonlyinline}} - - : Renvoie l'élément courant qui a la focus. -- {{domxref("Document.alinkColor")}} {{Deprecated_inline}} - - : Renvoie ou définit la couleur des liens actifs du corps du document. -- {{domxref("Document.anchors")}} +_Cette interface hérite également des interfaces [`Node`](/fr/docs/Web/API/Node) et [`EventTarget`](/fr/docs/Web/API/EventTarget)._ + +- [`Document.activeElement`](/fr/docs/Web/API/Document/activeElement) {{ReadOnlyInline}} + - : Renvoie l'objet [`Element`](/fr/docs/Web/API/Element) correspondant à l'élément qui possède le focus. +- [`Document.body`](/fr/docs/Web/API/Document/body) + - : Renvoie le nœud [`<body>`](/fr/docs/Web/HTML/Element/body) ou [`<frameset>`](/fr/docs/Web/HTML/Element/frameset) du document courant. +- [`Document.characterSet`](/fr/docs/Web/API/Document/characterSet) {{ReadOnlyInline}} + - : Renvoie le jeu de caractères utilisé par le document. +- [`Document.childElementCount`](/fr/docs/Web/API/Document/childElementCount) {{readonlyInline}} + - : Renvoie le nombre d'éléments enfants pour le document courant. +- [`Document.children`](/fr/docs/Web/API/Document/children) {{readonlyInline}} + - : Renvoie les éléments enfants pour le document courant. +- [`Document.compatMode`](/fr/docs/Web/API/Document/compatMode) {{Experimental_Inline}} {{ReadOnlyInline}} + - : Indique si le document est rendu à l'écran selon le mode _quirks_ ou _strict_. +- [`Document.contentType`](/fr/docs/Web/API/Document/contentType) {{Experimental_Inline}} {{ReadOnlyInline}} + - : Renvoie le type MIME du document courant. +- [`Document.currentScript`](/fr/docs/Web/API/Document/currentScript) {{ReadOnlyInline}} + - : Renvoie l'élément [`<script>`](/fr/docs/Web/HTML/Element/script) dont le script est actuellement en cours de traitement et [qui n'est pas un module JavaScript](https://github.com/whatwg/html/issues/997). +- [`Document.doctype`](/fr/docs/Web/API/Document/doctype) {{ReadOnlyInline}} + - : Renvoie la définition du type de document (<i lang="en">Document Type Definition</i> ou DTD) du document courant. +- [`Document.documentElement`](/fr/docs/Web/API/Document/documentElement) {{ReadOnlyInline}} + - : Renvoie l'objet [`Element`](/fr/docs/Web/API/Element) correspondant à l'élément qui est un enfant direct du document. Pour les documents HTML, il s'agit normalement d'un objet [`HTMLHtmlElement`](/fr/docs/Web/API/HTMLHtmlElement) qui représente l'élément [`<html>`](/fr/docs/Web/HTML/Element/html) du document. +- [`Document.documentURI`](/fr/docs/Web/API/Document/documentURI) {{ReadOnlyInline}} + - : Renvoie l'emplacement du document sous la forme d'une chaîne de caractères. +- [`Document.embeds`](/fr/docs/Web/API/Document/embeds) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) des éléments embarqués (via [`<embed>`](/fr/docs/Web/HTML/Element/embed)) dans le document. +- [`Document.firstElementChild`](/fr/docs/Web/API/Document/firstElementChild) {{readonlyInline}} + - : Renvoie le premier élément enfant du document courant. +- [`Document.fonts`](/fr/docs/Web/API/Document/fonts) + - : Renvoie l'interface [`FontFaceSet`](/fr/docs/Web/API/FontFaceSet) pour le document courant. +- [`Document.forms`](/fr/docs/Web/API/Document/forms) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) des éléments [`<form>`](/fr/docs/Web/HTML/Element/Form) du document. +- [`Document.fullscreenElement`](/fr/docs/Web/API/Document/fullscreenElement) {{ReadOnlyInline}} + - : Renvoie l'élément actuellement en mode plein écran pour ce document. +- [`Document.head`](/fr/docs/Web/API/Document/head) {{ReadOnlyInline}} + - : Renvoie l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) pour le document courant. +- [`Document.hidden`](/fr/docs/Web/API/Document/hidden) {{ReadOnlyInline}} + - : Renvoie une valeur booléenne qui indique si la page est considérée masquée ou non. +- [`Document.images`](/fr/docs/Web/API/Document/images) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) des images du document. +- [`Document.implementation`](/fr/docs/Web/API/Document/implementation) {{ReadOnlyInline}} + - : Renvoie l'implémentation du DOM associée au document courant. +- [`Document.lastElementChild`](/fr/docs/Web/API/Document/lastElementChild) {{readonlyInline}} + - : Renvoie le dernier élément enfant du document courant. +- [`Document.links`](/fr/docs/Web/API/Document/links) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) contenant l'ensemble des hyperliens du document. +- [`Document.mozSyntheticDocument`](/fr/docs/Web/API/Document/mozSyntheticDocument) {{Non-standard_Inline}} + - : Renvoie `true` uniquement si le document est synthétique (par exemple une page indépendante, un fichier audio ou vidéo). +- [`Document.pictureInPictureElement`](/fr/docs/Web/API/Document/pictureInPictureElement) {{ReadOnlyInline}} + - : Renvoie l'objet [`Element`](/fr/docs/Web/API/Element) pour l'élément affiché en mode d'incrustation vidéo (<i lang="en">picture-in-picture</i>) pour ce document. +- [`Document.pictureInPictureEnabled`](/fr/docs/Web/API/Document/pictureInPictureEnabled) {{ReadOnlyInline}} + - : Renvoie `true` si la fonctionnalité d'incrustation vidéo est activée. +- [`Document.plugins`](/fr/docs/Web/API/Document/plugins) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) contenant les plugins disponibles. +- [`Document.pointerLockElement`](/fr/docs/Web/API/Document/pointerLockElement) {{ReadOnlyInline}} + - : Renvoie l'élément définit comme cible pour les évènements de souris pendant que le pointeur est verrouillé. Cette propriété vaut `null` si le verrouillage est en cours, si le pointeur est déverrouillé ou si la cible est située dans un autre document. +- [`Document.featurePolicy`](/fr/docs/Web/API/Document/featurePolicy) {{Experimental_Inline}} {{ReadOnlyInline}} + - : Renvoie l'interface [`FeaturePolicy`](/fr/docs/Web/API/FeaturePolicy) qui fournit une API pour l'introspection des règles de fonctionnalité (<i lang="en">feature policies</i>) appliquées au document. +- [`Document.scripts`](/fr/docs/Web/API/Document/scripts) {{ReadOnlyInline}} + - : Renvoie un objet [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) contenant les éléments [`<script>`](/fr/docs/Web/HTML/Element/script) du document. +- [`Document.scrollingElement`](/fr/docs/Web/API/Document/scrollingElement) {{ReadOnlyInline}} + - : Renvoie une référence à l'objet [`Element`](/fr/docs/Web/API/Element) correspondant à l'élément qui fait défiler le document. +- [`Document.styleSheets`](/fr/docs/Web/API/Document/styleSheets) {{ReadOnlyInline}} + - : Renvoie un objet [`StyleSheetList`](/fr/docs/Web/API/StyleSheetList) contenant les objets [`CSSStyleSheet`](/fr/docs/Web/API/CSSStyleSheet) pour les feuilles de style CSS liées explicitement ou embarquées dans le document. +- [`Document.timeline`](/fr/docs/Web/API/Document/timeline) {{Experimental_Inline}} {{ReadOnlyInline}} + - : Renvoie la chronologie, sous la forme d'une instance [`DocumentTimeline`](/fr/docs/Web/API/DocumentTimeline), qui est automatiquement créée au chargement de la page. +- [`Document.visibilityState`](/fr/docs/Web/API/Document/visibilityState) {{ReadOnlyInline}} + - : Renvoie une chaîne de caractères qui indique l'état de visibilité du document. Les valeurs possibles sont `visible`, `hidden`, `prerender`, et `unloaded`. + +### Extensions pour `HTMLDocument` + +_L'interface `Document` pour les documents HTML hérite de l'interface [`HTMLDocument`](/fr/docs/Web/API/HTMLDocument). Depuis HTML5, ce n'est plus un héritage mais une extension de l'interface pour ces documents._ + +- [`Document.cookie`](/fr/docs/Web/API/Document/cookie) + - : Renvoie une liste, dont les éléments sont séparés par des points-virgules, des cookies du document ou permet de définir un cookie. +- [`Document.defaultView`](/fr/docs/Web/API/Document/defaultView) {{ReadOnlyInline}} + - : Renvoie une référence à l'objet de la fenêtre. +- [`Document.designMode`](/fr/docs/Web/API/Document/designMode) + - : Permet d'accéder ou de définir la possibilité d'éditer l'ensemble du document. +- [`Document.dir`](/fr/docs/Web/API/Document/dir) + - : Permet d'accéder ou de définir la directionnalité (écriture de droite à gauche ou de gauche à droite) du document. +- [`Document.domain`](/fr/docs/Web/API/Document/domain) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir le domaine du document courant. +- [`Document.lastModified`](/fr/docs/Web/API/Document/lastModified) {{ReadOnlyInline}} + - : Renvoie la date à laquelle le document a été modifié pour la dernière fois. +- [`Document.location`](/fr/docs/Web/API/Document/location) {{ReadOnlyInline}} + - : Renvoie l'URI du document courant. +- [`Document.readyState`](/fr/docs/Web/API/Document/readyState) {{ReadOnlyInline}} + - : Renvoie l'état de chargement du document. +- [`Document.referrer`](/fr/docs/Web/API/Document/referrer) {{ReadOnlyInline}} + - : Renvoie l'URI de la page qui a lié vers cette page. +- [`Document.title`](/fr/docs/Web/API/Document/title) + - : Permet d'accéder ou de définir le titre du document courant. +- [`Document.URL`](/fr/docs/Web/API/Document/URL) {{ReadOnlyInline}} + - : Renvoie l'emplacement du document sous la forme d'une chaîne de caractères. + +### Gestionnaires d'évènement + +_L'interface `Document` est étendue avec des gestionnaires d'évènement supplémentaires définis dans l'interface [`GlobalEventHandlers`](/fr/docs/Web/API/GlobalEventHandlers#gestionnaires_dévènement)._ + +- [`GlobalEventHandlers.onselectionchange`](/fr/docs/Web/API/GlobalEventHandlers/onselectionchange) {{Experimental_Inline}} + - : Un [gestionnaire d'évènement](/fr/docs/Web/Events/Event_handlers) qui représente le code à appeler lorsque l'évènement [`selectionchange`](/fr/docs/Web/API/Document/selectionchange_event) est déclenché. + +### Propriétés dépréciées + +- [`Document.alinkColor`](/fr/docs/Web/API/Document/alinkColor) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir la couleur des liens actifs pour le corps du document. +- [`Document.all`](/fr/docs/Web/API/Document/all) {{Deprecated_Inline}} {{Non-standard_Inline}} + - : Fournit un accès à tous les éléments du document. Elle renvoie un objet [`HTMLAllCollection`](/fr/docs/Web/API/HTMLAllCollection) dont la racine est le nœud du document. Il s'agit d'une propriété historique non-standard qui ne devrait pas être utilisée. +- [`Document.anchors`](/fr/docs/Web/API/Document/anchors) {{Deprecated_Inline}} {{ReadOnlyInline}} - : Renvoie une liste de toutes les ancres du document. -- {{domxref("Document.applets")}} {{Deprecated_inline}} - - : Renvoie une liste ordonnée des "applets" du document. -- {{domxref("Document.bgColor")}} {{Deprecated_inline}} - - : **bgColor** renvoie ou définit la couleur d'arrière-plan du document courant. - -<!----> - -- {{domxref("Document.body")}} - - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. -- {{domxref("Document.cookie")}} - - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie. - -<!----> - -- {{domxref("Document.defaultView")}} {{readonlyinline}} - - : Renvoie une référence à l'objet window. -- {{domxref("Document.designMode")}} - - : renvoie ou définit les capacités d'édition du document entier. -- {{domxref("Document.dir")}} {{readonlyinline}} - - : Assigne / renvoie le sens du texte (rtl/ltr) _(de gauche à droite / de droite à gauche)_ du document. -- {{domxref("Document.domain")}} - - : renvoie ou affecte le domaine de l'élément courant. -- {{domxref("Document.embeds")}} {{readonlyinline}} - - : renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant. - -<!----> - -- {{domxref("Document.fgColor")}} {{Deprecated_inline}} - - : renvoie ou définit la couleur du texte du document courant. -- {{domxref("Document.forms")}} {{readonlyinline}} - - : **forms** renvoie une liste des éléments {{HTMLElement("form")}} du document courant -- {{domxref("Document.head")}} {{readonlyinline}} - - : Renvoie l'élément {{HTMLElement("head")}} du document. -- {{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}} - - : renvoie ou définit la hauteur du document courant. -- {{domxref("Document.images")}} {{readonlyinline}} - - : renvoie une liste des images du document courant. -- {{domxref("Document.lastModified")}} {{readonlyinline}} - - : Renvoie la date de dernière modification du document. -- {{domxref("Document.linkColor")}} {{Deprecated_inline}} - - : Renvoie ou définit la couleur des liens du document. -- {{domxref("Document.links")}} {{readonlyinline}} - - : Renvoie un tableau de tous les liens du document. -- {{domxref("Document.location")}} {{readonlyinline}} - - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant. -- {{domxref("Document.plugins")}} {{readonlyinline}} - - : Renvoie une liste des plugins disponibles. -- {{domxref("Document.readyState")}} {{readonlyinline}} - - : retourne l'état du chargement du document. -- {{domxref("Document.referrer")}} {{readonlyinline}} - - : Renvoie l'URI de la page qui a amené à cette page. -- {{domxref("Document.scripts")}} {{readonlyinline}} - - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. -- {{domxref("Document.title")}} - - : Renvoie le titre du document courant. -- {{domxref("Document.URL")}} {{readonlyInline}} - - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant. - -<!----> - -- {{domxref("Document.vlinkColor")}} {{Deprecated_inline}} - - : Renvoie ou définit la couleur des liens visités du document. -- {{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}} +- [`Document.applets`](/fr/docs/Web/API/Document/applets) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Renvoie une liste ordonnée des applets contenus dans le document. +- [`Document.bgColor`](/fr/docs/Web/API/Document/bgColor) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir la couleur d'arrière-plan du document courant. +- [`Document.charset`](/fr/docs/Web/API/Document/characterSet) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Un synonyme de [`Document.characterSet`](/fr/docs/Web/API/Document/characterSet), cette dernière devrait être utilisée à la place. +- [`Document.fgColor`](/fr/docs/Web/API/Document/fgColor) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir la couleur de premier plan ou la couleur du texte du document courant. +- [`Document.fullscreen`](/fr/docs/Web/API/Document/fullscreen) {{deprecated_inline}} + - : `true` lorsque le document est en [mode plein écran](/fr/docs/Web/API/Fullscreen_API). +- [`Document.height`](/fr/docs/Web/API/Document/height) {{Non-standard_Inline}} {{deprecated_inline}} + - : Permet d'accéder ou de définir la hauteur du document courant. +- [`Document.inputEncoding`](/fr/docs/Web/API/Document/characterSet) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Un synonyme de [`Document.characterSet`](/fr/docs/Web/API/Document/characterSet), cette dernière devrait être utilisée à la place. +- [`Document.lastStyleSheetSet`](/fr/docs/Web/API/Document/lastStyleSheetSet) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Renvoie le nom de la feuille de styles qui a été activée en dernière. Vaut `null` jusqu'à ce que la feuille de style soit changée avec la définition de la valeur [`selectedStyleSheetSet`](/fr/docs/Web/API/Document/selectedStyleSheetSet). +- [`Document.linkColor`](/fr/docs/Web/API/Document/linkColor) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir la couleur des hyperliens contenus dans le document. +- [`Document.preferredStyleSheetSet`](/fr/docs/Web/API/Document/preferredStyleSheetSet) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Renvoie l'ensemble de feuilles de styles préféré comme indiqué par l'autrice ou l'auteur de la page. +- [`Document.rootElement`](/fr/docs/Web/API/Document/rootElement) {{Deprecated_Inline}} + - : Agit comme [`Document.documentElement`](/fr/docs/Web/API/Document/documentElement), mais uniquement pour les éléments racines [`<svg>`](/fr/docs/Web/SVG/Element/svg). C'est cette dernière qu'il faudra utiliser à la place. +- [`Document.selectedStyleSheetSet`](/fr/docs/Web/API/Document/selectedStyleSheetSet) {{deprecated_inline}} + - : Renvoie l'ensemble de feuilles de styles actuellement utilisé. +- [`Document.styleSheetSets`](/fr/docs/Web/API/Document/styleSheetSets) {{Deprecated_Inline}} {{ReadOnlyInline}} + - : Renvoie une liste des ensembles de feuilles de styles disponibles sur le document. +- [`Document.vlinkColor`](/fr/docs/Web/API/Document/vlinkColor) {{Deprecated_Inline}} + - : Permet d'accéder ou de définir la couleur des hyperliens visités. +- [`Document.width`](/fr/docs/Web/API/Document/width) {{Non-standard_Inline}} {{deprecated_inline}} - : Renvoie la largeur du document courant. - -### Gestionnaire d'évènements - -- {{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}} -- {{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}} - - : retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} . -- {{domxref("Document.oncopy")}} {{non-standard_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("copy")}} . -- {{domxref("Document.oncut")}} {{non-standard_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} . -- {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. -- {{domxref("Document.onfullscreenerror")}} - - {{domxref("Document.onfullscreenchange")}} - - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. - -- {{domxref("Document.onpaste")}} {{non-standard_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} . -- {{domxref("Document.onpointerlockchange")}} {{experimental_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} . -- {{domxref("Document.onpointerlockerror")}} {{experimental_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} . -- {{domxref("Document.onreadystatechange")}} - - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} . -- {{domxref("Document.onselectionchange")}} {{experimental_inline}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. -- {{domxref("Document.onvisibilitychange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. -- {{domxref("Document.onwheel")}} {{non-standard_inline}} - - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} . - -L'interface `Document` est étendue avec l'interface {{domxref("GlobalEventHandlers")}} : - -{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}} +- [`Document.xmlEncoding`](/fr/docs/Web/API/Document/xmlEncoding) {{Deprecated_Inline}} + - : Renvoie l'encodage tel que déterminé par la déclaration XML. +- [`Document.xmlStandalone`](/fr/docs/Web/API/Document/xmlStandalone) {{deprecated_inline}} + - : Renvoie `true` si la déclaration XML indique que le document est autonome (par exemple qu'une partie externe du DTD affecte le contenu du document), `false` sinon. +- [`Document.xmlVersion`](/fr/docs/Web/API/Document/xmlVersion) {{deprecated_inline}} + - : Renvoie le numéro de version tel qu'indiqué dans la déclaration XML, ou `1.0` si la déclaration est absente. ## Méthodes -_Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}._ - -- {{domxref("Document.adoptNode()")}} - - : adopte le noeud d'un document externe. -- {{domxref("Document.captureEvents()")}} {{Deprecated_inline}} - - : voir {{domxref("Window.captureEvents")}}. -- {{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}} - - : obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées. -- {{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}} - - : Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées. -- {{domxref("Document.createAttribute()")}} - - : Crée un nouvel objet {{domxref("Attr")}} et le renvoie. -- {{domxref("Document.createAttributeNS()")}} - - : Crée un nouveau noeud dans l'espace nom donné et le renvoie. -- {{domxref("Document.createCDATASection()")}} +_Cette interface hérite également des méthodes des interfaces [`Node`](/fr/docs/Web/API/Node) et [`EventTarget`](/fr/docs/Web/API/EventTarget) interfaces._ + +- [`Document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode) + - : Adopte un nœud d'un document externe. +- [`Document.append()`](/fr/docs/Web/API/Document/append) + - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou d'objets [`DOMString`](/fr/docs/Web/API/DOMString) après le dernier enfant du document. +- [`Document.captureEvents()`](/fr/docs/Web/API/Document/captureEvents) {{Deprecated_Inline}} + - : Voir [`Window.captureEvents`](/fr/docs/Web/API/Window/captureEvents). +- [`Document.caretPositionFromPoint()`](/fr/docs/Web/API/Document/caretPositionFromPoint) + - : Renvoie un objet [`CaretPosition`](/fr/docs/Web/API/CaretPosition) qui contient le nœud DOM contenant le curseur et le décalage du curseur au sein de ce nœud. +- [`Document.caretRangeFromPoint()`](/fr/docs/Web/API/Document/caretRangeFromPoint) {{Non-standard_Inline}} + - : Obtient un objet [`Range`](/fr/docs/Web/API/Range) pour le fragment de document situé aux coordonnées indiquées. +- [`Document.createAttribute()`](/fr/docs/Web/API/Document/createAttribute) + - : Crée un nouvel objet [`Attr`](/fr/docs/Web/API/Attr) et le renvoie. +- [`Document.createAttributeNS()`](/fr/docs/Web/API/Document/createAttributeNS) + - : Crée un nouveau nœud d'attribut dans un espace de noms donné et le renvoie. +- [`Document.createCDATASection()`](/fr/docs/Web/API/Document/createCDATASection) - : Crée un nouveau nœud CDATA et le renvoie. -- {{domxref("Document.createComment()")}} +- [`Document.createComment()`](/fr/docs/Web/API/Document/createComment) - : Crée un nouveau nœud de commentaire et le renvoie. -- {{domxref("Document.createDocumentFragment()")}} +- [`Document.createDocumentFragment()`](/fr/docs/Web/API/Document/createDocumentFragment) - : Crée un nouveau fragment de document. -- {{domxref("Document.createElement()")}} - - : Crée un nouvel élément avec l'étiquette spécifiée. -- {{domxref("Document.createElementNS()")}} - - : Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés. -- {{domxref("Document.createEntityReference()")}} {{obsolete_inline}} - - : Crée un nouvel objet de référence à une entité et le renvoie. -- {{domxref("Document.createEvent()")}} - - : Crée un nouvel évènement. -- {{domxref("Document.createNodeIterator()")}} - - : crée un objet {{domxref("NodeIterator")}} . -- {{domxref("Document.createProcessingInstruction()")}} - - : crée un nouvel objet {{domxref("ProcessingInstruction")}} . -- {{domxref("Document.createRange()")}} - - : Crée un objet {{domxref("Range")}} . -- {{domxref("Document.createTextNode()")}} - - : Crée un nœud de texte. -- {{domxref("Document.createTouch()")}} {{Deprecated_inline}} - - : crée un objet {{domxref("Touch")}} -- {{domxref("Document.createTouchList()")}} - - : crée un objet {{domxref("TouchList")}} -- {{domxref("Document.createTreeWalker()")}} - - : Crée un objet {{domxref("TreeWalker")}} . -- {{domxref("Document.elementFromPoint()")}}{{experimental_inline}} - - : Renvoie l'élément visible aux coordonnées spécifiées. -- {{domxref("Document.elementsFromPoint()")}}{{experimental_inline}} - - : Renvoie un tableau de tous les éléments aux coordonnées spécifiées. -- {{domxref("Document.enableStyleSheetsForSet()")}} - - : active les feuilles de style pour l'ensemble de feuilles de style spécifié. -- {{domxref("Document.exitPointerLock()")}} {{experimental_inline}} - - : Supprime le verrou du pointeur. -- {{domxref("Document.getAnimations()")}} {{experimental_inline}} - - : retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce `document`. - -<!----> - -- {{domxref("Document.getElementsByClassName()")}} - - : Renvoie une liste des éléments ayant le nom de classe donné. - -<!----> - -- {{domxref("Document.getElementsByTagName()")}} - - : Renvoie une liste des éléments ayant le nom de balise donné. - -<!----> - -- {{domxref("Document.getElementsByTagNameNS()")}} - - : Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés. - -<!----> - -- {{domxref("Document.importNode()")}} - - : Renvoie une copie (un clone) d'un élément provenant d'un document externe. -- {{domxref("Document.normalizeDocument()")}} {{obsolete_inline}} - - : remplace les entités, normalise les noeuds de texte, etc. -- {{domxref("Document.registerElement()")}} {{experimental_inline}} - - : Enregistre un composant Web. -- {{domxref("Document.releaseCapture()")}} {{non-standard_inline}} - - : Libère la capture de la souris en cours s'il s'agit d'un élément de ce document. -- {{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}} - - : voir {{domxref("Window.releaseEvents()")}}. -- {{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}} - - : Voir {{domxref("Window.routeEvent()")}}. -- {{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} - - : Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié. - -L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} : - -- {{domxref("document.getElementById","document.getElementById(String id)")}} - - : retourne une référence d'objet à l'élément identifié. -- {{domxref("document.querySelector","document.querySelector(String selector)")}} - - : Renvoie le premier noeud `Element` dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés. -- {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} - - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés. - -L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : - -- {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}} - - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). -- {{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}} - - : crée un objet {{domxref("XPathNSResolver")}} . -- {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}} - - : évalue l'expression XPath . - -### Extensions pour les documents HTML - -- {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}} - - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien. -- {{domxref("document.close()")}} - - : ferme un flux de document pour l'écriture. -- {{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}} - - : Sur un document modifiable, exécute une commande de formatage. -- {{domxref("document.getElementsByName","document.getElementsByName(String name)")}} - - : retourne une liste d'éléments ayant le nom donné. -- {{domxref("document.getSelection()")}} - - : retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document. -- {{domxref("document.hasFocus()")}} - - : retourne `true` (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié. -- {{domxref("document.open()")}} - - : Ouvre un flux pour l'écriture dans le document. -- {{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}} - - : Renvoie `true` si la commande de formatage peut être exécutée sur la plage courante. -- {{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}} - - : Renvoie `true` si la commande de formatage est dans un état indéterminé sur la plage courante. -- {{domxref("document.queryCommandState","document.queryCommandState(String command)")}} - - : Renvoie `true` si la commande de formatage a été exécutée sur la plage courante. -- {{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}} - - : retourne `true` _(vrai)_ si la commande de formatage est supportée sur la plage courante. -- {{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}} - - : renvoie la valeur courante de la plage en cours pour une commande de formatage. -- {{domxref("document.write","document.write(String text)")}} - - : Écrit du texte dans le document. -- {{domxref("document.writeln","document.writeln(String text)")}} - - : Écrit une ligne de texte dans le document. +- [`Document.createElement()`](/fr/docs/Web/API/Document/createElement) + - : Crée un nouvel élément avec le nom de balise indiqué. +- [`Document.createElementNS()`](/fr/docs/Web/API/Document/createElementNS) + - : Crée un nouvel élément avec le nom de balise indiqué et l'espace de noms passé via un URI. +- [`Document.createEntityReference()`](/fr/docs/Web/API/Document/createEntityReference) {{deprecated_inline}} + - : Crée un nouvel objet de référence d'entité et le renvoie. +- [`Document.createEvent()`](/fr/docs/Web/API/Document/createEvent) + - : Crée un objet d'évènement. +- [`Document.createNodeIterator()`](/fr/docs/Web/API/Document/createNodeIterator) + - : Crée un objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). +- [`Document.createProcessingInstruction()`](/fr/docs/Web/API/Document/createProcessingInstruction) + - : Crée un nouvel objet [`ProcessingInstruction`](/fr/docs/Web/API/ProcessingInstruction). +- [`Document.createRange()`](/fr/docs/Web/API/Document/createRange) + - : Crée un objet [`Range`](/fr/docs/Web/API/Range). +- [`Document.createTextNode()`](/fr/docs/Web/API/Document/createTextNode) + - : Crée un nœud texte. +- [`Document.createTouch()`](/fr/docs/Web/API/Document/createTouch) {{Deprecated_Inline}} + - : Crée un objet [`Touch`](/fr/docs/Web/API/Touch). +- [`Document.createTouchList()`](/fr/docs/Web/API/Document/createTouchList) {{Deprecated_Inline}} + - : Crée un objet [`TouchList`](/fr/docs/Web/API/TouchList). +- [`Document.createTreeWalker()`](/fr/docs/Web/API/Document/createTreeWalker) + - : Crée un objet [`TreeWalker`](/fr/docs/Web/API/TreeWalker). +- [`Document.elementFromPoint()`](/fr/docs/Web/API/Document/elementFromPoint) + - : Renvoie l'élément situé le plus en haut pour les coordonnées indiquées. +- [`Document.elementsFromPoint()`](/fr/docs/Web/API/Document/elementsFromPoint) + - : Renvoie un tableau de tous les éléments situés aux coordonnées indiquées. +- [`Document.enableStyleSheetsForSet()`](/fr/docs/Web/API/Document/enableStyleSheetsForSet) {{deprecated_inline}} + - : Active les feuilles de styles pour l'ensemble de feuilles de styles indiqué. +- [`Document.exitPictureInPicture()`](/fr/docs/Web/API/Document/exitPictureInPicture) + - : Retire la vidéo de la fenêtre d'incrustation vidéo pour la replacer dans son conteneur original. +- [`Document.exitPointerLock()`](/fr/docs/Web/API/Document/exitPointerLock) {{Experimental_Inline}} + - : Relâche le verrou du pointeur. +- [`Document.getAnimations()`](/fr/docs/Web/API/Document/getAnimations) + - : Renvoie un tableau contenant tous les objets [`Animation`](/fr/docs/Web/API/Animation) actuellement actifs et dont les éléments cibles sont des descendants du document courant. +- [`Document.getBoxQuads()`](/fr/docs/Web/API/Document/getBoxQuads) {{experimental_inline}} + - : Renvoie une liste d'objets [`DOMQuad`](/fr/docs/Web/API/DOMQuad) qui représente les fragments CSS du nœud. +- [`Document.getElementById()`](/fr/docs/Web/API/Document/getElementById) + - : Renvoie une référence objet vers l'élément identifié. +- [`Document.getElementsByClassName()`](/fr/docs/Web/API/Document/getElementsByClassName) + - : Renvoie une liste d'éléments avec le nom de classe indiqué. +- [`Document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName) + - : Renvoie une liste d'éléments avec la balise indiquée. +- [`Document.getElementsByTagNameNS()`](/fr/docs/Web/API/Document/getElementsByTagNameNS) + - : Renvoie une liste d'éléments avec le nom de balise et pour l'espace de noms indiqués. +- [`Document.getSelection()`](/fr/docs/Web/API/Document/getSelection) + - : Renvoie un objet [`Selection`](/fr/docs/Web/API/Selection) qui représente la portion de texte sélectionnée par l'utilisatrice ou l'utilisateur, ou la position du curseur. +- [`Document.hasStorageAccess()`](/fr/docs/Web/API/Document/hasStorageAccess) {{Experimental_Inline}} + - : Renvoie un objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolu avec une valeur booléenne selon que le document a accès à du stockage de premier rang. +- [`Document.importNode()`](/fr/docs/Web/API/Document/importNode) + - : Renvoie un clone d'un nœud d'un document externe. +- [`Document.normalizeDocument()`](/fr/docs/Web/API/Document/normalizeDocument) {{deprecated_inline}} + - : Remplace les entités et normalise les nœuds textuels, etc. +- [`Document.prepend()`](/fr/docs/Web/API/Document/prepend) + - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) avant le premier enfant du document. +- [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector) + - : Renvoie le premier nœud `Element` au sein du document, selon l'ordre du document, qui correspond aux sélecteurs indiqués. +- [`Document.querySelectorAll()`](/fr/docs/Web/API/Document/querySelectorAll) + - : Renvoie une liste de tous les nœuds `Element` du document qui correspondent aux sélecteurs indiqués. +- [`Document.releaseCapture()`](/fr/docs/Web/API/Document/releaseCapture) {{Non-standard_Inline}} + - : Relâche la capture de la souris si celle-ci est sur un élément du document courant. +- [`Document.releaseEvents()`](/fr/docs/Web/API/Document/releaseEvents) {{Non-standard_Inline}} {{Deprecated_Inline}} + - : Voir [`Window.releaseEvents()`](/fr/docs/Web/API/Window/releaseEvents). +- [`Document.replaceChildren()`](/fr/docs/Web/API/Document/replaceChildren) + - : Remplace l'enfant existant du document avec un ensemble de nouveaux enfants indiqué. +- [`Document.requestStorageAccess()`](/fr/docs/Web/API/Document/requestStorageAccess) + - : Renvoie un objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolu si l'accès au stockage de premier rang a été accordé et qui est rompu si l'accès a été refusé. +- [`Document.mozSetImageElement()`](/fr/docs/Web/API/Document/mozSetImageElement) {{Non-standard_Inline}} + - : Permet de changer l'élément utilisé comme image d'arrière-plan par un élément dont on passe l'identifiant en argument. + +L'interface `Document` est étendue avec l'interface [`XPathEvaluator`](/fr/docs/Web/API/XPathEvaluator) : + +- [`Document.createExpression()`](/fr/docs/Web/API/Document/createExpression) + - : Compile une expression [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). +- [`Document.createNSResolver()`](/fr/docs/Web/API/Document/createNSResolver) + - : Crée un objet [`XPathNSResolver`](/fr/docs/Web/API/XPathNSResolver). +- [`Document.evaluate()`](/fr/docs/Web/API/Document/evaluate) + - : Évalue une expression XPath. + +### Extension pour les documents HTML + +Pour les documents HTML, l'interface `Document` hérite de [`HTMLDocument`](/fr/docs/Web/API/HTMLDocument). Depuis HTML5, ce n'est plus un héritage mais une extension de l'interface pour ces documents. + +- [`Document.clear()`](/fr/docs/Web/API/Document/clear) {{Non-standard_Inline}} {{Deprecated_Inline}} + - : Pour la majorité des navigateurs récents, y compris pour les versions récentes de Firefox et d'Internet Explorer, cette méthode ne fait rien. +- [`Document.close()`](/fr/docs/Web/API/Document/close) + - : Ferme le flux d'écriture sur un document. +- [`Document.execCommand()`](/fr/docs/Web/API/Document/execCommand) {{deprecated_inline}} + - : Pour un document éditable, exécute une commande de formatage. +- [`Document.getElementsByName()`](/fr/docs/Web/API/Document/getElementsByName) + - : Renvoie une liste des éléments avec le nom indiqué. +- [`Document.hasFocus()`](/fr/docs/Web/API/Document/hasFocus) + - : Renvoie `true` si le focus est situé à l'intérieur du document indiqué. +- [`Document.open()`](/fr/docs/Web/API/Document/open) + - : Ouvre le flux d'écriture sur un document. +- [`Document.queryCommandEnabled()`](/fr/docs/Web/API/Document/queryCommandEnabled) {{deprecated_inline}} + - : Renvoie `true` si la commande de formatage peut être exécutée sur l'intervalle indiqué. +- [`Document.queryCommandIndeterm()`](/fr/docs/Web/API/Document/queryCommandIndeterm) {{deprecated_inline}} + - : Renvoie `true` si la commande de formatage est dans un état indéterminé pour l'intervalle courant. +- [`Document.queryCommandState()`](/fr/docs/Web/API/Document/queryCommandState) {{deprecated_inline}} + - : Renvoie `true` si la commande de formatage a été exécutée sur l'intervalle courant. +- [`Document.queryCommandSupported()`](/fr/docs/Web/API/Document/queryCommandSupported) {{deprecated_inline}} + - : Renvoie `true` si la commande de formatage est prise en charge sur l'intervalle courant. +- [`Document.queryCommandValue()`](/fr/docs/Web/API/Document/queryCommandValue) {{deprecated_inline}} + - : Renvoie la valeur de l'intervalle courant pour une commande de formatage. +- [`Document.write()`](/fr/docs/Web/API/Document/write) + - : Écrit du texte dans un document. +- [`Document.writeln()`](/fr/docs/Web/API/Document/writeln) + - : Écrit une ligne de texte dans un document. + +## Évènements + +L'écoute de ces évènements peut être effectuée avec `addEventListener()` ou en affectant un gestionnaire d'évènement à la propriété `on<nomdevenement>` correspondante à cette interface. + +- [`afterscriptexecute`](/fr/docs/Web/API/Document/afterscriptexecute_event) {{Non-standard_Inline}} + - : Déclenché lorsqu'un élément statique [`<script>`](/fr/docs/Web/HTML/Element/script) finit d'exécuter son script. +- [`beforescriptexecute`](/fr/docs/Web/API/Document/beforescriptexecute_event) {{Non-standard_Inline}} + - : Déclenché lorsqu'un élément statique [`<script>`](/fr/docs/Web/HTML/Element/script) est sur le point de commencer son exécution. +- [`scroll`](/fr/docs/Web/API/Document/scroll_event) + - : Déclenché lorsque la vue du document ou d'un élément a défilé. Également disponible avec la propriété [`onscroll`](/fr/docs/Web/API/GlobalEventHandlers/onscroll). +- [`visibilitychange`](/fr/docs/Web/API/Document/visibilitychange_event) + - : Déclenché lorsque le contenu d'un onglet est devenu visible ou lorsqu'il a été masqué. +- [`wheel`](/fr/docs/Web/API/Document/wheel_event) + - : Déclenché lorsque la personne utilise la roulette d'un appareil de pointage (généralement une souris). Également disponible avec la propriété [`onwheel`](/fr/docs/Web/API/GlobalEventHandlers/onwheel). + +### Évènements liés aux animations + +- [`animationcancel`](/fr/docs/Web/API/Document/animationcancel_event) + - : Déclenché lorsqu'une animation est interrompue de façon inattendue. Également disponible avec la propriété [`onanimationcancel`](/fr/docs/Web/API/GlobalEventHandlers/onanimationcancel). +- [`animationend`](/fr/docs/Web/API/Document/animationend_event) + - : Déclenché lorsqu'une animation s'est terminée normalement. Également disponible avec la propriété [`onanimationend`](/fr/docs/Web/API/GlobalEventHandlers/onanimationend). +- [`animationiteration`](/fr/docs/Web/API/Document/animationiteration_event) + - : Déclenché lorsqu'une itération d'une animation est terminée. Également disponible avec la propriété [`onanimationiteration`](/fr/docs/Web/API/GlobalEventHandlers/onanimationiteration). +- [`animationstart`](/fr/docs/Web/API/Document/animationstart_event) + - : Déclenché au démarrage d'une animation. Également disponible avec la propriété [`onanimationstart`](/fr/docs/Web/API/GlobalEventHandlers/onanimationstart). + +### Évènements liés au presse-papier + +- [`copy`](/fr/docs/Web/API/Document/copy_event) + - : Déclenché lorsqu'une personne initie une action de copie avec l'interface utilisateur du navigateur. +- [`cut`](/fr/docs/Web/API/Document/cut_event) + - : Déclenché lorsque l'utilisateur initie une action de coupe avec l'interface utilisateur du navigateur. +- [`paste`](/fr/docs/Web/API/Document/paste_event) + - : Déclenché lorsque l'utilisateur initie une action de colle avec l'interface utilisateur du navigateur. + +### Évènements pour le glisser-déposer + +- [`drag`](/fr/docs/Web/API/Document/drag_event) + - : Déclenché toutes les quelques centaines de millisecondes lorsqu'un élément ou une sélection de texte est glissée par l'utilisatrice ou l'utilisateur. Également disponible avec la propriété [`ondrag`](/fr/docs/Web/API/GlobalEventHandlers/ondrag). +- [`dragend`](/fr/docs/Web/API/Document/dragend_event) + - : Déclenché lorsqu'une opération de glisser-déposer se termine (en relâchant un bouton de la souris ou en appuyant sur la touche <kbd>Echap</kbd>). Également disponible avec la propriété [`ondragend`](/fr/docs/Web/API/GlobalEventHandlers/ondragend). +- [`dragenter`](/fr/docs/Web/API/Document/dragenter_event) + - : Déclenché lorsqu'un élément ou une sélection de texte que l'on fait glisser rentre sur une zone de dépôt valide. Également disponible avec la propriété [`ondragenter`](/fr/docs/Web/API/GlobalEventHandlers/ondragenter). +- [`dragleave`](/fr/docs/Web/API/Document/dragleave_event) + - : Déclenché lorsqu'un élément ou une sélection de texte que l'on fait glisser quitte une zone de dépôt valide. Également disponible avec la propriété [`ondragleave`](/fr/docs/Web/API/GlobalEventHandlers/ondragleave). +- [`dragover`](/fr/docs/Web/API/Document/dragover_event) + - : Déclenché lorsqu'un élément ou une sélection de texte que l'on fait glisser survole une zone de dépôt valide. Également disponible avec la propriété [`ondragover`](/fr/docs/Web/API/GlobalEventHandlers/ondragover). +- [`dragstart`](/fr/docs/Web/API/Document/dragstart_event) + - : Déclenché lorsqu'une personne commence à glisser un élément ou une sélection de texte. Également disponible avec la propriété [`ondragstart`](/fr/docs/Web/API/GlobalEventHandlers/ondragstart). +- [`drop`](/fr/docs/Web/API/Document/drop_event) + - : Déclenché lorsqu'un élément ou une sélection de texte est déposée sur une zone de dépôt valide. Également disponible avec la propriété [`ondrop`](/fr/docs/Web/API/GlobalEventHandlers/ondrop). + +### Évènements liés au mode plein écran + +- [`fullscreenchange`](/fr/docs/Web/API/Document/fullscreenchange_event) + - : Déclenché lorsque le document rentre ou sort du mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). +- [`fullscreenerror`](/fr/docs/Web/API/Document/fullscreenerror_event) + - : Déclenché en cas d'erreur lors d'une tentative d'entrée ou de sortie du mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). + +### Évènements clavier + +- [`keydown`](/fr/docs/Web/API/Document/keydown_event) + - : Déclenché lors de l'appui sur une touche. Également disponible avec la propriété [`onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown). +- [`keypress`](/fr/docs/Web/API/Document/keypress_event) {{Deprecated_Inline}} + - : Déclenché lors de l'appui sur une touche qui produit un caractère. Également disponible avec la propriété [`onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress). +- [`keyup`](/fr/docs/Web/API/Document/keyup_event) + - : Déclenché lors du relâchement d'une touche. Également disponible avec la propriété [`onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup). + +### Évènements de chargement et de déchargement + +- [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) + - : Déclenché lorsque le chargement et l'analyse (<i lang="en">parsing</i>) du document sont terminées, sans attendre la fin du chargement des feuilles de style, des images et des <i lang="en">frames</i>. +- [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) + - : Déclenché lorsque l'attribut [`readyState`](/fr/docs/Web/API/Document/readyState) a changé. + +### Évènements de pointeurs + +- [`gotpointercapture`](/fr/docs/Web/API/Document/gotpointercapture_event) + - : Déclenché lorsqu'un élément capture un pointeur avec [`setPointerCapture()`](/fr/docs/Web/API/Element/setPointerCapture). Également disponible avec la propriété [`ongotpointercapture`](/fr/docs/Web/API/GlobalEventHandlers/ongotpointercapture). +- [`lostpointercapture`](/fr/docs/Web/API/Document/lostpointercapture_event) + - : Déclenché lorsqu'un [pointeur capturé](/fr/docs/Web/API/Pointer_events#pointer_capture) est libéré. Également disponible avec la propriété [`onlostpointercapture`](/fr/docs/Web/API/GlobalEventHandlers/onlostpointercapture). +- [`pointercancel`](/fr/docs/Web/API/Document/pointercancel_event) + - : Déclenché lorsqu'un évènement de pointeur est annulé. Également disponible avec la propriété [`onpointercancel`](/fr/docs/Web/API/GlobalEventHandlers/onpointercancel). +- [`pointerdown`](/fr/docs/Web/API/Document/pointerdown_event) + - : Déclenché lorsqu'un pointeur devient actif. Également disponible avec la propriété [`onpointerdown`](/fr/docs/Web/API/GlobalEventHandlers/onpointerdown). +- [`pointerenter`](/fr/docs/Web/API/Document/pointerenter_event) + - : Déclenché lorsqu'un pointeur est déplacé au sein des frontières de la zone interactive d'un élément ou d'un de ses descendants. Également disponible avec la propriété [`onpointerenter`](/fr/docs/Web/API/GlobalEventHandlers/onpointerenter). +- [`pointerleave`](/fr/docs/Web/API/Document/pointerleave_event) + - : Déclenché lorsqu'un pointeur quitte les limites de la zone interactive d'un élément. Également disponible avec la propriété [`onpointerleave`](/fr/docs/Web/API/GlobalEventHandlers/onpointerleave). +- [`pointerlockchange`](/fr/docs/Web/API/Document/pointerlockchange_event) + - : Déclenché lorsque le pointeur est verrouillé/déverrouillé. Également disponible avec la propriété [`onpointerlockchange`](/fr/docs/Web/API/GlobalEventHandlers/onpointerlockchange). +- [`pointerlockerror`](/fr/docs/Web/API/Document/pointerlockerror_event) + - : Déclenché lorsque le verrouillage du pointeur échoue. Également disponible avec la propriété [`onpointerlockerror`](/fr/docs/Web/API/GlobalEventHandlers/onpointerlockerror). +- [`pointermove`](/fr/docs/Web/API/Document/pointermove_event) + - : Déclenché lorsqu'un pointeur change de coordonnées. Également disponible avec la propriété [`onpointermove`](/fr/docs/Web/API/GlobalEventHandlers/onpointermove). +- [`pointerout`](/fr/docs/Web/API/Document/pointerout_event) + - : Déclenché lorsqu'un pointeur est déplacé en dehors des limites de la zone interactive d'un élément (entre autres). Également disponible avec la propriété [`onpointerout`](/fr/docs/Web/API/GlobalEventHandlers/onpointerout). +- [`pointerover`](/fr/docs/Web/API/Document/pointerover_event) + - : Déclenché lorsqu'un pointeur est déplacé à l'intérieur des limites de la zone interactive d'un élément. Également disponible avec la propriété [`onpointerover`](/fr/docs/Web/API/GlobalEventHandlers/onpointerover). +- [`pointerup`](/fr/docs/Web/API/Document/pointerup_event) + - : Déclenché lorsqu'un pointeur n'est plus actif. Également disponible avec la propriété [`onpointerup`](/fr/docs/Web/API/GlobalEventHandlers/onpointerup). + +### Évènements de sélection + +- [`selectionchange`](/fr/docs/Web/API/Document/selectionchange_event) + - : Déclenché lorsque la sélection textuelle courante d'un document a changé. Également disponible avec la propriété [`onselectionchange`](/fr/docs/Web/API/GlobalEventHandlers/onselectionchange). +- [`selectstart`](/fr/docs/Web/API/Document/selectstart_event) + - : Déclenché lorsque l'utilisateur commence une nouvelle sélection. Également disponible avec la propriété [`onselectstart`](/fr/docs/Web/API/GlobalEventHandlers/onselectstart). + +### Évènements tactiles + +- [`touchcancel`](/fr/docs/Web/API/Document/touchcancel_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés d'une façon propre à l'implémentation (par exemple lorsque de trop nombreux points de toucher ont été créés). Également disponible avec la propriété [`ontouchcancel`](/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel). +- [`touchend`](/fr/docs/Web/API/Document/touchend_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été retirés de la surface tactile. Également disponible avec la propriété [`ontouchend`](/fr/docs/Web/API/GlobalEventHandlers/ontouchend). +- [`touchmove`](/fr/docs/Web/API/Document/touchmove_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été déplacés sur la surface tactile. Également disponible avec la propriété [`ontouchmove`](/fr/docs/Web/API/GlobalEventHandlers/ontouchmove). +- [`touchstart`](/fr/docs/Web/API/Document/touchstart_event) + - : Déclenché lorsqu'un ou plusieurs points de toucher ont été placés sur la surface tactile. Également disponible avec la propriété [`ontouchstart`](/fr/docs/Web/API/GlobalEventHandlers/ontouchstart). + +### Évènements de transition + +- [`transitioncancel`](/fr/docs/Web/API/Document/transitioncancel_event) + - : Déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) est annulée. Également disponible avec la propriété [`ontransitioncancel`](/fr/docs/Web/API/GlobalEventHandlers/ontransitioncancel). +- [`transitionend`](/fr/docs/Web/API/Document/transitionend_event) + - : Déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) est terminée. Également disponible avec la propriété [`ontransitionend`](/fr/docs/Web/API/GlobalEventHandlers/ontransitionend). +- [`transitionrun`](/fr/docs/Web/API/Document/transitionrun_event) + - : Déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) est créée. Également disponible avec la propriété [`ontransitionrun`](/fr/docs/Web/API/GlobalEventHandlers/ontransitionrun). +- [`transitionstart`](/fr/docs/Web/API/Document/transitionstart_event) + - : Déclenché lorsqu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) a effectivement démarré. Également disponible avec la propriété [`ontransitionstart`](/fr/docs/Web/API/GlobalEventHandlers/ontransitionstart). + +## Extensions non-standard {{Non-standard_Inline}} + +{{non-standard_header}} + +### Notes relatives à Firefox + +Firefox définit certaines méthodes non-standard : + +- [`Document.execCommandShowHelp()`](/fr/docs/Web/API/Document/execCommandShowHelp) {{deprecated_inline}} + - : Cette méthode n'a jamais rien fait et a toujours levé une exception. Elle a été retirée avec Gecko 14.0. +- [`Document.getBoxObjectFor()`](/fr/docs/Web/API/Document/getBoxObjectFor) {{deprecated_inline}} + - : On utilisera la méthode [`Element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect) à la place. +- [`Document.loadOverlay()`](/fr/docs/Web/API/Document/loadOverlay) {{deprecated_inline}} + - : Charge [un overlay XUL](/fr/docs/XUL_Overlays) de façon dynamique. Cette méthode fonctionne uniquement pour les documents XUL. +- [`Document.queryCommandText()`](/fr/docs/Web/API/Document/queryCommandText) {{deprecated_inline}} + - : Cette méthode n'a jamais rien fait et a toujours levé une exception. Elle a été retirée avec Gecko 14.0. + +### Notes relatives à Internet Explorer + +Microsoft définit certaines propriétés non-standard : + +- [`Document.fileSize`](/fr/docs/Web/API/Document/fileSize)\* {{Non-standard_Inline}} {{deprecated_inline}} + - : Renvoie la taille du document, exprimée en octets. Cette propriété n'est plus prise en charge à partir d'Internet Explorer 11. ## Spécifications -| Spécification | Statut | Commentaire | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ | -| {{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}} | {{Spec2('Page Visibility API')}} | Ajoute `onvisibilitychange.` | -| {{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}} | {{Spec2('Selection API')}} | Ajoute `onselectstart`et `onselectionchange`. | -| {{SpecName('DOM1','#i-Document','Document')}} | {{Spec2('DOM1')}} | Définition initiale pour l'interface | -| {{SpecName('DOM2 Core','#i-Document','Document')}} | {{Spec2('DOM2 Core')}} | Remplace DOM 1 | -| {{SpecName('DOM3 Core','#i-Document','Document')}} | {{Spec2('DOM3 Core')}} | remplace DOM 2 | -| {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | en vue de remplacer DOM 3 | -| {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}} | {{Spec2('HTML WHATWG')}} | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` | -| {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}} | {{Spec2('DOM3 XPath')}} | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document. | -| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | -| {{SpecName('HTML Editing','#dom-document-getselection','Document')}} | {{Spec2('HTML Editing')}} | Étend l'interface `Document` | -| {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM View')}} | Étend l'interface `Document` | -| {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM')}} | Étend l'interface `Document` | -| {{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}} | {{Spec2('Pointer Lock')}} | Étend l'interface `Document` | - -## Compatibilité des navigateurs notes - -### Notes concernant Firefox : - -Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL : - -- {{domxref("document.currentScript")}} {{non-standard_inline}} - - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution. -- {{domxref("document.documentURIObject")}} - - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). -- {{domxref("document.popupNode")}} - - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle. -- {{domxref("document.tooltipNode")}} - - : retourne le noeud qui est la cible de l'info-bulle actuelle. - -Mozilla a également défini quelques méthodes non standard : - -- {{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}} - - : Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}. -- {{domxref("document.getBoxObjectFor")}} {{obsolete_inline}} - - : Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place. -- {{domxref("document.loadOverlay")}} - - : charge dynamiquement un [XUL overlay](/fr/docs/Overlays_XUL) . Celui-ci fonctionne seulement dans les documents XUL. -- {{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}} - - : Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}. - -### Notes concernant Internet Explorer - -Microsoft a défini quelques propriétés non standard : - -- {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}} - - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). - -Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document : - -- {{domxref("document.contains")}} - - : Pour contourner le problème, `document.body.contains ()` peut être utilisé. +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index 9e09f19c88..a1a577be58 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -1,88 +1,74 @@ --- title: Element.animate() slug: Web/API/Element/animate -tags: - - API translation_of: Web/API/Element/animate +browser-compat: api.Element.animate --- -{{APIRef('Web Animations')}} {{SeeCompatTable}} +{{APIRef('Web Animations')}} -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 **`animate()`** de l'interface [`Element`](/fr/docs/Web/API/Element) est un raccourci permettant de créer un nouvel objet [`Animation`](/fr/docs/Web/API/Animation), de l'appliquer à un élément puis de la jouer. Elle retourne l'instance [`Animation`](/fr/docs/Web/API/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 qui leur sont appliquées. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant [`Element.getAnimations()`](/fr/docs/Web/API/Element/getAnimations). ## Syntaxe ```js -element.animate(keyframes, options); +animate(keyframes, options); ``` -### Paramèters +### Paramètres - `keyframes` - - : Un [objet formatté représentant un ensemble de keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats). + - : Un tableau d'objets représentant les étapes **ou** un objet dont les propriétés sont les tableaux des valeurs sur lesquelles itérer. Voir [les formats de <i lang="en">keyframe</i>](/fr/docs/Web/API/Web_Animations_API/Keyframe_Formats) pour plus de détails. - `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**: + - : Soit **un entier indiquant la durée de l'animation** en millisecondes, **ou** un objet qui contient une ou plusieurs propriétés de temporisation décrites dans [le paramètre `options` pour `KeyframeEffect()`](/fr/docs/Web/API/KeyframeEffect/KeyframeEffect#paramètres) et/ou les options suivantes : - - `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. - -{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} - -#### Options à venir - -Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche. - -- `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`. - - - `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`. -- `spacing {{optional_inline}}` - - - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. - - - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. - - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. + - `id` {{optional_inline}} + - : Une propriété unique pour `animate()` : il s'agit d'une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qu'on pourra utiliser pour faire référence à l'animation en question. ### Valeur de retour -Retourne un objet de type {{domxref("Animation")}}. +Renvoie un objet [`Animation`](/fr/docs/Web/API/Animation). -## Exemple +## Exemples -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émonstration [Dans le terrier du lapin (avec l'API <i lang="en">Web Animation</i>)](https://codepen.io/SphinxKnight/pen/NWwQbJz), on utilise la méthode `animate()` pour créer et immédiatement jouer une animation sur l'élément `#tunnel` afin que celui-ci défile vers le haut de façon infinie (voir les bords). Voyez ici les objets passés comme étapes et les options de temporisation. ```js document.getElementById("tunnel").animate([ - // keyframes + // étapes/keyframes { transform: 'translateY(0px)' }, { transform: 'translateY(-300px)' } ], { - // timing options + // temporisation duration: 1000, iterations: Infinity }); ``` +### Étapes initiales ou finales implicites + +Pour les navigateurs récents, il est possible d'indiquer uniquement un état de début ou de fin pour une animation (c'est-à-dire une seule étape), c'est le navigateur qui déduira, si possible, l'autre étape (de début ou de fin donc). Prenons comme exemple [cette animation simple](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html), l'objet pour l'étape ressemble à : + +```js +let rotate360 = [ + { transform: 'rotate(360deg)' } +]; +``` + +On a uniquement indiqué l'état final de l'animation, l'état initial est implicite. + ## Spécifications -| Spécification | Statut | Commentaire | -| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ | -| {{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}} | {{Spec2('Web Animations')}} | Initial definition | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.Element.animate")}} +{{Compat}} ## Voir aussi -- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) -- {{domxref("Element.getAnimations()")}} -- {{domxref("Animation")}} +- [L'API <i lang="en">Web Animations</i>](/fr/docs/Web/API/Web_Animations_API) +- [`Element.getAnimations()`](/fr/docs/Web/API/Element/getAnimations) +- [`Animation`](/fr/docs/Web/API/Animation) diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index f884e24cd0..664cfd66e2 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -1,54 +1,120 @@ --- -title: error +title: 'Element : évènement error' slug: Web/API/Element/error_event -tags: - - DOM - - Erreurs - - Gestionnaire d'erreurs - - Interface - - évènements translation_of: Web/API/Element/error_event original_slug: Web/Events/error +browser-compat: api.Element.error_event --- -L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API. +{{APIRef}} -## Informations générales +L'évènement `error` est déclenché sur un objet [`Element`](/fr/docs/Web/API/Element) lorsque le chargement d'une ressource a échoué ou qu'elle ne peut pas être utilisée. Cela peut, par exemple, se produire lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou si elle est invalide. -- Spécification - - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) -- Interface - - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. -- Propagation - - : Non -- Annulable - - : Non -- Cible - - : {{domxref("Element")}} -- Action par défaut - - : Aucune +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bouillonnement</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td><a href="/fr/docs/Web/API/Event"><code>Event</code></a> ou <a href="/fr/docs/Web/API/UIEvent"><code>UIEvent</code></a></td> + </tr> + <tr> + <th scope="row">Propriété pour la gestion d'évènement</th> + <td> + <a href="/fr/docs/Web/API/GlobalEventHandlers/onerror"><code>onerror</code></a> + </td> + </tr> + </tbody> +</table> -## Propriétés +L'objet évènement obtenu est une instance [`UIEvent`](/fr/docs/Web/API/UIEvent) s'il a été généré depuis un élément de l'interface utilisateur ou une instance [`Event`](/fr/docs/Web/API/Event) sinon. -| Property | Type | Description | -| ------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- | -| `target` {{readonlyInline}} | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree). | -| `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | The type of event. | -| `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event normally bubbles or not. | -| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Whether the event is cancellable or not. | -| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) | -| `detail` {{readonlyInline}} | `long` (`float`) | 0. | +## Exemples -### Pour des évènements MediaStream Recording +### HTML -Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. +```html +<div class="controls"> + <button id="img-error" type="button">Générer une erreur d'image</button> + <img class="bad-img" /> +</div> -{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}} +<div class="event-log"> + <label>Journal d'évènements :</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div> +``` + +```css hidden +body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +``` + +### JS + +```js +const log = document.querySelector('.event-log-contents'); + +const badImg = document.querySelector('.bad-img'); +badImg.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: Chargement de l'image\n`; + console.log(event) +}); + +const imgError = document.querySelector('#img-error'); +imgError.addEventListener('click', () => { + badImg.setAttribute('src', 'i-dont-exist'); +}); +``` + +### Résultat + +{{EmbedLiveSample('', '100%', '250px')}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} ## Voir aussi -- {{domxref("GlobalEventHandlers.onerror")}} - - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} -- {{domxref("HTMLMediaElement.onerror")}} - - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . -- {{domxref("MediaRecorder.onerror")}} - - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} +- L'évènement correspondant pour les cibles `Window` : [`error`](/fr/docs/Web/API/Window/error_event) diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md index f186be6852..75ff174360 100644 --- a/files/fr/web/api/element/mousedown_event/index.md +++ b/files/fr/web/api/element/mousedown_event/index.md @@ -1,25 +1,19 @@ --- title: 'Element : évènement mousedown' slug: Web/API/Element/mousedown_event -tags: - - API - - DOM - - Interface - - Reference - - events - - mousedown translation_of: Web/API/Element/mousedown_event +browser-compat: api.Element.mousedown_event --- {{APIRef}} -L'évènement **`mousedown`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément. +L'évènement **`mousedown`** est déclenché à partir d'un [`Element`](/fr/docs/Web/API/Element) lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément. -> **Note :** Cet évènement est différent de {{domxref("Element/click_event", "click")}}. `click` est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton. +> **Note :** Cet évènement est différent de [`click`](/fr/docs/Web/API/Element/click_event). `click` est déclenché après qu'un clic « entier » a eu lieu (c'est-à-dire quand le bouton a été pressé puis relâché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton. <table class="properties"> <tbody> <tr> - <th scope="row">Se propage/remonte dans le DOM</th> + <th scope="row">Bouillonne</th> <td>Oui</td> </tr> <tr> @@ -28,12 +22,12 @@ L'évènement **`mousedown`** est déclenché à partir d'un {{domxref("Element" </tr> <tr> <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> + <td><a href="/fr/docs/Web/API/MouseEvent"><code>MouseEvent</code></a></td> </tr> <tr> <th scope="row">Propriété pour la gestion d'évènement</th> <td> - {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} + <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown"><code>onmousedown</code></a> </td> </tr> </tbody> @@ -41,30 +35,26 @@ L'évènement **`mousedown`** est déclenché à partir d'un {{domxref("Element" ## Exemples -{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}} +Voir [la page sur l'évènement `mousemove`](/fr/docs/Web/API/Element/mousemove_event#exemples) pour un exemple de code. ## Spécifications -| Spécification | État | -| ---------------------------------------------------------------------------------------- | -------------------------------- | -| {{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}} | {{Spec2('UI Events')}} | -| {{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}} | {{Spec2('DOM3 Events')}} | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.Element.mousedown_event")}} +{{Compat}} ## Voir aussi -- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) -- D'autres évènements connexes - +- [Une introduction aux évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events) +- D'autres évènements connexes : - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) - [`click`](/fr/docs/Web/API/Element/click_event) - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) - - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/element/mouseup_event/index.md b/files/fr/web/api/element/mouseup_event/index.md index 143e3155a4..1dc6354bed 100644 --- a/files/fr/web/api/element/mouseup_event/index.md +++ b/files/fr/web/api/element/mouseup_event/index.md @@ -1,26 +1,19 @@ --- title: 'Element : évènement mouseup' slug: Web/API/Element/mouseup_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mouseup translation_of: Web/API/Element/mouseup_event +browser-compat: api.Element.mouseup_event --- {{APIRef}} -L'évènement **`mouseup`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément. +L'évènement **`mouseup`** est déclenché à partir d'un [`Element`](/fr/docs/Web/API/Element) lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relâché lorsque le pointeur est sur cet élément. -Les évènements `mouseup` peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on _appuie_ sur un bouton. +L'évènement `mouseup` peut être vu comme le contrepoint de l'évènement [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) qui se produit lorsqu'on _appuie_ sur un bouton. <table class="properties"> <tbody> <tr> - <th scope="row">Se propage/remonte dans le DOM</th> + <th scope="row">Bouillonne</th> <td>Oui</td> </tr> <tr> @@ -29,12 +22,12 @@ Les évènements `mouseup` peuvent être comparés aux évènements {{domxref("E </tr> <tr> <th scope="row">Interface</th> - <td>{{domxref("MouseEvent")}}</td> + <td><a href="/fr/docs/Web/API/MouseEvent"><code>MouseEvent</code></a></td> </tr> <tr> <th scope="row">Propriété pour la gestion d'évènement</th> <td> - {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} + <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup"><code>onmouseup</code></a> </td> </tr> </tbody> @@ -42,30 +35,26 @@ Les évènements `mouseup` peuvent être comparés aux évènements {{domxref("E ## Exemples -{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}} +Voir [la page sur l'évènement `mousemove`](/fr/docs/Web/API/Element/mousemove_event#exemples) pour un exemple de code. ## Spécifications -| Spécification | État | -| -------------------------------------------------------------------------------- | -------------------------------- | -| {{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}} | {{Spec2('UI Events')}} | -| {{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}} | {{Spec2('DOM3 Events')}} | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.Element.mouseup_event")}} +{{Compat}} ## Voir aussi -- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements) -- D'autres évènements connexes - +- [Une introduction aux évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events) +- D'autres évènements connexes : - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event) - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) - [`click`](/fr/docs/Web/API/Element/click_event) - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event) - - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event) + - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event) - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event) - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md index f377937e23..f3ac571711 100644 --- a/files/fr/web/api/gainnode/index.md +++ b/files/fr/web/api/gainnode/index.md @@ -1,41 +1,37 @@ --- title: GainNode slug: Web/API/GainNode -tags: - - API - - Experimental - - Reference - - Web Audio API translation_of: Web/API/GainNode +browser-compat: api.GainNode --- -{{ APIRef("Web Audio API") }} +{{APIRef("Web Audio API")}} -L'interface **`GainNode`** représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un `GainNode` a toujours exactement une entrée et une sortie, avec la même quantité de canaux. +L'interface **`GainNode`** représente une variation de volume. Il s'agit d'un objet [`AudioNode`](/fr/docs/Web/API/AudioNode), c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un `GainNode` a toujours exactement une entrée et une sortie, avec la même quantité de canaux. -Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant. +Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux en entrées. En cas de modification, le nouveau gain est appliqué instantanément, ce qui peut entraîner des « clics » inesthétiques sur l'audio résultant. Pour éviter que cela se produise, on ne changera jamais la valeur directement mais en utilisant les méthodes d'interpolation exponentielles de l'interface [`AudioParam`](/fr/docs/Web/API/AudioParam).  <table class="properties"> <tbody> <tr> - <th scope="row"><dfn>Nombre d'entrées</dfn></th> + <th scope="row">Nombre d'entrées</th> <td><code>1</code></td> </tr> <tr> - <th scope="row"><dfn>Nombre de sorties</dfn></th> + <th scope="row">Nombre de sorties</th> <td><code>1</code></td> </tr> <tr> - <th scope="row"><dfn>Mode de comptage des canaux</dfn></th> + <th scope="row">Mode de comptage des canaux</th> <td><code>"max"</code></td> </tr> <tr> - <th scope="row"><dfn>Nombre de canaux</dfn></th> + <th scope="row">Nombre de canaux</th> <td><code>2</code> (inutilisés dans le mode de comptage par défaut)</td> </tr> <tr> - <th scope="row"><dfn>Interprétation des canaux</dfn></th> + <th scope="row">Interprétation des canaux</th> <td><code>"speakers"</code></td> </tr> </tbody> @@ -43,34 +39,32 @@ Le gain est une valeur sans unité, qui change éventuellement avec le temps, qu ## Constructeur -- {{domxref("GainNode.GainNode", "GainNode()")}} - - : Crée une nouvelle instance d'un objet `GainNode`. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}. +- [`GainNode()`](/fr/docs/Web/API/GainNode/GainNode) + - : Crée une nouvelle instance d'un objet `GainNode`. Il est aussi possible d'utiliser la méthode de construction [`BaseAudioContext.createGain()`](/fr/docs/Web/API/BaseAudioContext/createGain). Voir [créer un objet `AudioNode`](/fr/docs/Web/API/AudioNode#créer_un_objet_audionode). ## Propriétés -_Hérite des propritétés de son parent,_ _{{domxref("AudioNode")}}_. +_Hérite des propritétés de son parent, [`AudioNode`](/fr/docs/Web/API/AudioNode)._ -- {{domxref("GainNode.gain")}} - - : Est un [a-rate](/fr/docs/Web/API/AudioParam#a-rate) {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le `AudioParam` retournée est en lecture seule, la valeur qu'il représente ne l'est pas). +- [`GainNode.gain`](/fr/docs/Web/API/GainNode/gain) {{readonlyinline}} + - : Est un [`AudioParam`](/fr/docs/Web/API/AudioParam) de type [`a-rate`](/fr/docs/Web/API/AudioParam#a-rate) représentant le montant du gain à appliquer. Il faut modifier [`AudioParam.value`](/fr/docs/Web/API/AudioParam/value) ou utiliser les méthodes fournies par `AudioParam` pour changer l'effet du gain. ## Méthodes -Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}. +_Aucune méthode spécifique, cette interface hérite des méthodes de son parent, [`AudioNode`](/fr/docs/Web/API/AudioNode)_. ## Exemple -{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}} +Voir la page sur [`BaseAudioContext.createGain()`](/fr/docs/Web/API/BaseAudioContext/createGain#example) pour un exemple de code illustrant comment utiliser un objet `AudioContext` afin de créer un objet `GainNode`. ## Spécification -| Spécification | Statuts | Commentaire | -| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} -## Compatibilité navigateurs +## Compatibilité des navigateurs -{{Compat("api.GainNode")}} +{{Compat}} ## Voir aussi -- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web_Audio_API/Using_Web_Audio_API) 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 4004757091..ed328d8982 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 @@ -4,58 +4,54 @@ slug: Web/API/Gamepad_API/Using_the_Gamepad_API translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API original_slug: Web/Guide/API/Gamepad --- -{{ SeeCompatTable() }} +{{DefaultAPISidebar("Gamepad API")}} -HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme `<canvas>`, WebGL, `<audio>`, et `<video>`, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et _`designers`_ d'accéder aux contrôleurs de jeux. +HTML5 a introduit de nombreuses briques technologiques qui permettent le développement de jeux interactifs. Les fonctionnalités offertes par `<canvas>`, WebGL, `<audio>`, et `<video>`, ainsi que les API JavaScript correspondantes, ont suffisamment gagné en maturité pour réaliser des tâches qui nécessitaient auparavant du code natif. L'API <i lang="en">Gamepad</i> est un outil qui permet d'accéder et d'utiliser les manettes et autres contrôleurs de jeux. -> **Note :** Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant `about:config` et en activant `dom.gamepad.enabled`. +L'API [<i lang="en">Gamepad</i>](/fr/docs/Web/API/Gamepad_API) introduit de nouveaux évènements sur l'objet [`Window`](/fr/docs/Web/API/Window) qui permettent de lire l'état de la manette. En plus de ces évènements, l'API ajoute également un objet [`Gamepad`](/fr/docs/Web/API/Gamepad), qui permet de connaître l'état d'une manette connectée et une méthode [`navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) qu'on peut utiliser pour obtenir la liste des manettes connues sur la page. -L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page. +## Connecter une manette -## Connexion au contrôleur +Lorsqu'une nouvelle manette est connectée à l'ordinateur, la page qui a le focus reçoit d'abord un évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event). Si une manette est déjà connectée lorsque la page est chargée, l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) est émis sur la page lorsque la personne appuie sur un bouton ou déplace un axe. -Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe. +> **Note :** Dans Firefox, les manettes sont uniquement exposées à la page après qu'il y a eu une interaction de la personne avec la page. Cela permet d'éviter à ce que les manettes soient utilisées pour créer une empreinte, de faciliter le pistage. Une fois qu'une manette a interagi avec la page, les autres manettes connectées seront automatiquement visibles. -Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement. - -Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi : +On peut utiliser [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) comme ceci : ```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("Manette connectée à l'indice %d : %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. - -> **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. +Chaque manette dispose d'un identifiant unique qui lui est associé et qui est disponible via la propriété [`gamepad`](/fr/docs/Web/API/GamepadEvent/gamepad) de l'évènement. -## Déconnexion du contrôleur +## Déconnecter une manette -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'une manette est déconnectée et si la page avait déjà reçu des données pour cette manette (par exemple avec [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event)), un deuxième évènement est envoyé sur la fenêtre, [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event) : ```js window.addEventListener("gamepaddisconnected", function(e) { - console.log("Contrôleur n°%d déconnecté : %s", - e.gamepad.index, e.gamepad.id); + console.log("Manette déconnectée à l'indice %d : %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`](/fr/docs/Web/API/Gamepad/index) de l'objet porté par `gamepad` sera unique pour chaque appareil connecté au système, même si plusieurs manettes du même type sont utilisées. La propriété `index` fonctionne également comme l'indice qui peut être utilisé pour parcourir le tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) renvoyé par la méthode [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads). ```js -var gamepads = {}; +let gamepads = {}; function gamepadHandler(event, connecting) { - var gamepad = event.gamepad; + let gamepad = event.gamepad; // Note : // gamepad === navigator.getGamepads()[gamepad.index] if (connecting) { gamepads[gamepad.index] = gamepad; - } else { + } else { delete gamepads[gamepad.index]; } } @@ -64,100 +60,108 @@ window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true 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. +L'exemple qui précède illustre également comment la propriété `gamepad` peut être retenue après la fin de l'évènement. Nous utiliserons cette technique plus tard pour faire des requêtes sur l'état de l'appareil. -\[PAGE NON TRADUITE DEPUIS ICI...] +## Utiliser l'objet `Gamepad` -## Querying the Gamepad object +Comme vous pouvez le voir, les évènements `gamepad` présentés ci-avant incluent une propriété `gamepad` rattachée à l'objet de l'évènement. Cette propriété fournit un objet [`Gamepad`](/fr/docs/Web/API/Gamepad). On peut utiliser cet objet afin de déterminer la manette qui a causé l'évènement (avec son identifiant), car plusieurs manettes pourraient être connectées simultanément. On peut faire bien plus avec cet objet [`Gamepad`](/fr/docs/Web/API/Gamepad), y compris garder une référence vers celui-ci et l'utiliser pour déterminer les boutons et axes utilisés à tout moment. Une telle utilisation est souvent nécessaire pour les jeux ou les pages interactives lorsqu'il faut connaître l'état de la manette à l'instant T et l'état dans lequel elle sera au moment du prochain évènement. -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. +Généralement, ces opérations sont effectuées en utilisant un objet [`Gamepad`](/fr/docs/Web/API/Gamepad) avec une boucle d'animation (par exemple avec [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame)), où on peut développer la logique du jeu afin de choisir quoi faire pour la <i lang="en">frame</i> courante selon l'état de la (ou des) manette(s). -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. - -> **Note :** The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below: +La méthode [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) renvoie un tableau de l'ensemble des appareils qui sont actuellement visibles de la page web sous la forme d'objets [`Gamepad`](/fr/docs/Web/API/Gamepad) (la première valeur vaut toujours `null`, et c'est `null` qui est renvoyé s'il n'y a pas de manettes connectées). On peut l'utiliser pour obtenir les mêmes informations. Ainsi, le premier exemple de code ci-avant pourrait être réécrit de la façon suivante : ```js window.addEventListener("gamepadconnected", function(e) { var gp = navigator.getGamepads()[e.gamepad.index]; - console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.", - gp.index, gp.id, - gp.buttons.length, gp.axes.length); + console.log("Manette connectée à l'indice %d : %s. %d boutons, %d axes.", + gp.index, gp.id, + gp.buttons.length, gp.axes.length); }); ``` -The {{ domxref("Gamepad") }} object's properties are as follows: +Les propriétés d'un objet [`Gamepad`](/fr/docs/Web/API/Gamepad) sont : -- `id`: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (`-`): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user. -- `index`: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index. -- `mapping`: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the [standard gamepad](https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping). If the browser is able to map controls on the device to that layout the `mapping` property will be set to the string `standard`. -- `connected`: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is `True`; if not, it is `False`. -- `buttons`: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a `pressed` and a `value` property: +- `id` + - : Une chaîne de caractères contenant des informations sur la manette. Le format n'est pas spécifié de façon stricte. Pour Firefox, ce sera trois informations séparées par des tirets (`-`) : deux chaînes de caractères avec 4 chiffres hexadécimaux indiquant l'éditeur du pilote USB et l'identifiant produit de la manette puis le nom de la manette fourni par le pilote. Ces informations doivent permettre de trouver la correspondance des touches de l'appareil et de fournir des retours pertinents à la personne qui utilise la manette. +- `index` + - : Un entier, unique pour chaque manette actuellement connectée au système. Elle peut être utilisée afin de distinguer une manette parmi plusieurs. On notera que déconnecter un appareil puis en reconnecter un nouveau pourra réutiliser un des indices précédemment utilisé. +- `mapping` + - : Une chaîne de caractères qui indique si le navigateur a adapté les contrôles de l'appareil sur une disposition connue. Il existe actuellement une seule disposition prise en charge, [la manette standard](https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping). Si le navigateur est capable de faire correspondre les contrôles de l'appareil avec cette disposition, la propriété `mapping` vaudra la chaîne de caractères `standard`. +- `connected` + - : Un booléen qui indique si la manette est toujours connectée au système (`true` si c'est le cas, `false` sinon). +- `buttons` + - : Un tableau d'objets [`GamepadButton`](/fr/docs/Web/API/GamepadButton) représentant les boutons présents sur l'appareil. Chaque objet [`GamepadButton`](/fr/docs/Web/API/GamepadButton) aura deux propriétés, `pressed` et `value` : + - `pressed` + - : Un booléen qui indique si le bouton est actuellement enfoncé/appuyé (`true`) ou relâché (`false`). + - `value` + - : Un nombre flottant utilisée pour représenter la valeur des boutons analogiques comme les gâchettes. Les valeurs sont normalisées sur l'intervalle `[0.0, 1.0]`, avec `0.0` qui représente un bouton sur lequel il n'y a aucune pression et `1.0` qui représente un bouton complètement appuyé/enfoncé. +- `axes` + - : Un tableau qui représente les contrôles où des axes sont présents sur l'appareil (par exemple les joysticks analogiques). Chaque élément du tableau est une valeur flottante sur l'intervalle `[-1.0, 1.0]` qui représente la position sur un axe, de la valeur la plus faible (`-1.0`), à la valeur la plus haute (`1.0`). +- `timestamp` + - : : Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) indiquant le dernier instant auquel les données des manettes ont été mises à jour. Cela permet de déterminer si les données fournies par `axes` et `button` ont été mises à jour par le matériel. Cette valeur doit être relative à l'attribut `navigationStart` de l'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming). Les valeurs augmentent de façon monotone, ce qui signifie qu'on peut les comparer pour déterminer l'ordre des mises à jour (les valeurs les plus récentes seront toujours supérieures aux valeurs antérieures). Cette propriété n'est actuellement pas prise en charge par Firefox. - - The `pressed` property is a boolean indicating whether the button is currently pressed (`true`) or unpressed (`false`). - - The `value` property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed. +> **Note :** L'objet `Gamepad` est disponible sur l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) plutôt que sur l'objet [`Window`](/fr/docs/Web/API/Window) pour des raisons de sécurité. Une fois qu'une référence est obtenue, on peut consulter ses propriétés pour obtenir des informations à propos de la manette. Sous le capot, cet objet est mis à jour à chaque fois que l'état de la manette change. -- `axes`: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0). -- `timestamp`: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the `axes` and `button` data have been updated from the hardware. The value must be relative to the `navigationStart` attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox. +### Utiliser les informations des boutons -> **Note :** The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes. +Prenons un exemple simple, qui affiche les informations de connexion d'une seule manette (on ignore ici les connexions des manettes qui auraient lieu après) et qui permet de déplacer une balle sur l'écran à l'aide des quatre boutons situés sur le côté droit de la manette. Vous pouvez [voir la démonstration en direct](https://chrisdavidmills.github.io/gamepad-buttons/), ainsi que [le code source correspondant](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) sur GitHub. -### Using button information +Pour commencer, on déclare quelques variables : -Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can [view the demo live](http://chrisdavidmills.github.io/gamepad-buttons/), and [find the source code](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) on Github. +- `gamepadInfo` qui correspond au paragraphe dans lequel on écrit les informations de connexion +- `ball` qui est la balle qu'on souhaite déplacer +- `start` qui est la variable utilisée comme identifiant pour `requestAnimationFrame()` +- `a` et `b` qui serviront de modificateurs de position pour la balle -To start with, we declare some variables: The `gamepadInfo` paragraph that the connection info is written into, the `ball` that we want to move, the `start` variable that acts as the ID for `requestAnimation Frame`, the `a` and `b` variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks. +On a également (dans le code, mais pas ici par souci de concision), des variables pour faciliter l'accès à [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) dans les différents navigateurs. ```js -var gamepadInfo = document.getElementById("gamepad-info"); -var ball = document.getElementById("ball"); -var start; -var a = 0; -var b = 0; - -var rAF = window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.requestAnimationFrame; - -var rAFStop = window.mozCancelRequestAnimationFrame || - window.webkitCancelRequestAnimationFrame || - window.cancelRequestAnimationFrame; +let gamepadInfo = document.getElementById("gamepad-info"); +let ball = document.getElementById("ball"); +let start; +let a = 0; +let b = 0; ``` -Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}`[0]`, print information about the gamepad into our gamepad info `div`, and fire the `gameLoop()` function that starts the whole ball movement process up. +Ensuite, on utilise l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) pour vérifier si une manette est connectée. Lorsqu'une manette est connectée, on récupère l'objet correspondant avec [`Navigator.getGamepads()[0]`](/fr/docs/Web/API/Navigator/getGamepads) et on affiche les informations dans l'élément `div` correspondant puis on déclenche la fonction `gameLoop()` qui démarre la procédure pour le mouvement de la balle. ```js window.addEventListener("gamepadconnected", function(e) { - var gp = navigator.getGamepads()[e.gamepad.index]; - gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes."; + let gp = navigator.getGamepads()[e.gamepad.index]; + gamepadInfo.innerHTML = "Manette connectée à l'indice" + gp.index + " : " + gp.id + ". Elle a " + gp.buttons.length + " boutons et " + gp.axes.length + " axes."; gameLoop(); }); ``` -Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally. +On gère également l'évènement [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event) pour vérifier si la manette a été déconnectée. Si c'est le cas, on arrête la boucle [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) (voir après) et on réinitialise les informations affichées sur la manette. ```js window.addEventListener("gamepaddisconnected", function(e) { - gamepadInfo.innerHTML = "Waiting for gamepad."; + gamepadInfo.innerHTML = "En attente d'une manette."; - rAFStop(start); + cancelRequestAnimationFrame(start); }); ``` -Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a `webkit` prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility. +Pour Chrome, les choses sont différentes. Le navigateur ne stocke qu'un instantané de l'état de la manette et il faut donc continuellement rafraîchir l'état connu avant d'utiliser l'objet [`Gamepad`](/fr/docs/Web/API/Gamepad) lorsque celui-ci devient disponible. Dans le code qui suit, on fait cela avec [`setInterval()`](/fr/docs/Web/API/setInterval). Une fois que l'objet est disponible, les informations sont affichées, la boucle de jeu commence et l'intervalle de répétition pour l'état de la manette est arrêté avec [`clearInterval`](/fr/docs/Web/API/clearInterval). Pour les versions les plus anciennes de Chrome, [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) est implémentée avec un préfixe `webkit`. Pour une rétro-compatibilité, on essaie ici de détecter et de gérer les deux cas (avec et sans préfixe). ```js -if(!('GamepadEvent' in window)) { - // No gamepad events available, poll instead. - var interval = setInterval(pollGamepads, 500); +let interval; + +if (!('ongamepadconnected' in window)) { + // Les évènements gamepad ne sont pas disponibles + // On boucle pour connaître l'état à la place + interval = setInterval(pollGamepads, 500); } function pollGamepads() { - var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []); - for (var i = 0; i < gamepads.length; i++) { - var gp = gamepads[i]; - if(gp) { - gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes."; + let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []); + for (let i = 0; i < gamepads.length; i++) { + let gp = gamepads[i]; + if (gp) { + gamepadInfo.innerHTML = "Manette connectée à l'indice " + gp.index + " : " + gp.id + + ". Elle a " + gp.buttons.length + " boutons et " + gp.axes.length + " axes."; gameLoop(); clearInterval(interval); } @@ -165,9 +169,9 @@ 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. +Voyons maintenant la boucle de jeu principale. Pour chaque exécution de la boucle, on regarde si un des quatre boutons est pressé. Si c'est le cas, on met à jour les variables de mouvement `a` et `b` de façon correspondante. Ensuite, on met à jour les propriétés CSS [`left`](/fr/docs/Web/CSS/left) et [`top`](/fr/docs/Web/CSS/top) avec les valeurs respectives de `a` et `b`. En pratique, cela aura pour effet de déplacer la balle sur l'écran. -After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again. +Une fois que tout ça est fait, on utilise `requestAnimationFrame()` pour passer à la <i lang="en">frame</i> suivante, où on exécute à nouveau `gameLoop()`. ```js function buttonPressed(b) { @@ -178,78 +182,88 @@ function buttonPressed(b) { } function gameLoop() { - var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []); - if (!gamepads) + let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); + if (!gamepads) { return; + } - var gp = gamepads[0]; + let gp = gamepads[0]; if (buttonPressed(gp.buttons[0])) { b--; } else if (buttonPressed(gp.buttons[2])) { b++; } - if(buttonPressed(gp.buttons[1])) { + if (buttonPressed(gp.buttons[1])) { a++; - } else if(buttonPressed(gp.buttons[3])) { + } else if (buttonPressed(gp.buttons[3])) { a--; } - ball.style.left = a*2 + "px"; - ball.style.top = b*2 + "px"; + ball.style.left = a * 2 + "px"; + ball.style.top = b * 2 + "px"; - var start = rAF(gameLoop); -}; + start = requestAnimationFrame(gameLoop); +} ``` -### Using axes information - -**TBD (basically the same, except using axes\[i] rather than button\[i].value for both Firefox and Chrome.)** +## Exemple complet : afficher l'état de la manette -## Complete example: Displaying gamepad state - -This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a [working demo](http://luser.github.io/gamepadtest/) and look at the [full source code](https://github.com/luser/gamepadtest) on Github. +Cet exemple illustre comment utiliser l'objet [`Gamepad`](/fr/docs/Web/API/Gamepad) ainsi que les évènements [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) et [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event) afin d'afficher l'état de l'ensemble des manettes connectées au système. Vous pouvez [voir la démonstration fonctionner](https://luser.github.io/gamepadtest/) et consulter [le code source complet sur GitHub](https://github.com/luser/gamepadtest). ```js -var haveEvents = 'GamepadEvent' in window; -var controllers = {}; -var rAF = window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.requestAnimationFrame; +let haveEvents = 'ongamepadconnected' in window; +let controllers = {}; + function connecthandler(e) { addgamepad(e.gamepad); } + function addgamepad(gamepad) { - controllers[gamepad.index] = gamepad; var d = document.createElement("div"); + controllers[gamepad.index] = gamepad; + + let d = document.createElement("div"); d.setAttribute("id", "controller" + gamepad.index); - var t = document.createElement("h1"); + + let t = document.createElement("h1"); t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); d.appendChild(t); - var b = document.createElement("div"); + + let b = document.createElement("div"); b.className = "buttons"; - for (var i=0; i<gamepad.buttons.length; i++) { - var e = document.createElement("span"); + for (let i = 0; i < gamepad.buttons.length; i++) { + let 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"); + + let 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); + + for (let i = 0; i < gamepad.axes.length; i++) { + let p = document.createElement("progress"); + p.className = "axis"; + //p.id = "a" + i; + p.setAttribute("max", "2"); + p.setAttribute("value", "1"); + p.innerHTML = i; + a.appendChild(p); } + d.appendChild(a); - document.getElementById("start").style.display = "none"; + + // Voir https://github.com/luser/gamepadtest/blob/master/index.html + let start = document.getElementById("start"); + if (start) { + start.style.display = "none"; + } + document.body.appendChild(d); - rAF(updateStatus); + requestAnimationFrame(updateStatus); } function disconnecthandler(e) { @@ -257,7 +271,7 @@ function disconnecthandler(e) { } function removegamepad(gamepad) { - var d = document.getElementById("controller" + gamepad.index); + let d = document.getElementById("controller" + gamepad.index); document.body.removeChild(d); delete controllers[gamepad.index]; } @@ -266,45 +280,53 @@ function updateStatus() { if (!haveEvents) { scangamepads(); } + + let i = 0; + let j; + 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; + let controller = controllers[j]; + let d = document.getElementById("controller" + j); + let buttons = d.getElementsByClassName("button"); + + for (i = 0; i < controller.buttons.length; i++) { + let b = buttons[i]; + let val = controller.buttons[i]; + let pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } - var pct = Math.round(val * 100) + "%" + + let pct = Math.round(val * 100) + "%"; b.style.backgroundSize = pct + " " + pct; + if (pressed) { b.className = "button pressed"; - } else { + } 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); + + let axes = d.getElementsByClassName("axis"); + for (i = 0; i < controller.axes.length; i++) { + let a = axes[i]; + a.innerHTML = i + ": " + controller.axes[i].toFixed(4); + a.setAttribute("value", controller.axes[i] + 1); } } - rAF(updateStatus); + + requestAnimationFrame(updateStatus); } function scangamepads() { - var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); - for (var i = 0; i < gamepads.length; i++) { + let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); + for (let i = 0; i < gamepads.length; i++) { if (gamepads[i]) { - if (!(gamepads[i].index in controllers)) { - addgamepad(gamepads[i]); - } else { + if (gamepads[i].index in controllers) { controllers[gamepads[i].index] = gamepads[i]; + } else { + addgamepad(gamepads[i]); } } } @@ -312,15 +334,18 @@ function scangamepads() { window.addEventListener("gamepadconnected", connecthandler); window.addEventListener("gamepaddisconnected", disconnecthandler); + if (!haveEvents) { - setInterval(scangamepads, 500); + setInterval(scangamepads, 500); } ``` -## Specifications +## Spécifications -{{page("/en-US/docs/Gamepad","Specifications")}} +| Spécification | État | Commentaires | +| -------------------------------------------------------- | -------------------- | ------------------- | +| {{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}} | {{Spec2("Gamepad")}} | Définition initiale | -## Browser compatibility +## Compatibilité des navigateurs -{{page("/en-US/docs/Gamepad","Browser_compatibility")}} +{{Compat("api.Gamepad")}} diff --git a/files/fr/web/api/geolocation_api/index.md b/files/fr/web/api/geolocation_api/index.md index 7b3fd6c5ec..5b060d9770 100644 --- a/files/fr/web/api/geolocation_api/index.md +++ b/files/fr/web/api/geolocation_api/index.md @@ -1,238 +1,57 @@ --- -title: Geolocation API (API de géolocalisation) +title: API Geolocation (géolocalisation) slug: Web/API/Geolocation_API -tags: - - API - - GPS - - Geolocation - - Géolocalisation translation_of: Web/API/Geolocation_API --- {{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}} -L'API **Geolocation** (pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations. +L'**API <i lang="en">Geolocation</i>** permet à une personne, si elle le veut, de fournir sa position géographique à une application web. Pour respecter la vie privée, la permission est demandée auprès de l'utilisatrice ou de l'utilisateur avant la récupération des informations de géolocalisation. -## L'objet `geolocation` +Les extensions web qui souhaitent utiliser l'objet `Geolocation` doivent ajouter la permission `geolocation` à leur manifeste. Le système d'exploitation demandera alors à la personne la permission d'accéder à l'emplacement lors de la première fois. -L'API [Geolocation](/fr/docs/Web/API/Geolocation) est publiée via l'objet {{domxref("navigator.geolocation")}}. +## Concepts et utilisation -Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon : +On souhaite parfois utiliser les informations géographiques d'une personne, par exemple pour indiquer son emplacement sur une carte, ou pour afficher des informations pertinentes par rapport au lieu actuel. -```js -if ("geolocation" in navigator) { - /* la géolocalisation est disponible */ -} else { - /* la géolocalisation n'est pas disponible */ -} -``` +L'API <i lang="en">Geolocation</i> s'utilise en appelant [`navigator.geolocation`](/fr/docs/Web/API/Navigator/geolocation). Cela va déclencher la demande de permission avec le navigateur. Lorsque la permission est donnée d'accéder aux données de géolocalisation, le navigateur utilisera le meilleur outil à sa disposition sur l'appareil pour déterminer cette position (par exemple, le GPS). -> **Note :** Pour Firefox 24 et les versions antérieures, `"geolocation" in navigator` renvoyait toujours `true` même si l'API était désactivée. Cela a été corrigé à partir de [Firefox 25](/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility) afin de respecter la spécification ({{bug(884921)}}). +La position géographique peut alors être utilisée dans le code avec : -### Obtenir la position actuelle +- [`Geolocation.getCurrentPosition()`](/fr/docs/Web/API/Geolocation/getCurrentPosition) + - : Qui récupère l'emplacement actuel de l'appareil. +- [`Geolocation.watchPosition()`](/fr/docs/Web/API/Geolocation/watchPosition) + - : Qui enregistre une fonction de rappel qui sera appelée à chaque fois que l'emplacement évolue, en renvoyant la position à jour. -Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de _callback_ est appelée. Il est possible de fournir un deuxième _callback_ afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position. +Dans les deux cas, ces méthodes utilisent jusqu'à trois arguments : -> **Note :** Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS. +- Une fonction de rappel obligatoire pour les cas de succès. + - Si la récupération des informations d'emplacement s'est déroulée sans problème, la fonction de rappel est appelée avec un seul paramètre qui est un objet [`GeolocationPosition`](/fr/docs/Web/API/GeolocationPosition) qui fournit un accès aux données d'emplacement. +- Une fonction de rappel optionnelle pour les cas d'erreur. + - Si la récupération des informations d'emplacement a échoué, la fonction de rappel est appelée avec un seul paramètre qui est un objet [`GeolocationPositionError`](/fr/docs/Web/API/GeolocationPositionError) qui fournit des informations sur l'erreur. +- Un objet optionnel qui fournit des options pour la récupération des données d'emplacement. -```js -navigator.geolocation.getCurrentPosition(function(position) { - faireQqc(position.coords.latitude, position.coords.longitude); -}); -``` +Pour plus d'informations sur l'utilisation de cette API, nous vous conseillons de lire le guide [Utiliser l'API <i lang="en">Geolocation</i>](/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API). -Dans l'exemple ci-avant, la fonction `faireQqc()` sera exécutée quand la localisation sera obtenue. +## Interfaces -### Suivre l'évolution de la position +- [`Geolocation`](/fr/docs/Web/API/Geolocation) + - : Il s'agit de la classe principale de cette API. Elle contient des méthodes pour récupérer la position actuelle, suivre les modifications de position, arrêter de suivre les déplacements. +- [`GeolocationPosition`](/fr/docs/Web/API/GeolocationPosition) + - : Représente la position d'une personne. Une instance de `GeolocationPosition` est renvoyée lors d'un appel réussi à l'une des méthodes de [`Geolocation`](/fr/docs/Web/API/Geolocation), dans une fonction de rappel de réussite. Il contient un horodatage et une instance de [`GeolocationCoordinates`](/fr/docs/Web/API/GeolocationCoordinates). +- [`GeolocationCoordinates`](/fr/docs/Web/API/GeolocationCoordinates) + - : Représente les coordonnées de la position d'une personne. Une instance de `GeolocationCoordinates` contient les informations de latitude, longitude et d'autres informations importantes relatives à l'emplacement. +- [`GeolocationPositionError`](/fr/docs/Web/API/GeolocationPositionError) + - : Un objet `GeolocationPositionError` est renvoyé par un des appels infructueux à l'une des méthodes de [`Geolocation`](/fr/docs/Web/API/Geolocation), dans une fonction de rappel en cas d'erreur. Il contient un code d'erreur et un message. +- [`Navigator.geolocation`](/fr/docs/Web/API/Navigator/geolocation) + - : Le point d'entrée pour cette API. Elle renvoie une instance de [`Geolocation`](/fr/docs/Web/API/Geolocation) à partir de laquelle on peut accéder aux autres fonctionnalités. -Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de _callback_ qui sera appelée avec les informations mises à jour +## Exemples -Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce _callback_ est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée. +Voir le guide [Utiliser l'API <i lang="en">Geolocation</i>](/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API#exemples) pour un exemple de code. -> **Note :** On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. +## Spécifications -```js -var watchID = navigator.geolocation.watchPosition(function(position) { - faireQqc(position.coords.latitude, position.coords.longitude); -}); -``` - -La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position. - -```js -navigator.geolocation.clearWatch(watchID); -``` - -### Paramétrer la réponse - -{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un _callback_ appelé en cas de succès, un deuxième _callback_ (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet [`PositionOptions`](/fr/docs/Web/API/PositionOptions). - -Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à : - -```js -function geo_success(position) { - do_something(position.coords.latitude, position.coords.longitude); -} - -function geo_error() { - alert("Sorry, no position available."); -} - -var geo_options = { - enableHighAccuracy: true, - maximumAge : 30000, - timeout : 27000 -}; - -var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options); -``` - -## Décrire une position - -La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété `coords`. - -{{page("/fr/docs/Web/API/Position")}} - -{{page("/fr/docs/Web/API/Position/coords","Coordinates")}} - -## Gérer les erreurs - -Le _callback_ de gestion des erreurs (s'il est passé à `getCurrentPosition()` ou `watchPosition()`) s'attend à recevoir un objet [`PositionError`](/fr/docs/Web/API/PositionError) comme premier paramètre. - -```js -function errorCallback(error) { - alert('ERROR(' + error.code + '): ' + error.message); -}; -``` - -## Exemple interactif - -```css hidden -body { - padding: 20px; - background-color:#ffffc9 -} - -button { - margin: .5rem 0; -} -``` - -### HTML - -```html -<button id = "find-me">Montrer ma localisation</button><br/> -<p id = "status"></p> -<a id = "map-link" target="_blank"></a> -``` - -### JavaScript - -```js -function geoFindMe() { - - const status = document.querySelector('#status'); - const mapLink = document.querySelector('#map-link'); - - mapLink.href = ''; - mapLink.textContent = ''; - - function success(position) { - const latitude = position.coords.latitude; - const longitude = position.coords.longitude; - - status.textContent = ''; - mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; - mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; - } - - function error() { - status.textContent = 'Unable to retrieve your location'; - } - - if (!navigator.geolocation) { - status.textContent = 'Geolocation is not supported by your browser'; - } else { - status.textContent = 'Locating…'; - navigator.geolocation.getCurrentPosition(success, error); - } - -} - -document.querySelector('#find-me').addEventListener('click', geoFindMe); -``` - -### Résultat - -{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}} - -## Demander la permission - -Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre `pref`. La fonction fournie dans le paramètre de `callback` sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut `true`, le module complémentaire pourra accéder aux données de géolocalisation. - -```js -function prompt(window, pref, message, callback) { - let branch = Components.classes["@mozilla.org/preferences-service;1"] - .getService(Components.interfaces.nsIPrefBranch); - - if (branch.getPrefType(pref) === branch.PREF_STRING) { - switch (branch.getCharPref(pref)) { - case "always": - return callback(true); - case "never": - return callback(false); - } - } - - let done = false; - - function remember(value, result) { - return function() { - done = true; - branch.setCharPref(pref, value); - callback(result); - } - } - - let self = window.PopupNotifications.show( - window.gBrowser.selectedBrowser, - "geolocation", - message, - "geo-notification-icon", - { - label: "Share Location", - accessKey: "S", - callback: function(notification) { - done = true; - callback(true); - } - }, [ - { - label: "Always Share", - accessKey: "A", - callback: remember("always", true) - }, - { - label: "Never Share", - accessKey: "N", - callback: remember("never", false) - } - ], { - eventCallback: function(event) { - if (event === "dismissed") { - if (!done) callback(false); - done = true; - window.PopupNotifications.remove(self); - } - }, - persistWhileVisible: true - }); -} - -prompt(window, - "extensions.foo-addon.allowGeolocation", - "Foo Add-on wants to know your location.", - function callback(allowed) { alert(allowed); }); -``` +{{Specifications("api.Geolocation")}} ## Compatibilité des navigateurs @@ -240,10 +59,10 @@ prompt(window, ### Disponibilité -La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que [Baidu](http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation), [Autonavi](https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation) ou [Tencent](http://lbs.qq.com/tool/component-geolocation.html). Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré. +Comme la détermination de l'emplacement à partir des réseaux Wi-Fi souvent fournie par Google, l'API <i lang="en">Geolocation</i> de base pourrait être indisponible en Chine. Auquel cas, vous pouvez utiliser des fournisseurs tiers comme [Baidu](https://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation), [Autonavi](https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation), ou [Tencent](https://lbs.qq.com/tool/component-geolocation.html). Ces services utilisent l'adresse IP de la personne et/ou une application locale pour déterminer l'emplacement. ## Voir aussi -- {{domxref("navigator.geolocation")}} -- [L'API Geolocation sur w3.org](https://www.w3.org/TR/geolocation-API/) -- [Qui a déplacé ma géolocalisation ? sur le blog Hacks](https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/) +- [Utiliser l'API <i lang="en">Geolocation</i>](/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API) +- [L'API <i lang="en">Geolocation</i> sur w3.org](https://www.w3.org/TR/geolocation-API/) +- [Billet sur le blog Hacks : Qui a déplacé ma géolocalisation ? (en anglais)](https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/) diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md index 7b73db0260..88f901d53d 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.md +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md @@ -1,19 +1,22 @@ --- title: MediaStreamAudioSourceNode slug: Web/API/MediaStreamAudioSourceNode -tags: - - API - - Interface - - MediaStreamAudioSourceNode - - Reference - - Web Audio API translation_of: Web/API/MediaStreamAudioSourceNode +browser-compat: 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`** est un type d'[`AudioNode`](/fr/docs/Web/API/AudioNode) qui traite une source audio dont le média a été récupéré depuis un objet [`MediaStream`](/fr/docs/Web/API/MediaStream), obtenu en utilisant l'API WebRTC ou les API <i lang="en">Media Capture</i> et <i lang="en">Streams</i>. -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. +Le média peut être obtenu depuis un microphone (avec [`getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia)) ou depuis un pair distant pendant un appel WebRTC (avec les pistes audio de [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection)). + +Un nœud `MediaStreamAudioSourceNode` ne possède pas d'entrée et possède une seule sortie. Il est créé avec la méthode [`AudioContext.createMediaStreamSource()`](/fr/docs/Web/API/AudioContext/createMediaStreamSource). + +`MediaStreamAudioSourceNode` utilise l'audio de la _première_ piste [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) dont l'attribut [`kind`](/fr/docs/Web/API/MediaStreamTrack/kind) vaut `audio`. Voir ci-après [l'ordre des pistes](#ordre_des_pistes) pour plus d'informations. + +Le nombre de canaux de sortie correspond au nombre de pistes trouvées sur la piste audio sélectionnée. + +{{InheritanceDiagram}} <table class="properties"> <tbody> @@ -28,10 +31,7 @@ Un `MediaElementSourceNode` n'a pas d'entrée et une seule sortie. On le créé <tr> <th scope="row">Nombre de canaux</th> <td> - Défini par {{domxref("AudioMediaStreamTrack")}} et passé à - la méthode - {{domxref("AudioContext.createMediaStreamSource")}} qui - le créé. + Défini par la première piste audio <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> passée à <a href="/fr/docs/Web/API/AudioContext/createMediaStreamSource"><code>AudioContext.createMediaStreamSource()</code></a> qui a créé le nœud. </td> </tr> </tbody> @@ -39,34 +39,52 @@ Un `MediaElementSourceNode` n'a pas d'entrée et une seule sortie. On le créé ## Constructeur -- {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}} - - : Créé une nouvelle instance de `MediaStreamAudioSourceNode`. +- [`new MediaStreamAudioSourceNode()`](/fr/docs/Web/API/MediaStreamAudioSourceNode/MediaStreamAudioSourceNode) + - : Crée un nouvel objet `MediaStreamAudioSourceNode` avec les options indiquées. ## Propriétés -_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. +_En complément des propriétés suivantes, `MediaStreamAudioSourceNode` hérite des propriétés de l'interface parente, [`AudioNode`](/fr/docs/Web/API/AudioNode)._ + +- [`mediaStream`](/fr/docs/Web/API/MediaStreamAudioSourceNode/mediaStream) {{ReadOnlyInline}} + - : L'objet [`MediaStream`](/fr/docs/Web/API/MediaStream) utilisé pour la construction de ce `MediaStreamAudioSourceNode`. ## Méthodes -_Hérite des méthdoes de son parent,_ _{{domxref("AudioNode")}}_. +_Cette interface hérite des méthodes de son parent, [`AudioNode`](/fr/docs/Web/API/AudioNode)._ + +## Exceptions + +- `InvalidStateError` [`DOMException`](/fr/docs/Web/API/DOMException) + - : Cette exception est levée si le flux indiqué par le paramètre `mediaStream` ne contient pas de piste audio. + +## Notes d'utilisation + +### Ordre des pistes + +Pour l'interface `MediaStreamTrackAudioSourceNode`, l'ordre des pistes audio du flux est déterminé en prenant les pistes pour lesquelles l'attribut [`kind`](/fr/docs/Web/API/MediaStreamTrack/kind) vaut `audio`, en triant ces pistes selon les valeurs de leur propriété [`id`](/fr/docs/Web/API/MediaStreamTrack/id) selon l'ordre des points de code Unicode (ce qui correspond généralement à l'ordre alphabétique ou lexicographique lorsque les identifiants sont des chaînes de caractères alphanumériques simples). + +La **première** piste est donc la piste dont l'identifiant `id` est le premier parmi ceux de toutes les pistes audio selon l'ordre des points de code Unicode. + +Il est toutefois important de noter que cette règle pour l'ordre a été ajoutée après que cette interface a été introduite dans l'API [<i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API). Aussi, mieux vaut ne pas s'appuyer trop sur l'hypothèse que l'ordre sera le même d'un navigateur à l'autre, ou même d'une version à une autre d'un même navigateur. + +L'interface [`MediaStreamTrackAudioSourceNode`](/fr/docs/Web/API/MediaStreamTrackAudioSourceNode) est semblable à `MediaStreamAudioSourceNode`, mais évite ce problème en permettant d'indiquer la piste qu'on souhaite utiliser. ## Exemple -{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}} +Voir [`AudioContext.createMediaStreamSource()`](/fr/docs/Web/API/AudioContext/createMediaStreamSource#exemple) pour un exemple de code qui utilise cet objet. ## Spécifications -| Spécification | Statut | Commentaire | -| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.MediaStreamAudioSourceNode")}} +{{Compat}} ## Voir aussi -- [Utilisation de l'API Web Audio](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) -- [WebRTC API](/en-US/docs/Web/API/WebRTC_API) -- [API de capture et de diffusion de médias (Media Streams)](/en-US/docs/Web/API/Media_Streams_API) -- {{domxref("MediaStreamTrackAudioSourceNode")}} +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) +- [L'API WebRTC](/fr/docs/Web/API/WebRTC_API) +- [Les API <i lang="en">Media Capture</i> et <i lang="en">Streams</i>](/fr/docs/Web/API/Media_Streams_API) +- [`MediaStreamTrackAudioSourceNode`](/fr/docs/Web/API/MediaStreamTrackAudioSourceNode) diff --git a/files/fr/web/api/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md index be9af7828d..974f69e5e6 100644 --- a/files/fr/web/api/navigator/getusermedia/index.md +++ b/files/fr/web/api/navigator/getusermedia/index.md @@ -1,61 +1,54 @@ --- -title: NavigatorUserMedia.getUserMedia() +title: Navigator.getUserMedia() slug: Web/API/Navigator/getUserMedia -tags: - - API - - Deprecated - - Media - - WebRTC - - getusermedia translation_of: Web/API/Navigator/getUserMedia original_slug: NavigatorUserMedia.getUserMedia +browser-compat: api.Navigator.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 méthode obsolète **Navigator.getUserMedia()** demande à la personne la permission d'utiliser une entrée vidéo (par exemple une caméra ou un écran partagé) et une entrée audio (par exemple un microphone) comme source pour un flux média ([`MediaStream`](/fr/docs/Web/API/MediaStream)). -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 la permission est accordée, un objet `MediaStream` dont les pistes proviennent de ces appareils est transmis à la fonction de rappel. Si la permission est refusée, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, c'est la fonction de rappel d'erreur qui est exécutée, avec comme paramètre un objet [`MediaStreamError`](/fr/docs/Web/API/MediaStreamError) qui décrit l'erreur qui vient de se produire. Si l'utilisatrice ou l'utilisateur ne fait aucun choix, aucune des deux fonctions de rappel n'est exécutée. -> **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")}}. +> **Note :** Il s'agit d'une méthode historique, veuillez utiliser la méthode [`navigator.mediaDevices.getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de fonctions de rappels pour celle-ci est indiqué comme obsolète dans la spécification qui encourage l'utilisation de la nouvelle version utilisant les promesses. ## Syntaxe - navigator.getUserMedia(constraints, successCallback, errorCallback); +```js +navigator.getUserMedia(constraints, successCallback, errorCallback); +``` ### Paramètres -- constraints - - : Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section [constraints](/fr/docs/Web/API/MediaDevices/getUserMedia#Syntaxe) de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article [Capacités, constraintes, et configurations](/fr/docs/Web/API/Media_Streams_API/Constraints). -- successCallback +- `constraints` + - : Un objet spécifiant les types de médias à récupérer, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section [contraintes](/fr/docs/Web/API/MediaDevices/getUserMedia#paramètres) de la méthode [`MediaDevices.getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia), ainsi que l'article [Capacités, constraintes, et configurations](/fr/docs/Web/API/Media_Streams_API/Constraints). +- `successCallback` - - : Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant: + - : Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appelée avec un paramètre : l'objet [`MediaStream`](/fr/docs/Web/API/MediaStream) qui contient les flux de médias. La fonction de rappel peut alors affecter le flux à l'objet souhaité (par exemple un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video)), comme dans l'exemple suivant : ```js function(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { - // Do something with the video here. + // Faire quelque chose avec la vidéo. }; } ``` -- 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. +- `errorCallback` + - : Lorsque l'appel échoue, la fonction indiquée par cet argument est appelée, avec comme seul paramètre l'objet [`MediaStreamError`](/fr/docs/Web/API/MediaStreamError). Cet objet ressemble à [`DOMException`](/fr/docs/Web/API/DOMException). ### Valeur de retour -{{domxref("undefined")}}. - -### Erreurs +[`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined). -{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}} - -## **Exemples** +## Exemples ### 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 d'utilisation de `getUserMedia()` qui contient notamment les techniques pour gérer la compatibilité avec les différents préfixes des navigateurs. On notera bien que ce qui suit correspond à la façon déconseillée de procéder. Consultez [ces exemples](/fr/docs/Web/API/MediaDevices/getUserMedia#taux_dimages) de la page [`MediaDevices.getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) pour de meilleures pratiques. ```js navigator.getUserMedia = navigator.getUserMedia || @@ -72,17 +65,17 @@ if (navigator.getUserMedia) { }; }, function(err) { - console.log("The following error occurred: " + err.name); + console.log("L'erreur suivante s'est produite : " + err.name); } ); } else { - console.log("getUserMedia not supported"); + console.log("getUserMedia n'est pas pris en charge"); } ``` ## Permissions -Pour utiliser `getUserMedia()` dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest. +Pour utiliser `getUserMedia()` dans une application installable, vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifeste. ```js "permissions": { @@ -95,23 +88,17 @@ 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. - -## Spécifications - -| Spécifications | Statut | Commentaire | -| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}} | {{Spec2('Media Capture')}} | Définition initiale. | +Voir [`permission: audio-capture`](/fr/docs/Web/Apps/Developing/App_permissions#audio-capture) et [`permission: video-capture`](/fr/docs/Web/Apps/Developing/App_permissions#video-capture) pour plus d'informations. ## Compatibilité des navigateurs -> **Attention :** Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place. +> **Attention :** Du nouveau code devrait utiliser [`MediaDevices.getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) à la place. -{{Compat("api.Navigator.getUserMedia")}} +{{Compat}} ## 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. +- [`MediaDevices.getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) qui remplace cette méthode dépréciée. +- [La page d'introduction à l'API WebRTC](/fr/docs/Web/API/WebRTC_API) +- L'API [<i lang="en">MediaStream</i>](/fr/docs/Web/API/Media_Streams_API) pour les flux média +- [Prendre des photos avec la webcam](/fr/docs/Web/API/WebRTC_API/Taking_still_photos) - un tutoriel sur l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md index d49ab08b7a..43c05b7340 100644 --- a/files/fr/web/api/periodicwave/index.md +++ b/files/fr/web/api/periodicwave/index.md @@ -1,51 +1,40 @@ --- title: PeriodicWave slug: Web/API/PeriodicWave -tags: - - API - - Interface - - Media - - PeriodicWave - - Reference - - Web Audio - - Web Audio API - - sinusoïdal - - sinusoïde translation_of: Web/API/PeriodicWave +browser-compat: api.PeriodicWave --- -{{ APIRef("Web Audio API") }} +{{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'interface **`PeriodicWave`** définit une forme d'onde périodique qui peut être utilisée pour modeler la sortie d'un nœud [`OscillatorNode`](/fr/docs/Web/API/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()")}}. +Un objet `PeriodicWave` ne possède ni entrée ni sortie. Il est utilisé pour définir des oscillateurs personnalisés lors d'appels à [`OscillatorNode.setPeriodicWave()`](/fr/docs/Web/API/OscillatorNode/setPeriodicWave). L'objet `PeriodicWave` lui-même est créé/renvoyé par [`BaseAudioContext.createPeriodicWave`](/fr/docs/Web/API/BaseAudioContext/createPeriodicWave). ## 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()")}}. +- [`PeriodicWave()`](/fr/docs/Web/API/PeriodicWave/PeriodicWave) + - : Crée un nouvel objet `PeriodicWave` qui utilise les valeurs par défaut pour l'ensemble des propriétés. Si vous souhaitez utiliser des valeurs adaptées, il faudra utiliser la méthode de création [`BaseAudioContext.createPeriodicWave`](/fr/docs/Web/API/BaseAudioContext/createPeriodicWave) à la place. ## Propriétés -_Aucune; par ailleurs, `PeriodicWave` n'hérite d'aucune propriété._ +_Aucune, et `PeriodicWave` n'hérite d'aucune autre propriété._ ## Méthodes -_Aucune; par ailleurs, `PeriodicWave` n'hérite d'aucune méthode._ +_Aucune, et `PeriodicWave` n'hérite d'aucune autre méthode._ ## Exemple -{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}} +Voir [`BaseAudioContext.createPeriodicWave`](/fr/docs/Web/API/BaseAudioContext/createPeriodicWave) pour un exemple de code simple qui illustre comment créer un objet `PeriodicWave` contenant une onde en sinus. ## Spécifications -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------ | ------------------------------------ | ------- | -| {{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}} | {{Spec2('Web Audio API')}} | | +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("api.PeriodicWave")}} +{{Compat}} ## Voir aussi -- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) +- [Utiliser l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/webglrenderingcontext/index.md b/files/fr/web/api/webglrenderingcontext/index.md index 4fd4ec5792..199660eab1 100644 --- a/files/fr/web/api/webglrenderingcontext/index.md +++ b/files/fr/web/api/webglrenderingcontext/index.md @@ -1,327 +1,307 @@ --- title: WebGLRenderingContext slug: Web/API/WebGLRenderingContext -tags: - - NeedsTranslation - - TopicStub - - WebGL - - WebGLRenderingContext translation_of: Web/API/WebGLRenderingContext +browser-compat: api.WebGLRenderingContext --- -{{APIRef("WebGL")}}L'interface **WebGLRenderingContext** fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}**.** +{{APIRef("WebGL")}} -Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en spécifiant "webgl" en paramètre : +L'interface **`WebGLRenderingContext`** fournit une interface pour le contexte de rendu graphique OpenGL ES 2.0 de la surface de dessin fournie par un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). + +Pour obtenir un accès à un contexte WebGL pour le rendu graphique 2D et/ou 3D, on appellera [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur un élément `<canvas>` en fournissant la chaîne de caractères `webgl` : ```js -var canvas = document.getElementById('myCanvas'); -var gl = canvas.getContext('webgl'); +let canvas = document.getElementById('myCanvas'); +let gl = canvas.getContext('webgl'); ``` -Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur. - -Le [tutoriel WebGL](/fr/docs/Web/API/WebGL_API/Tutorial) contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL. - -## Constants - -See the [WebGL constants](/en-US/docs/Web/API/WebGL_API/Constants) page. - -## The WebGL context - -The following properties and methods provide general information and functionality to deal with the WebGL context: - -- {{domxref("WebGLRenderingContext.canvas")}} - - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. -- {{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}} - - : Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas. -- {{domxref("WebGLRenderingContext.drawingBufferWidth")}} - - : The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context. -- {{domxref("WebGLRenderingContext.drawingBufferHeight")}} - - : The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context. -- {{domxref("WebGLRenderingContext.getContextAttributes()")}} - - : Returns a `WebGLContextAttributes` object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost. -- {{domxref("WebGLRenderingContext.isContextLost()")}} - - : Returns `true` if the context is lost, otherwise returns `false`. - -## Viewing and clipping - -- {{domxref("WebGLRenderingContext.scissor()")}} - - : Defines the scissor box. -- {{domxref("WebGLRenderingContext.viewport()")}} - - : Sets the viewport. - -## State information - -- {{domxref("WebGLRenderingContext.activeTexture()")}} - - : Selects the active texture unit. -- {{domxref("WebGLRenderingContext.blendColor()")}} - - : Sets the source and destination blending factors. -- {{domxref("WebGLRenderingContext.blendEquation()")}} - - : Sets both the RGB blend equation and alpha blend equation to a single equation. -- {{domxref("WebGLRenderingContext.blendEquationSeparate()")}} - - : Sets the RGB blend equation and alpha blend equation separately. -- {{domxref("WebGLRenderingContext.blendFunc()")}} - - : Defines which function is used for blending pixel arithmetic. -- {{domxref("WebGLRenderingContext.blendFuncSeparate()")}} - - : Defines which function is used for blending pixel arithmetic for RGB and alpha components separately. -- {{domxref("WebGLRenderingContext.clearColor()")}} - - : Specifies the color values used when clearing color buffers. -- {{domxref("WebGLRenderingContext.clearDepth()")}} - - : Specifies the depth value used when clearing the depth buffer. -- {{domxref("WebGLRenderingContext.clearStencil()")}} - - : Specifies the stencil value used when clearing the stencil buffer. -- {{domxref("WebGLRenderingContext.colorMask()")}} - - : Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}. -- {{domxref("WebGLRenderingContext.cullFace()")}} - - : Specifies whether or not front- and/or back-facing polygons can be culled. -- {{domxref("WebGLRenderingContext.depthFunc()")}} - - : Specifies a function that compares incoming pixel depth to the current depth buffer value. -- {{domxref("WebGLRenderingContext.depthMask()")}} - - : Sets whether writing into the depth buffer is enabled or disabled. -- {{domxref("WebGLRenderingContext.depthRange()")}} - - : Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates. -- {{domxref("WebGLRenderingContext.disable()")}} - - : Disables specific WebGL capabilities for this context. -- {{domxref("WebGLRenderingContext.enable()")}} - - : Enables specific WebGL capabilities for this context. -- {{domxref("WebGLRenderingContext.frontFace()")}} - - : Specifies whether polygons are front- or back-facing by setting a winding orientation. -- {{domxref("WebGLRenderingContext.getParameter()")}} - - : Returns a value for the passed parameter name. -- {{domxref("WebGLRenderingContext.getError()")}} - - : Returns error information. -- {{domxref("WebGLRenderingContext.hint()")}} - - : Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation. -- {{domxref("WebGLRenderingContext.isEnabled()")}} - - : Tests whether a specific WebGL capability is enabled or not for this context. -- {{domxref("WebGLRenderingContext.lineWidth()")}} - - : Sets the line width of rasterized lines. -- {{domxref("WebGLRenderingContext.pixelStorei()")}} - - : Specifies the pixel storage modes -- {{domxref("WebGLRenderingContext.polygonOffset()")}} - - : Specifies the scale factors and units to calculate depth values. -- {{domxref("WebGLRenderingContext.sampleCoverage()")}} - - : Specifies multi-sample coverage parameters for anti-aliasing effects. -- {{domxref("WebGLRenderingContext.stencilFunc()")}} - - : Sets the both front and back function and reference value for stencil testing. -- {{domxref("WebGLRenderingContext.stencilFuncSeparate()")}} - - : Sets the front and/or back function and reference value for stencil testing. -- {{domxref("WebGLRenderingContext.stencilMask()")}} - - : Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes. -- {{domxref("WebGLRenderingContext.stencilMaskSeparate()")}} - - : Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes. -- {{domxref("WebGLRenderingContext.stencilOp()")}} - - : Sets both the front and back-facing stencil test actions. -- {{domxref("WebGLRenderingContext.stencilOpSeparate()")}} - - : Sets the front and/or back-facing stencil test actions. - -## Buffers - -- {{domxref("WebGLRenderingContext.bindBuffer()")}} - - : Binds a `WebGLBuffer` object to a given target. -- {{domxref("WebGLRenderingContext.bufferData()")}} - - : Updates buffer data. -- {{domxref("WebGLRenderingContext.bufferSubData()")}} - - : Updates buffer data starting at a passed offset. -- {{domxref("WebGLRenderingContext.createBuffer()")}} - - : Creates a `WebGLBuffer` object. -- {{domxref("WebGLRenderingContext.deleteBuffer()")}} - - : Deletes a `WebGLBuffer` object. -- {{domxref("WebGLRenderingContext.getBufferParameter()")}} - - : Returns information about the buffer. -- {{domxref("WebGLRenderingContext.isBuffer()")}} - - : Returns a Boolean indicating if the passed buffer is valid. - -## Framebuffers - -- {{domxref("WebGLRenderingContext.bindFramebuffer()")}} - - : Binds a `WebGLFrameBuffer` object to a given target. -- {{domxref("WebGLRenderingContext.checkFramebufferStatus()")}} - - : Returns the status of the framebuffer. -- {{domxref("WebGLRenderingContext.createFramebuffer()")}} - - : Creates a `WebGLFrameBuffer` object. -- {{domxref("WebGLRenderingContext.deleteFramebuffer()")}} - - : Deletes a `WebGLFrameBuffer` object. -- {{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}} - - : Attaches a `WebGLRenderingBuffer` object to a `WebGLFrameBuffer` object. -- {{domxref("WebGLRenderingContext.framebufferTexture2D()")}} - - : Attaches a textures image to a `WebGLFrameBuffer` object. -- {{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}} - - : Returns information about the framebuffer. -- {{domxref("WebGLRenderingContext.isFramebuffer()")}} - - : Returns a Boolean indicating if the passed `WebGLFrameBuffer` object is valid. -- {{domxref("WebGLRenderingContext.readPixels()")}} - - : Reads a block of pixels from the `WebGLFrameBuffer`. - -## Renderbuffers - -- {{domxref("WebGLRenderingContext.bindRenderbuffer()")}} - - : Binds a `WebGLRenderBuffer` object to a given target. -- {{domxref("WebGLRenderingContext.createRenderbuffer()")}} - - : Creates a `WebGLRenderBuffer` object. -- {{domxref("WebGLRenderingContext.deleteRenderbuffer()")}} - - : Deletes a `WebGLRenderBuffer` object. -- {{domxref("WebGLRenderingContext.getRenderbufferParameter()")}} - - : Returns information about the renderbuffer. -- {{domxref("WebGLRenderingContext.isRenderbuffer()")}} - - : Returns a Boolean indicating if the passed `WebGLRenderingBuffer` is valid. -- {{domxref("WebGLRenderingContext.renderbufferStorage()")}} - - : Creates a renderbuffer data store. +Une fois le contexte de rendu WebGL obtenu pour le canevas, on peut l'utiliser pour le rendu graphique d'objets à l'intérieur de ce canevas. [Le tutoriel WebGL](/fr/docs/Web/API/WebGL_API/Tutorial) contient de plus amples informations, exemples et ressources pour débuter avec WebGL. + +Si vous avez besoin d'un contexte WebGL 2.0, voyez [`WebGL2RenderingContext`](/fr/docs/Web/API/WebGL2RenderingContext) qui permet d'utiliser une implémentation avec des graphismes OpenGL ES 3.0. + +## Constantes + +Voir la page sur [les constantes WebGL](/fr/docs/Web/API/WebGL_API/Constants). + +## Le contexte WebGL + +Les propriétés et méthodes suivantes fournissent des informations et fonctionnalités générales pour manipuler le contexte WebGL : + +- [`WebGLRenderingContext.canvas`](/fr/docs/Web/API/WebGLRenderingContext/canvas) + - : Une référence en lecture seule vers l'objet [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement) correspondant. Peut valoir [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) si le contexte n'est pas associé à un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). +- [`WebGLRenderingContext.commit()`](/fr/docs/Web/API/WebGLRenderingContext/commit) {{experimental_inline}} + - : Pousse les <i lang="en">frames</i> sur l'élément [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement), si le contexte n'est pas directement rattaché à un canevas donné. +- [`WebGLRenderingContext.drawingBufferWidth`](/fr/docs/Web/API/WebGLRenderingContext/drawingBufferWidth) + - : La largeur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la largeur de l'élément canevas associé à ce contexte. +- [`WebGLRenderingContext.drawingBufferHeight`](/fr/docs/Web/API/WebGLRenderingContext/drawingBufferHeight) + - : La hauteur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la hauteur de l'élément canevas associé à ce contexte. +- [`WebGLRenderingContext.getContextAttributes()`](/fr/docs/Web/API/WebGLRenderingContext/getContextAttributes) + - : Renvoie un objet `WebGLContextAttributes` qui contient les paramètres de contextes réels. Peut renvoyer [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null) si le contexte est perdu. +- [`WebGLRenderingContext.isContextLost()`](/fr/docs/Web/API/WebGLRenderingContext/isContextLost) + - : Renvoie `true` si le contexte est perdu et `false` sinon. +- [`WebGLRenderingContext.makeXRCompatible()`](/fr/docs/Web/API/WebGLRenderingContext/makeXRCompatible) + - : S'assure que le contexte est compatible avec le matériel de réalité mixte, recréant si besoin le contexte avec une nouvelle configuration. Cette méthode peut être utilisée pour démarrer une application dont l'affichage commence en 2D puis passe ensuite dans un mode de réalité virtuelle ou augmentée. + +## Vue et rognage + +- [`WebGLRenderingContext.scissor()`](/fr/docs/Web/API/WebGLRenderingContext/scissor) + - : Définit la boîte de découpe (<i lang="en">scissor box</i>). +- [`WebGLRenderingContext.viewport()`](/fr/docs/Web/API/WebGLRenderingContext/viewport) + - : Définit la zone d'affichage (<i lang="en">viewport</i>). + +## Informations sur l'état + +- [`WebGLRenderingContext.activeTexture()`](/fr/docs/Web/API/WebGLRenderingContext/activeTexture) + - : Sélectionne l'unité de texture active. +- [`WebGLRenderingContext.blendColor()`](/fr/docs/Web/API/WebGLRenderingContext/blendColor) + - : Définit la source et la destination des facteurs de fusion. +- [`WebGLRenderingContext.blendEquation()`](/fr/docs/Web/API/WebGLRenderingContext/blendEquation) + - : Définit l'équation de fusion RGB et l'équation de fusion alpha avec une seule équation. +- [`WebGLRenderingContext.blendEquationSeparate()`](/fr/docs/Web/API/WebGLRenderingContext/blendEquationSeparate) + - : Définit l'équation de fusion RGB et l'équation de fusion alpha séparément. +- [`WebGLRenderingContext.blendFunc()`](/fr/docs/Web/API/WebGLRenderingContext/blendFunc) + - : Definit la fonction utilisée pour l'arithmétique de la fusion des pixels. +- [`WebGLRenderingContext.blendFuncSeparate()`](/fr/docs/Web/API/WebGLRenderingContext/blendFuncSeparate) + - : Definit séparément la fonction utilisée pour l'arithmétique de la fusion des pixels pour les composantes RGB d'une part et alpha d'autre part. +- [`WebGLRenderingContext.clearColor()`](/fr/docs/Web/API/WebGLRenderingContext/clearColor) + - : Définit les valeurs de couleur utilisées lors du nettoyage des tampons de couleur. +- [`WebGLRenderingContext.clearDepth()`](/fr/docs/Web/API/WebGLRenderingContext/clearDepth) + - : Définit la valeur de profondeur utilisée lors du nettoyage du tampon de profondeur. +- [`WebGLRenderingContext.clearStencil()`](/fr/docs/Web/API/WebGLRenderingContext/clearStencil) + - : Définit la valeur du pochoir utilisée lors du nettoyage du tampon de pochoir. +- [`WebGLRenderingContext.colorMask()`](/fr/docs/Web/API/WebGLRenderingContext/colorMask) + - : Définit les composantes de couleur à activer ou à désactiver lors du dessin ou du rendu dans un objet [`WebGLFramebuffer`](/fr/docs/Web/API/WebGLFramebuffer). +- [`WebGLRenderingContext.cullFace()`](/fr/docs/Web/API/WebGLRenderingContext/cullFace) + - : Indique si les polygones masqués en face arrière ou en face avant sont coupés (voir [l'article Wikipédia sur <i lang="en">Back-face culling</i>](https://en.wikipedia.org/wiki/Back-face_culling)). +- [`WebGLRenderingContext.depthFunc()`](/fr/docs/Web/API/WebGLRenderingContext/depthFunc) + - : Indique une fonction qui compare la profondeur du pixel à venir avec la valeur actuelle de profondeur sur le tampon. +- [`WebGLRenderingContext.depthMask()`](/fr/docs/Web/API/WebGLRenderingContext/depthMask) + - : Indique si l'écriture sur le tampon de profondeur est activée ou désactivée. +- [`WebGLRenderingContext.depthRange()`](/fr/docs/Web/API/WebGLRenderingContext/depthRange) + - : Indique la correspondance pour l'intervalle de profondeur entre les coordonnées normalisées de l'appareil et les coordonnées de la fenêtre ou de la zone d'affichage. +- [`WebGLRenderingContext.disable()`](/fr/docs/Web/API/WebGLRenderingContext/disable) + - : Désactive les capacités spécifiques à WebGL pour ce contexte. +- [`WebGLRenderingContext.enable()`](/fr/docs/Web/API/WebGLRenderingContext/enable) + - : Active les capacités spécifiques à WebGL pour ce contexte. +- [`WebGLRenderingContext.frontFace()`](/fr/docs/Web/API/WebGLRenderingContext/frontFace) + - : Indique si les polygones font face vers l'avant ou vers l'arrière en indiquant une orientation d'enroulement. +- [`WebGLRenderingContext.getParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getParameter) + - : Renvoie une valeur pour le nom de paramètre passé en argument. +- [`WebGLRenderingContext.getError()`](/fr/docs/Web/API/WebGLRenderingContext/getError) + - : Renvoie des informations sur l'erreur. +- [`WebGLRenderingContext.hint()`](/fr/docs/Web/API/WebGLRenderingContext/hint) + - : Définit les indications pour certains comportements. L'interprétation de ces indications dépend de l'implémentation. +- [`WebGLRenderingContext.isEnabled()`](/fr/docs/Web/API/WebGLRenderingContext/isEnabled) + - : Teste si une fonctionnalité WebGL donnée est activée ou non pour ce contexte. +- [`WebGLRenderingContext.lineWidth()`](/fr/docs/Web/API/WebGLRenderingContext/lineWidth) + - : Définit la largeur des lignes pour les lignes matricielles. +- [`WebGLRenderingContext.pixelStorei()`](/fr/docs/Web/API/WebGLRenderingContext/pixelStorei) + - : Définit le mode de stockage des pixels. +- [`WebGLRenderingContext.polygonOffset()`](/fr/docs/Web/API/WebGLRenderingContext/polygonOffset) + - : Définit les facteurs d'échelle et les unités pour calculer les valeurs de profondeur. +- [`WebGLRenderingContext.sampleCoverage()`](/fr/docs/Web/API/WebGLRenderingContext/sampleCoverage) + - : Définit les paramètres de couverture multi-échantillonnage pour les effets anti-crénelage. +- [`WebGLRenderingContext.stencilFunc()`](/fr/docs/Web/API/WebGLRenderingContext/stencilFunc) + - : Définit la fonction et la valeur de référence pour les fonctions avant et arrière pour le test du pochoir. +- [`WebGLRenderingContext.stencilFuncSeparate()`](/fr/docs/Web/API/WebGLRenderingContext/stencilFuncSeparate) + - : Définit la fonction avant et/ou arrière et la valeur de référence pour le test du pochoir. +- [`WebGLRenderingContext.stencilMask()`](/fr/docs/Web/API/WebGLRenderingContext/stencilMask) + - : Contrôle l'activation/la désactivation des modes d'écriture avant et arrière pour les bits individuels sur les plans du pochoir. +- [`WebGLRenderingContext.stencilMaskSeparate()`](/fr/docs/Web/API/WebGLRenderingContext/stencilMaskSeparate) + - : Contrôle l'activation/la désactivation des modes d'écriture avant et/ou arrière pour les bits individuels sur les plans du pochoir. +- [`WebGLRenderingContext.stencilOp()`](/fr/docs/Web/API/WebGLRenderingContext/stencilOp) + - : Définit les actions de test du pochoir pour l'avant et pour l'arrière. +- [`WebGLRenderingContext.stencilOpSeparate()`](/fr/docs/Web/API/WebGLRenderingContext/stencilOpSeparate) + - : Définit les actions de test du pochoir pour l'avant et/ou pour l'arrière. + +## Tampons + +- [`WebGLRenderingContext.bindBuffer()`](/fr/docs/Web/API/WebGLRenderingContext/bindBuffer) + - : Lie un objet `WebGLBuffer` à une cible donnée. +- [`WebGLRenderingContext.bufferData()`](/fr/docs/Web/API/WebGLRenderingContext/bufferData) + - : Met à jour les données du tampon. +- [`WebGLRenderingContext.bufferSubData()`](/fr/docs/Web/API/WebGLRenderingContext/bufferSubData) + - : Met à jour les données du tampon à partir d'un décalage donné. +- [`WebGLRenderingContext.createBuffer()`](/fr/docs/Web/API/WebGLRenderingContext/createBuffer) + - : Crée un objet `WebGLBuffer`. +- [`WebGLRenderingContext.deleteBuffer()`](/fr/docs/Web/API/WebGLRenderingContext/deleteBuffer) + - : Supprime un objet `WebGLBuffer`. +- [`WebGLRenderingContext.getBufferParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getBufferParameter) + - : Renvoie des informations à propos du tampon. +- [`WebGLRenderingContext.isBuffer()`](/fr/docs/Web/API/WebGLRenderingContext/isBuffer) + - : Renvoie un booléen indiquant si le tampon passé est valide. + +## Tampons d'image (<i lang="en">framebuffers</i>) + +- [`WebGLRenderingContext.bindFramebuffer()`](/fr/docs/Web/API/WebGLRenderingContext/bindFramebuffer) + - : Lie un objet `WebGLFrameBuffer` à une cible donnée. +- [`WebGLRenderingContext.checkFramebufferStatus()`](/fr/docs/Web/API/WebGLRenderingContext/checkFramebufferStatus) + - : Renvoie le statut du tampon d'image (<i lang="en">framebuffer</i>). +- [`WebGLRenderingContext.createFramebuffer()`](/fr/docs/Web/API/WebGLRenderingContext/createFramebuffer) + - : Crée un objet `WebGLFrameBuffer`. +- [`WebGLRenderingContext.deleteFramebuffer()`](/fr/docs/Web/API/WebGLRenderingContext/deleteFramebuffer) + - : Supprime un objet `WebGLFrameBuffer`. +- [`WebGLRenderingContext.framebufferRenderbuffer()`](/fr/docs/Web/API/WebGLRenderingContext/framebufferRenderbuffer) + - : Attache un objet `WebGLRenderingBuffer` à un objet `WebGLFrameBuffer`. +- [`WebGLRenderingContext.framebufferTexture2D()`](/fr/docs/Web/API/WebGLRenderingContext/framebufferTexture2D) + - : Attache une image de texture à un objet `WebGLFrameBuffer`. +- [`WebGLRenderingContext.getFramebufferAttachmentParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getFramebufferAttachmentParameter) + - : Renvoie des informations à propos du tampon d'image (<i lang="en">framebuffer</i>). +- [`WebGLRenderingContext.isFramebuffer()`](/fr/docs/Web/API/WebGLRenderingContext/isFramebuffer) + - : Renvoie un booléen indiquant si l'objet `WebGLFrameBuffer` passé est valide. +- [`WebGLRenderingContext.readPixels()`](/fr/docs/Web/API/WebGLRenderingContext/readPixels) + - : Lit un bloc de pixels à partir du `WebGLFrameBuffer`. + +## Tampons de rendu + +- [`WebGLRenderingContext.bindRenderbuffer()`](/fr/docs/Web/API/WebGLRenderingContext/bindRenderbuffer) + - : Lie un objet `WebGLRenderBuffer` à une cible donnée. +- [`WebGLRenderingContext.createRenderbuffer()`](/fr/docs/Web/API/WebGLRenderingContext/createRenderbuffer) + - : Crée un objet `WebGLRenderBuffer`. +- [`WebGLRenderingContext.deleteRenderbuffer()`](/fr/docs/Web/API/WebGLRenderingContext/deleteRenderbuffer) + - : Supprime un objet `WebGLRenderBuffer`. +- [`WebGLRenderingContext.getRenderbufferParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getRenderbufferParameter) + - : Renvoie des informations à propos du tampon de rendu. +- [`WebGLRenderingContext.isRenderbuffer()`](/fr/docs/Web/API/WebGLRenderingContext/isRenderbuffer) + - : Renvoie un booléen indiquant si l'objet `WebGLRenderingBuffer` passé est valide. +- [`WebGLRenderingContext.renderbufferStorage()`](/fr/docs/Web/API/WebGLRenderingContext/renderbufferStorage) + - : Crée un magasin de données pour le tampon de rendu. ## Textures -- {{domxref("WebGLRenderingContext.bindTexture()")}} - - : Binds a `WebGLTexture` object to a given target. -- {{domxref("WebGLRenderingContext.compressedTexImage2D()")}} - - : Specifies a 2D texture image in a compressed format. -- {{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}} - - : Specifies a 2D texture sub-image in a compressed format. -- {{domxref("WebGLRenderingContext.copyTexImage2D()")}} - - : Copies a 2D texture image. -- {{domxref("WebGLRenderingContext.copyTexSubImage2D()")}} - - : Copies a 2D texture sub-image. -- {{domxref("WebGLRenderingContext.createTexture()")}} - - : Creates a `WebGLTexture` object. -- {{domxref("WebGLRenderingContext.deleteTexture()")}} - - : Deletes a `WebGLTexture` object. -- {{domxref("WebGLRenderingContext.generateMipmap()")}} - - : Generates a set of mipmaps for a `WebGLTexture` object. -- {{domxref("WebGLRenderingContext.getTexParameter()")}} - - : Returns information about the texture. -- {{domxref("WebGLRenderingContext.isTexture()")}} - - : Returns a Boolean indicating if the passed `WebGLTexture` is valid. -- {{domxref("WebGLRenderingContext.texImage2D()")}} - - : Specifies a 2D texture image. -- {{domxref("WebGLRenderingContext.texSubImage2D()")}} - - : Updates a sub-rectangle of the current `WebGLTexture`. -- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}} - - : Sets texture parameters. -- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}} - - : Sets texture parameters. - -## Programs and shaders - -- {{domxref("WebGLRenderingContext.attachShader()")}} - - : Attaches a `WebGLShader` to a `WebGLProgram`. -- {{domxref("WebGLRenderingContext.bindAttribLocation()")}} - - : Binds a generic vertex index to a named attribute variable. -- {{domxref("WebGLRenderingContext.compileShader()")}} - - : Compiles a `WebGLShader`. -- {{domxref("WebGLRenderingContext.createProgram()")}} - - : Creates a `WebGLProgram`. -- {{domxref("WebGLRenderingContext.createShader()")}} - - : Creates a `WebGLShader`. -- {{domxref("WebGLRenderingContext.deleteProgram()")}} - - : Deletes a `WebGLProgram`. -- {{domxref("WebGLRenderingContext.deleteShader()")}} - - : Deletes a `WebGLShader`. -- {{domxref("WebGLRenderingContext.detachShader()")}} - - : Detaches a `WebGLShader`. -- {{domxref("WebGLRenderingContext.getAttachedShaders()")}} - - : Returns a list of `WebGLShader` objects attached to a `WebGLProgram`. -- {{domxref("WebGLRenderingContext.getProgramParameter()")}} - - : Returns information about the program. -- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}} - - : Returns the information log for a `WebGLProgram` object. -- {{domxref("WebGLRenderingContext.getShaderParameter()")}} - - : Returns information about the shader. -- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}} - - : Returns a `WebGLShaderPrecisionFormat` object describing the precision for the numeric format of the shader. -- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}} - - : Returns the information log for a `WebGLShader` object. -- {{domxref("WebGLRenderingContext.getShaderSource()")}} - - : Returns the source code of a `WebGLShader` as a string. -- {{domxref("WebGLRenderingContext.isProgram()")}} - - : Returns a Boolean indicating if the passed `WebGLProgram` is valid. -- {{domxref("WebGLRenderingContext.isShader()")}} - - : Returns a Boolean indicating if the passed `WebGLShader` is valid. -- {{domxref("WebGLRenderingContext.linkProgram()")}} - - : Links the passed `WebGLProgram` object. -- {{domxref("WebGLRenderingContext.shaderSource()")}} - - : Sets the source code in a `WebGLShader`. -- {{domxref("WebGLRenderingContext.useProgram()")}} - - : Uses the specified `WebGLProgram` as part the current rendering state. -- {{domxref("WebGLRenderingContext.validateProgram()")}} - - : Validates a `WebGLProgram`. - -## Uniforms and attributes - -- {{domxref("WebGLRenderingContext.disableVertexAttribArray()")}} - - : Disables a vertex attribute array at a given position. -- {{domxref("WebGLRenderingContext.enableVertexAttribArray()")}} - - : Enables a vertex attribute array at a given position. -- {{domxref("WebGLRenderingContext.getActiveAttrib()")}} - - : Returns information about an active attribute variable. -- {{domxref("WebGLRenderingContext.getActiveUniform()")}} - - : Returns information about an active uniform variable. -- {{domxref("WebGLRenderingContext.getAttribLocation()")}} - - : Returns the location of an attribute variable. -- {{domxref("WebGLRenderingContext.getUniform()")}} - - : Returns the value of a uniform variable at a given location. -- {{domxref("WebGLRenderingContext.getUniformLocation()")}} - - : Returns the location of a uniform variable. -- {{domxref("WebGLRenderingContext.getVertexAttrib()")}} - - : Returns information about a vertex attribute at a given position. -- {{domxref("WebGLRenderingContext.getVertexAttribOffset()")}} - - : Returns the address of a given vertex attribute. -- {{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}} - - : Specifies a value for a uniform variable. -- {{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}} - - : Specifies a matrix value for a uniform variable. -- {{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}} - - : Specifies a value for a generic vertex attribute. -- {{domxref("WebGLRenderingContext.vertexAttribPointer()")}} - - : Specifies the data formats and locations of vertex attributes in a vertex attributes array. - -## Drawing buffers - -- {{domxref("WebGLRenderingContext.clear()")}} - - : Clears specified buffers to preset values. -- {{domxref("WebGLRenderingContext.drawArrays()")}} - - : Renders primitives from array data. -- {{domxref("WebGLRenderingContext.drawElements()")}} - - : Renders primitives from element array data. -- {{domxref("WebGLRenderingContext.finish()")}} - - : Blocks execution until all previously called commands are finished. -- {{domxref("WebGLRenderingContext.flush()")}} - - : Empties different buffer commands, causing all commands to be executed as quickly as possible. - -## Working with extensions - -These methods manage WebGL extensions: - -- {{domxref("WebGLRenderingContext.getSupportedExtensions()")}} - - : Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions. -- {{domxref("WebGLRenderingContext.getExtension()")}} - - : Returns an extension object. - -## Examples - -### WebGL context feature detection - -{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}} - -{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}} - -{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}} - -### Effect of canvas size on rendering with WebGL - -{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}} - -{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}} - -{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}} - -## Specifications - -| Specification | Status | Comment | -| ------------------------------------------------------------------------ | ------------------------ | ------------------ | -| {{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}} | {{Spec2('WebGL')}} | Initial definition | - -## Browser compatibility - -{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}} - -## See also - -- {{domxref("HTMLCanvasElement")}} +- [`WebGLRenderingContext.bindTexture()`](/fr/docs/Web/API/WebGLRenderingContext/bindTexture) + - : Lie un objet `WebGLTexture` à une cible donnée. +- [`WebGLRenderingContext.compressedTexImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/compressedTexImage2D) + - : Indique une image de texture 2D dans un format compressé. +- [`WebGLRenderingContext.compressedTexSubImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/compressedTexSubImage2D) + - : Indique une sous-image de texture 2D dans un format compressé. +- [`WebGLRenderingContext.copyTexImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/copyTexImage2D) + - : Copie une image de texture 2D. +- [`WebGLRenderingContext.copyTexSubImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/copyTexSubImage2D) + - : Copie une sous-image de texture 2D. +- [`WebGLRenderingContext.createTexture()`](/fr/docs/Web/API/WebGLRenderingContext/createTexture) + - : Crée un objet `WebGLTexture`. +- [`WebGLRenderingContext.deleteTexture()`](/fr/docs/Web/API/WebGLRenderingContext/deleteTexture) + - : Supprime un objet `WebGLTexture`. +- [`WebGLRenderingContext.generateMipmap()`](/fr/docs/Web/API/WebGLRenderingContext/generateMipmap) + - : Génère un ensemble de mipmaps pour un objet `WebGLTexture`. +- [`WebGLRenderingContext.getTexParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getTexParameter) + - : Renvoie des informations à propos de la texture. +- [`WebGLRenderingContext.isTexture()`](/fr/docs/Web/API/WebGLRenderingContext/isTexture) + - : Renvoie un booléen qui indique sur l'objet `WebGLTexture` passé est valide. +- [`WebGLRenderingContext.texImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/texImage2D) + - : Indique une image de texture 2D. +- [`WebGLRenderingContext.texSubImage2D()`](/fr/docs/Web/API/WebGLRenderingContext/texSubImage2D) + - : Met à jour le sous-rectangle de l'objet `WebGLTexture` courant. +- [`WebGLRenderingContext.texParameterf()`](/fr/docs/Web/API/WebGLRenderingContext/texParameter) + - : Définit les paramètres de texture. +- [`WebGLRenderingContext.texParameteri()`](/fr/docs/Web/API/WebGLRenderingContext/texParameter) + - : Définit les paramètres de texture. + +## Programmes et <i lang="en">shaders</i> + +- [`WebGLRenderingContext.attachShader()`](/fr/docs/Web/API/WebGLRenderingContext/attachShader) + - : Attache un `WebGLShader` à un `WebGLProgram`. +- [`WebGLRenderingContext.bindAttribLocation()`](/fr/docs/Web/API/WebGLRenderingContext/bindAttribLocation) + - : Lie un index de sommet générique à une variable d'attribut nommée. +- [`WebGLRenderingContext.compileShader()`](/fr/docs/Web/API/WebGLRenderingContext/compileShader) + - : Compile un `WebGLShader`. +- [`WebGLRenderingContext.createProgram()`](/fr/docs/Web/API/WebGLRenderingContext/createProgram) + - : Crée un `WebGLProgram`. +- [`WebGLRenderingContext.createShader()`](/fr/docs/Web/API/WebGLRenderingContext/createShader) + - : Crée un `WebGLShader`. +- [`WebGLRenderingContext.deleteProgram()`](/fr/docs/Web/API/WebGLRenderingContext/deleteProgram) + - : Supprime un `WebGLProgram`. +- [`WebGLRenderingContext.deleteShader()`](/fr/docs/Web/API/WebGLRenderingContext/deleteShader) + - : Supprime un `WebGLShader`. +- [`WebGLRenderingContext.detachShader()`](/fr/docs/Web/API/WebGLRenderingContext/detachShader) + - : Détache un `WebGLShader`. +- [`WebGLRenderingContext.getAttachedShaders()`](/fr/docs/Web/API/WebGLRenderingContext/getAttachedShaders) + - : Renvoie une liste d'objets `WebGLShader` attachés à un `WebGLProgram`. +- [`WebGLRenderingContext.getProgramParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getProgramParameter) + - : Renvoie des informations à propos du programme. +- [`WebGLRenderingContext.getProgramInfoLog()`](/fr/docs/Web/API/WebGLRenderingContext/getProgramInfoLog) + - : Renvoie le journal d'informations pour un objet `WebGLProgram`. +- [`WebGLRenderingContext.getShaderParameter()`](/fr/docs/Web/API/WebGLRenderingContext/getShaderParameter) + - : Renvoie des informations à propos du <i lang="en">shader</i>. +- [`WebGLRenderingContext.getShaderPrecisionFormat()`](/fr/docs/Web/API/WebGLRenderingContext/getShaderPrecisionFormat) + - : Renvoie un objet `WebGLShaderPrecisionFormat` décrivant la précision pour le format numérique du <i lang="en">shader</i>. +- [`WebGLRenderingContext.getShaderInfoLog()`](/fr/docs/Web/API/WebGLRenderingContext/getShaderInfoLog) + - : Renvoie le journal d'informations pour un objet `WebGLShader`. +- [`WebGLRenderingContext.getShaderSource()`](/fr/docs/Web/API/WebGLRenderingContext/getShaderSource) + - : Renvoie le code source d'un `WebGLShader` sous la forme d'une chaîne de caractères. +- [`WebGLRenderingContext.isProgram()`](/fr/docs/Web/API/WebGLRenderingContext/isProgram) + - : Renvoie un booléen indiquant si l'objet `WebGLProgram` passé est valide. +- [`WebGLRenderingContext.isShader()`](/fr/docs/Web/API/WebGLRenderingContext/isShader) + - : Renvoie un booléen indiquant si l'objet `WebGLShader` passé est valide. +- [`WebGLRenderingContext.linkProgram()`](/fr/docs/Web/API/WebGLRenderingContext/linkProgram) + - : Effectue les liaisons pour l'objet `WebGLProgram` passé. +- [`WebGLRenderingContext.shaderSource()`](/fr/docs/Web/API/WebGLRenderingContext/shaderSource) + - : Définit le code source d'un `WebGLShader`. +- [`WebGLRenderingContext.useProgram()`](/fr/docs/Web/API/WebGLRenderingContext/useProgram) + - : Utilise le `WebGLProgram` indiqué comme partie de l'état de rendu courant. +- [`WebGLRenderingContext.validateProgram()`](/fr/docs/Web/API/WebGLRenderingContext/validateProgram) + - : Valide un `WebGLProgram`. + +## Uniformes et attributs + +- [`WebGLRenderingContext.disableVertexAttribArray()`](/fr/docs/Web/API/WebGLRenderingContext/disableVertexAttribArray) + - : Désactive un tableau d'attribut de sommet à une position donnée. +- [`WebGLRenderingContext.enableVertexAttribArray()`](/fr/docs/Web/API/WebGLRenderingContext/enableVertexAttribArray) + - : Active un tableau d'attribut de sommet à une position donnée. +- [`WebGLRenderingContext.getActiveAttrib()`](/fr/docs/Web/API/WebGLRenderingContext/getActiveAttrib) + - : Renvoie des informations à propos d'une variable d'attribut active. +- [`WebGLRenderingContext.getActiveUniform()`](/fr/docs/Web/API/WebGLRenderingContext/getActiveUniform) + - : Renvoie des informations à propos d'une variable d'uniforme active. +- [`WebGLRenderingContext.getAttribLocation()`](/fr/docs/Web/API/WebGLRenderingContext/getAttribLocation) + - : Renvoie l'emplacement d'une variable d'attribut. +- [`WebGLRenderingContext.getUniform()`](/fr/docs/Web/API/WebGLRenderingContext/getUniform) + - : Renvoie la valeur d'une variable d'uniforme à un emplacement donné. +- [`WebGLRenderingContext.getUniformLocation()`](/fr/docs/Web/API/WebGLRenderingContext/getUniformLocation) + - : Renvoie l'emplacement d'une variable d'uniforme. +- [`WebGLRenderingContext.getVertexAttrib()`](/fr/docs/Web/API/WebGLRenderingContext/getVertexAttrib) + - : Renvoie les informations à propos d'un attribut de sommet à une position donnée. +- [`WebGLRenderingContext.getVertexAttribOffset()`](/fr/docs/Web/API/WebGLRenderingContext/getVertexAttribOffset) + - : Renvoie l'adresse d'un attribut de sommet donné. +- [`WebGLRenderingContext.uniform[1234][fi][v]()`](/fr/docs/Web/API/WebGLRenderingContext/uniform) + - : Définit une valeur pour une variable d'uniforme. +- [`WebGLRenderingContext.uniformMatrix[234]fv()`](/fr/docs/Web/API/WebGLRenderingContext/uniformMatrix) + - : Définit la valeur matricielle pour une variable d'uniforme. +- [`WebGLRenderingContext.vertexAttrib[1234]f[v]()`](/fr/docs/Web/API/WebGLRenderingContext/vertexAttrib) + - : Définit une valeur pour un attribut de sommet générique. +- [`WebGLRenderingContext.vertexAttribPointer()`](/fr/docs/Web/API/WebGLRenderingContext/vertexAttribPointer) + - : Définit les formats de données et les emplacements des attributs de sommet dans un tableau d'attributs de sommet. + +## Dessiner les tampons + +- [`WebGLRenderingContext.clear()`](/fr/docs/Web/API/WebGLRenderingContext/clear) + - : Nettoie les tampons indiqués avec les valeurs prédéfinies. +- [`WebGLRenderingContext.drawArrays()`](/fr/docs/Web/API/WebGLRenderingContext/drawArrays) + - : Effectue le rendu des primitives à partir des données de tableaux. +- [`WebGLRenderingContext.drawElements()`](/fr/docs/Web/API/WebGLRenderingContext/drawElements) + - : Effectue le rendu des primitives à partir des données d'élément. +- [`WebGLRenderingContext.finish()`](/fr/docs/Web/API/WebGLRenderingContext/finish) + - : Bloque l'exécution jusqu'à ce que les commandes précédemment appelées soient terminées. +- [`WebGLRenderingContext.flush()`](/fr/docs/Web/API/WebGLRenderingContext/flush) + - : Vide les différents tampons de commandes, entraînant l'exécution la plus rapide possible pour toutes les commandes. + +## Utiliser les extensions + +Ces méthodes permettent de gérer les extensions WebGL : + +- [`WebGLRenderingContext.getSupportedExtensions()`](/fr/docs/Web/API/WebGLRenderingContext/getSupportedExtensions) + - : Renvoie un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) de chaînes de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)). Les éléments sont les noms des extensions WebGL prises en charge. +- [`WebGLRenderingContext.getExtension()`](/fr/docs/Web/API/WebGLRenderingContext/getExtension) + - : Renvoie un objet d'extension. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement) |
