From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../web/api/canvas_api/tutorial/index.html | 176 +++++++++ .../web/api/document/createevent/index.html | 41 ++ .../web/api/document_object_model/index.html | 16 + .../index.html | 54 +++ .../index.html | 30 ++ .../api/formdata/using_formdata_objects/index.html | 141 +++++++ .../api/globaleventhandlers/onresize/index.html | 78 ++++ .../api/htmlmediaelement/abort_event/index.html | 70 ++++ .../api/htmlmediaelement/ended_event/index.html | 83 ++++ files/fr/conflicting/web/api/index.html | 77 ++++ .../web/api/node/getrootnode/index.html | 71 ++++ files/fr/conflicting/web/api/node/index.html | 39 ++ .../index.html | 40 ++ files/fr/conflicting/web/api/selection/index.html | 221 +++++++++++ files/fr/conflicting/web/api/url/index.html | 95 +++++ .../conflicting/web/api/web_storage_api/index.html | 106 ++++++ .../web_workers_api/using_web_workers/index.html | 423 +++++++++++++++++++++ files/fr/conflicting/web/api/webrtc_api/index.html | 52 +++ .../index.html | 77 ++++ .../web/api/window/localstorage/index.html | 135 +++++++ .../conflicting/web/api/xsltprocessor/index.html | 44 +++ .../index.html | 15 + 22 files changed, 2084 insertions(+) create mode 100644 files/fr/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/fr/conflicting/web/api/document/createevent/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html create mode 100644 files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html create mode 100644 files/fr/conflicting/web/api/index.html create mode 100644 files/fr/conflicting/web/api/node/getrootnode/index.html create mode 100644 files/fr/conflicting/web/api/node/index.html create mode 100644 files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html create mode 100644 files/fr/conflicting/web/api/selection/index.html create mode 100644 files/fr/conflicting/web/api/url/index.html create mode 100644 files/fr/conflicting/web/api/web_storage_api/index.html create mode 100644 files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html create mode 100644 files/fr/conflicting/web/api/webrtc_api/index.html create mode 100644 files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html create mode 100644 files/fr/conflicting/web/api/window/localstorage/index.html create mode 100644 files/fr/conflicting/web/api/xsltprocessor/index.html create mode 100644 files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html (limited to 'files/fr/conflicting/web/api') diff --git a/files/fr/conflicting/web/api/canvas_api/tutorial/index.html b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..0b0a96257e --- /dev/null +++ b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,176 @@ +--- +title: Dessiner avec Canvas +slug: Web/Guide/Graphics/Dessiner_avec_canvas +tags: + - Canvas + - HTML +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +

 

+

Introduction

+

Depuis Firefox 1.5, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la spécification canvas du WHATWG, elle-même basée sur la balise <canvas> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.

+

{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou canevas, exposant un ou plusieurs contextes de rendu. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <canvas>.

+

Le contexte de rendu 2D

+

Un exemple simple

+

Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :

+

Exemple 1.

+
<html>
+ <head>
+  <script type="application/x-javascript">
+function draw() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect (10, 10, 55, 50);
+
+ ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+ ctx.fillRect (30, 30, 55, 50);
+}
+  </script>
+ </head>
+ <body onload="draw()">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
+
+

La fonction draw récupère l'élément canvas, et ensuite son contexte 2d. L'objet ctx peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant fillStyle à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à fillRect. Le second appel à fillStyle utilise rgba() pour spécifier une valeur alpha parmi les informations de couleur.

+

Les appels à fillRect, strokeRect et clearRect affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.

+

Utilisation de chemins

+

La fonction beginPath commence un nouveau chemin, et moveTo, lineTo, arcTo, arc et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de closePath. Une fois que le chemin est créé, vous pouvez utiliser fill ou stroke pour afficher celui-ci sur le canevas.

+

Exemple 2.

+
<html>
+ <head>
+  <script type="application/x-javascript">
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+   </script>
+ </head>
+ <body onload="draw()">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
+
+

L'appel à fill() ou stroke() provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.

+

État graphique

+

Les attributs du contexte comme fillStyle, strokeStyle, lineWidth et lineJoin font partie de l'état graphique courant. Le contexte fournit deux méthodes, save() et restore(), qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.

+

Un exemple plus compliqué

+

Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte translate(), scale() et rotate() transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.

+

Exemple 3.

+
 <html>
+  <head>
+   <script type="application/x-javascript">
+ function dessineNoeudPap(ctx, fillStyle) {
+
+   ctx.fillStyle = "rgba(200,200,200,0.3)";
+   ctx.fillRect(-30, -30, 60, 60);
+
+   ctx.fillStyle = fillStyle;
+   ctx.globalAlpha = 1.0;
+   ctx.beginPath();
+   ctx.moveTo(25, 25);
+   ctx.lineTo(-25, -25);
+   ctx.lineTo(25, -25);
+   ctx.lineTo(-25, 25);
+   ctx.closePath();
+   ctx.fill();
+ }
+
+ function point(ctx) {
+   ctx.save();
+   ctx.fillStyle = "black";
+   ctx.fillRect(-2, -2, 4, 4);
+   ctx.restore();
+ }
+
+ function dessine() {
+   var canvas = document.getElementById("canvas");
+   var ctx = canvas.getContext("2d");
+
+   // notez que toutes les autres translations sont relatives à
+   // celle-ci
+   ctx.translate(45, 45);
+
+   ctx.save();
+   //ctx.translate(0, 0); // non nécessaire
+   dessineNoeudPap(ctx, "red");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 0);
+   ctx.rotate(45 * Math.PI / 180);
+   dessineNoeudPap(ctx, "green");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(0, 85);
+   ctx.rotate(135 * Math.PI / 180);
+   dessineNoeudPap(ctx, "blue");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 85);
+   ctx.rotate(90 * Math.PI / 180);
+   dessineNoeudPap(ctx, "yellow");
+   point(ctx);
+   ctx.restore();
+ }
+    </script>
+  </head>
+  <body onload="dessine()">
+    <canvas id="canvas" width="300" height="300"></canvas>
+  </body>
+ </html>
+
+

Ceci définit deux méthodes dessineNoeudPap et point, qui sont appelées 4 fois. Avant chaque appel, translate() et rotate() sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. point affiche un petit carré noir centré sur (0, 0). Ce point est déplacé par la matrice de transformation. dessineNoeudPap affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.

+

Comme les opérations de matrices sont cumulatives, save() et restore() sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence translate() rotate() translate() donnera des résultats différents d'une série d'appels translate() translate() rotate().

+

Compatibilité avec le <canvas> d'Apple

+

Pour la plus grande partie, le <canvas> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.

+

Balise </canvas> requise

+

Dans l'implémentation d'Apple Safari, <canvas> est un élément fortement semblable à l'élément <img> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <canvas> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin requise.

+

Si aucun contenu alternatif n'est nécessaire, un simple <canvas id="foo" ...></canvas> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.

+

Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). À faire : les commandes CSS exactes doivent être fournies par hixie.

+

Fonctionnalités supplémentaires

+

Affichage de contenu Web dans un canevas

+
+ Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.
+

L'élément canvas de Mozilla a été étendu avec la méthode drawWindow. Celle-ci dessine une capture du contenu d'un élément DOM window dans le canevas. Par exemple,

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
+
+

affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).

+

Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.

+

L'extension tab preview de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.

+

Voir aussi

+ +

{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}

diff --git a/files/fr/conflicting/web/api/document/createevent/index.html b/files/fr/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..5cfbb7f05f --- /dev/null +++ b/files/fr/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,41 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evènement + - Méthodes +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode initEvent() .

+ +

Syntaxe

+ +
document.createEvent(type)
+ +
+
type
+
Une chaîne de caractère indiquant le type de l'évènement à créer.
+
+ +

Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.

+ +

Exemple

+ +
var newEvent = document.createEvent("UIEvents");
+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.createEvent")}}

diff --git a/files/fr/conflicting/web/api/document_object_model/index.html b/files/fr/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..518da7e3d8 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,16 @@ +--- +title: À propos du Document Object Model +slug: À_propos_du_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +

Présentation du DOM

+

Le Document Object Model, ou modèle objet de document, est une API pour les documents HTML et XML. Le DOM fournit une représentation structurelle du document, permettant de modifier son contenu et sa présentation visuelle. Fondamentalement, il relie les pages Web aux scripts et langages de programmation.

+

Toutes les propriétés, méthodes et évènements utilisables par le développeur Web pour manipuler et créer des pages sont organisés au sein d'objets (c'est-à-dire l'objet document qui représente le document lui-même, l'objet table qui représente un élément de tableau HTML, et ainsi de suite). Ces objets sont accessibles via des langages de scripts dans la plupart des navigateurs récents.

+

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. C'est-à-dire que le code est écrit en JavaScript, mais qu'il utilise le DOM pour accéder à la page Web et ses éléments. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à l'aide d'une seule API cohérente. Bien que ce site soit concentré sur JavaScript, des implémentations du DOM peuvent être conçues pour n'importe quel langage.

+

Le World Wide Web Consortium établit un standard pour le DOM, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs.

+

L'importance du support du DOM dans Mozilla

+

« Dynamic HTML » (DHTML) ou HTML dynamique est un terme utilisé par certains pour décrire la combinaison de HTML, de feuilles de style et de script permettant à des documents d'être animés. Le groupe de travail DOM du W3C travaille dur pour s'assurer que des solutions interopérables et ne dépendant pas du langage utilisé soient acceptées par tous (voir aussi la FAQ du W3C). Étant donné que Mozilla revendique le titre de « plateforme d'applications Web », le support du DOM est l'une des fonctionnalités les plus demandées et est nécessaire si Mozilla désire être une alternative viable à d'autres navigateurs.

+

Plus important même est le fait que l'interface utilisateur de Mozilla (ainsi que de Firefox et Thunderbird) est construite à l'aide de XUL, un langage d'interface utilisateur basé sur XML. Par conséquent, Mozilla utilise le DOM pour manipuler sa propre interface utilisateur.

diff --git a/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html new file mode 100644 index 0000000000..77c272f5b2 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html @@ -0,0 +1,54 @@ +--- +title: Préface +slug: Web/API/Document_Object_Model/Préface +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +

{{ ApiRef() }}

+

À propos de cette référence

+

Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.

+

Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la référence de DOM document) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.

+

À qui est destiné ce guide

+

Le lecteur de la Référence du DOM Gecko est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, XML, les serveurs et standards du Web, et même en ce qui concerne JavaScript, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec HTML, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.

+

Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.

+

Présentation de Gecko

+

Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

+

Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple window etc.) dans le contexte des pages Web et de l'interface applicative (ou + + chrome + ) du navigateur.

+

Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.

+

Syntaxe de l'API

+

Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.

+

Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule availHeight de l'objet screen est présentée de la manière suivante :

+
screenObj = window.screen.availHeight;
+
+

Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :

+
chaine = window.status;
+window.status =chaine;
+
+

En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme element pour tous les éléments, document pour l'objet de document racine, table pour un objet de tableau, etc. Consultez Types de données importants pour plus d'informations à propos des types de données.

+

Utilisation des exemples

+

Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété window.document peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :

+
<html>
+
+<script>
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+</script>
+
+<button onclick="testWinDoc();">test de la propriété document</button>
+
+</html>
+
+

Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section Test de l'API DOM de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.

+
+  
+

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..ad672dee28 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,30 @@ +--- +title: Guides DOM pour développeurs +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

{{draft}}

+ +

Le Document Object Model est une API pour les documents HTML et XML. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.

+ +

Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en objects (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.

+ +

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour n'importe quel langage.

+ +

Le World Wide Web Consortium établit une norme pour le DOM, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.

+ +

Pourquoi le DOM est-il important?

+ +

"HTML dynamique" (DHTML) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la FAQ du W3C). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.

+ +

Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant XUL, en utilisant le DOM pour manipuler sa propre interface utilisateur.

+ +

En savoir plus sur le DOM

+ +

{{LandingPageListSubpages}}

diff --git a/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..3d07259319 --- /dev/null +++ b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,141 @@ +--- +title: Utiliser les objets FormData +slug: Web/Guide/Using_FormData_Objects +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +

L'objet FormData vous permet de créer un ensemble de paires clef-valeur pour un envoi via XMLHttpRequest. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode submit() pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".

+ +

Créer un objet FormData de zéro

+ +

Vous pouvez créer un objet FormData en l'instanciant puis en lui ajoutant des champs au moyen de la méthode append(), comme ci-dessous :

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456"
+
+// Choix de l'utilisateur à partir d'un input HTML de type file...
+formData.append("userfile", fileInputElement.files[0]);
+
+// Pseudo-objet fichier JavaScript...
+var content = '<a id="a"><b id="b">hey!</b></a>'; // le corps du nouveau fichier...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Remarque : les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode FormData.append()  (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères).
+ +

Cet exemple crée une instance de FormData contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode send() de XMLHttpRequest pour envoyer les données du formulaire. Le champ "webmasterfile" est un Blob. Un objet Blob représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le Blob, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un Blob, vous pouvez invoquer le constructeur Blob.

+ +

Récupérer un objet FormData à partir d'un formulaire

+ +

Pour construire un objet FormData qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet FormData :

+ +
var formData = new FormData(someFormElement);
+
+ +

Par exemple :

+ +
var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

Vous pouvez également ajouter des données additionnelles à l'objet FormData après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.

+ +

Envoyer des fichiers avec un objet FormData

+ +

Vous pouvez aussi envoyer des fichiers en utilisant FormData. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div id="output"></div>
+
+ +

Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Remarque : si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().

+
+ +
+

Remarque : Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.

+
+ +

Vous pouvez aussi ajouter un {{ domxref("File") }} ou un  {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Lorsque la méthode append est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête Content-Disposition qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.

+ +

Vous pouvez aussi utiliser FormData avec jQuery si vous configurez les bonnes options :

+ +
var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // indique à jQuery de ne pas traiter les données
+  contentType: false   // indique à jQuery de ne pas configurer le contentType
+});
+
+ +

Soumettre des formulaires et téléverser des fichiers via AJAX sans objets FormData

+ +

Si vous souhaitez savoir comment sérialiser et soumettre via AJAX un formulaire sans utiliser d'objets FormData, veuillez consulter ce paragraphe.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..d2c0d6304f --- /dev/null +++ b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,78 @@ +--- +title: window.onresize +slug: Web/API/Window/onresize +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La propriété GlobalEventHandlers.onresize contient un {{domxref("EventHandler")}} (gestionnaire d'évènements) qui survient quand un évènement {{event("resize")}} est reçu.

+ +

Syntaxe

+ +
window.onresize = funcRef;
+
+ +

Paramètres

+ + + +

Exemple

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+ +

Notes

+ +

L’événement resize est déclenché après le redimensionnement de la fenêtre.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..68e28e9626 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +
L'événement abort est déclenché lorsque le chargement d'une resource a été interrompu.
+ +
 
+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
UIEvent si généré à partir de l'interface utilisateur sinon, Event.
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..950e8ef545 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,83 @@ +--- +title: ended (Web Audio) +slug: Web/Events/ended_(Web_Audio) +translation_of: Web/API/HTMLMediaElement/ended_event +translation_of_original: Web/Events/ended_(Web_Audio) +--- +
+

L'événement ended est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.

+
+ +

Informations générales

+ +
+
Spécification
+
{{SpecName("Web Audio API")}}
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("AudioBufferSourceNode")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Evénements liés

+ + diff --git a/files/fr/conflicting/web/api/index.html b/files/fr/conflicting/web/api/index.html new file mode 100644 index 0000000000..a4f8a6ba0a --- /dev/null +++ b/files/fr/conflicting/web/api/index.html @@ -0,0 +1,77 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - Nom + - Propriétés +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +

{{ APIRef("DOM") }}

+ +

name obtient ou définit la propriété name (nom) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.

+ +
+

Note : La propriété name n'existe pas pour d'autres éléments ; contrairement à tagName et nodeName, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

+
+ +

Le name peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un formulaire et dans la collection elements d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.

+ +

Syntaxe

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Exemple

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Obtient une référence au premier élément du formulaire
+  var formElement = document.forms['formA'].elements[0];
+
+  // Lui donne un nom
+  formElement.name = 'inputA';
+
+  // Affiche la valeur du champ
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notes

+ +

Dans Internet Explorer, la propriété name des objets DOM créés à l'aide de createElement ne peut être définie ou modifiée.

+ +

Spécification

+ +

Spécification DOM 2 HTML du W3C :

+ + + +

Les traductions ne sont pas normatives.

diff --git a/files/fr/conflicting/web/api/node/getrootnode/index.html b/files/fr/conflicting/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..7ee512dd8f --- /dev/null +++ b/files/fr/conflicting/web/api/node/getrootnode/index.html @@ -0,0 +1,71 @@ +--- +title: Node.rootNode +slug: Web/API/Node/rootNode +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés + - Racine +translation_of: Web/API/Node/getRootNode +translation_of_original: Web/API/Node/rootNode +--- +

{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule Node.rootNode renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.

+ +
+

Important : Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.

+
+ +

Syntaxe

+ +
rootNode = node.rootNode;
+
+ +

Valeur

+ +

Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.

+ +

Exemple

+ +

L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :

+ +
console.log(document.body.rootNode);
+ +

Notes

+ +

Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via Node.firstChild ou + Node.previousSibling peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.

+ +

Consultez Gestion des espaces dans le DOM + et Why are some Text nodes empty? + dans la FAQ DOM 3 du W3C pour plus d'informations.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.rootNode")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
diff --git a/files/fr/conflicting/web/api/node/index.html b/files/fr/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..617ed79d8e --- /dev/null +++ b/files/fr/conflicting/web/api/node/index.html @@ -0,0 +1,39 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - API + - DOM + - Noeuds + - Propriétés + - URI + - URL +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +
{{APIRef("DOM")}} {{Non-standard_header}}
+ +

La propriété Node.baseURIObject renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (chaîne de caractères).

+ +

Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.

+ +

Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.

+ +

Syntaxe

+ +
uriObj = node.baseURIObject
+
+ +

Notes

+ +

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.

+ +

Spécification

+ +

N'existe dans aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.baseURIObject")}}

diff --git a/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..33144eae42 --- /dev/null +++ b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,40 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - API + - DOM + - Noeuds + - Principal + - Propriétés +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +
{{APIRef("DOM")}} {{Non-standard_header}}
+ +

La propriété en lecture seule Node.nodePrincipal renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.

+ +

{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}

+ +

Syntaxe

+ +
principalObj = Node.nodePrincipal
+
+ +

Valeur

+ +

Un objet nsIPrincipal représentant le contexte de sécurité du noeud.

+ +

Notes

+ +

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.

+ +

Spécifications

+ +

N'existe dans aucune spécification. C'est une propriété propre à Firefox.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nodePrincipal")}}

diff --git a/files/fr/conflicting/web/api/selection/index.html b/files/fr/conflicting/web/api/selection/index.html new file mode 100644 index 0000000000..bca8077699 --- /dev/null +++ b/files/fr/conflicting/web/api/selection/index.html @@ -0,0 +1,221 @@ +--- +title: Selection API +slug: Web/API/Selection_API +translation_of: Web/API/Selection_API +--- +

{{APIRef}}

+ +
+

L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : ranges) de texte sélectionnées par l’utilisatrice ou l’utilisateur.

+
+ +

Concepts et utilisation

+ +

Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.

+ +

Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :

+ + + +

Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.

+ +

Interfaces de l’API Selection

+ +
+
{{domxref("Selection")}}
+
Représente la plage de texte sélectionnée ou la position actuelle du curseur.
+
+ +

Extensions à d’autres interfaces

+ +
+
{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}
+
Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. Document.getSelection() est en quelques sortes un alias de Window.getSelection().
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Selection API', '#definition', 'Selection')}}{{Spec2('Selection API')}}La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.
{{SpecName('HTML Editing', '#selection', 'Selection')}}{{Spec2('HTML Editing')}}Définition initiale (plus ancienne), à présent obsolète.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}
+ {{CompatGeckoDesktop(52)}}[1]		9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
modify(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support de base{{CompatUnknown}}{{CompatVersionUnknown}} +

{{CompatVersionUnknown()}}
+ {{CompatGeckoMobile(52)}}[1]

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
modify(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/url/index.html b/files/fr/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..223701977c --- /dev/null +++ b/files/fr/conflicting/web/api/url/index.html @@ -0,0 +1,95 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

La propriété Window.URL retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +

Utilisation de la méthode statique:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

Utilisation d'un objet instancié:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard nsIDOMMozURLProperty internal type. In practice, this didn't make any difference.

+ +

[2] Implemented under the non-standard name webkitURL.

diff --git a/files/fr/conflicting/web/api/web_storage_api/index.html b/files/fr/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..2b52e93ad8 --- /dev/null +++ b/files/fr/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,106 @@ +--- +title: Storage +slug: DOM/Storage +tags: + - Applications_web_hors_ligne + - DOM + - JavaScript + - Référence_du_DOM_Gecko +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +

{{ ApiRef() }} {{ Fx_minversion_header(2) }}

+
+

Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)

+
+

Résumé

+

DOM Storage est le nom donné à l'ensemble des fonctionnalités de stockage introduites dans la spécification Web Applications 1.0. DOM Storage est conçu pour fournir une alternative aux cookies pour le stockage d'informations, alternative plus grande, plus sûre et plus facile à utiliser. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier Firefox 2 et suivants.

+
+ Note : DOM Storage ne doit pas être confondu avec mozStorage (les interfaces XPCOM de Mozilla vers SQLite) ou l'API de restauration de session (un utilitaire de stockage XPCOM utilisable par les extensions).
+

Description

+

Le mécanisme DOM Storage est un moyen par lequel des paires de chaînes clé/valeur peuvent être stockées de manière sûre et récupérées pour être utilisées plus tard. L'ajout de cette fonctionnalité a pour but de fournir un moyen complet par lequel des applications interactives peuvent être construites (avec des possibilités avancées, comme la possibilité de travailler « hors ligne » pendant des périodes prolongées).

+

Pour l'instant, seuls les navigateurs basés sur Mozilla fournissent une implémentation fonctionnelle de la spécification DOM Storage. Cependant, Internet Explorer dispose d'une fonctionnalité semblable appelée « userData behavior » qui permet également de conserver des données d'une session de navigation à une autre.

+

DOM Storage est utile car il n'existe aucune bonne méthode limitée au navigateur pour conserver une quantité raisonnable de données pour une période donnée. Les cookies de navigation ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme Flash Local Storage) nécessitent un plugin externe.

+

Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été halfnote (une application de prise de notes) écrite par Aaron Boodman. Dans son application, Aaron enregistre de manière simultanée les notes sur un serveur distant (lorsque la connexion Internet est disponible) et dans un espace d'enregistrement local. Cette méthode permet à l'utilisateur de rédiger ses notes de manière sûre, même avec une connexion Internet sporadique.

+

Bien que le concept et l'implémentation présentés dans halfnote soient relativement simples, sa création montre la possibilité d'une nouvelle gamme d'applications Web utilisables tant en ligne qu'hors ligne.

+

Référence

+

Les objets suivants sont globaux et existent comme propriétés de tout objet window. Cela signifie qu'on peut y accéder avec sessionStorage ou window.sessionStorage. (c'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires à celles immédiatement disponibles dans la page).

+

sessionStorage

+

Il s'agit d'un objet global (sessionStorage) qui conserve un espace de stockage disponible pour toute la durée de la session de la page. Une session de page dure aussi longtemps que le navigateur est ouvert et se poursuit au travers des rechargements de la page. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre provoquera la création d'une nouvelle session pour la page.

+
// Enregistre des données dans l'espace de stockage de la session courante
+sessionStorage.username = "John";
+
+// Accède à une donnée stockée
+alert( "username = " + sessionStorage.username );
+
+

L'objet sessionStorage est surtout utile pour conserver des données temporaires qui doivent être enregistrées et restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.

+
+ Note : sessionStorage devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{ Bug(339445) }} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de sessionStorage comme mesure préventive est discutable.
+

Exemples :

+

Enregistre automatiquement le contenu d'un champ texte et, si la page est rafraichie accidentellement, restaure ce contenu afin qu'aucun texte ne soit perdu.

+
 // Recherche le champ texte à suivre
+ var field = document.getElementById("field");
+
+ // Vérifie s'il y a une valeur de sauvegarde automatique
+ // (ce qui se produira uniquement si la page est rafraichie)
+ if ( sessionStorage.autosave ) {
+     // Restaure le contenu du champ texte
+     field.value = sessionStorage.autosave;
+ }
+
+ // Vérifie le contenu du champ texte à chaque seconde
+ setInterval(function(){
+     // Et enregistre le résultat dans l'objet de stockage de session
+     sessionStorage.autosave = field.value;
+ }, 1000);
+
+

Pour plus d'informations :

+ +

globalStorage

+

{{ Non-standard_header() }} Il s'agit d'un objet global (globalStorage) qui conserve une série d'espaces de stockage privés pour conserver des données sur une longue période de temps (par exemple depuis plusieurs pages et d'une session de navigation à l'autre).

+
// Enregistre des données auxquelles seuls les scripts du domaine peuvent accéder
+globalStorage['mozilla.org'].snippet = "<b>Hello</b>, comment ça va ?";
+
+// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder
+globalStorage[''].favBrowser = "Firefox";
+
+

Plus précisément, l'objet globalStorage permet d'accéder à différents objets de stockage dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant globalStorage sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :

+ +

{{ Fx_minversion_note(3, "Firefox 2 permettait d\'accéder à des objets de stockage plus haut dans la hiérarchie de domaine que le document actuel. Ce n\'est plus permis dans Firefox 3, pour des raisons de sécurité. Cet ajout à HTML 5 a également été retiré des spécifications HTML 5 en faveur de localStorage, qui n\'a pas encore été implémenté dans Firefox.") }}

+

Exemples :

+

Pour tous ces exemples, vous aurez besoin d'insérer un script (en plus des lignes de codes suivantes) dans chaque page sur laquelle vous désirez afficher le résultat.

+

Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :

+
 globalStorage['developer.mozilla.org'].username = "John";
+
+

Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :

+
 // parseInt doit être utilisée car toutes les données sont stockées comme des chaînes
+ globalStorage['mozilla.org'].visits =
+     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
+
+

Pour plus d'informations

+ +

Exemples

+ +

Sujets liés

+ +
+  
+
+

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

+
+

 

diff --git a/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..b925ca7f4b --- /dev/null +++ b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,423 @@ +--- +title: Concepts avancés et exemples +slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples +translation_of: Web/API/Web_Workers_API/Using_web_workers +translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples +--- +
+

Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.

+
+ +

Passage de données : copie, et non partage

+ +

Les données passées entre la page principale et les workers sont copiées, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker ne partagent pas la même instance, ainsi au final une copie est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que clonage structuré.

+ +

Avant de poursuivre, créons à des fins didactiques une fonction nommée emulateMessage(), avec pour objectif de simuler le comportement d'une valeur qui est clonée et non partagée durant le passage du worker à la page principale ou inversement :

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // objet
+alert(typeof emulateMessage(example1)); // nombre
+
+// test #2
+var example2 = true;
+alert(typeof example2); // booléen
+alert(typeof emulateMessage(example2)); // booléen
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // objet
+alert(typeof emulateMessage(example3)); // chaîne de caractères
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // objet
+alert(typeof emulateMessage(example4)); // objet
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Objet
+ +

Une valeur qui est clonée et non partagée est appelée message. Comme vous le savez probablement dès à présent, les messages peuvent être envoyés à et à partir du thread principal en utilisant postMessage(), et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement message contient les données retournées par le worker.

+ +

example.html (la page principale) :

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (leworker) :

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +

L'algorithme de clonage structurée peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.

+ +

Exemples de passages de données

+ +

Exemple #1 : Créer un "eval() asynchrone" générique

+ +

L'exemple suivant montre comment utiliser un worker afin d'exécuter de manière asynchrone n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode eval() appelée dans le worker :

+ +
// Syntaxe : asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();
+ +

La data URI est équivalente à une requête réseau, avec la réponse suivante :

+ +
onmessage = function (oEvent) {
+	postMessage({
+		"id": oEvent.data.id,
+		"evaluated": eval(oEvent.data.code)
+	});
+}
+ +

Exemples d'utilisation :

+ +
// message d'alerte asynchrone...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// affichage asynchrone d'un message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// néant asynchrone...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Exemple #2 : passage avancé de données JSON et création d'un système d'échange

+ +

Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.

+ +

example.html (la page principale) :

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"  />
+<title>MDN Example - Queryable worker</title>
+<script type="text/javascript">
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
+      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
+      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
+      //le même cas se pose avec terminate
+      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // votre worker "queryable" personnalisé
+  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
+
+  // vos "écouteurs" personnalisés
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
+    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (le worker) :

+ +
// vos fonctions PRIVEES personnalisées
+
+function myPrivateFunc1 () {
+  // instructions à exécuter
+}
+
+function myPrivateFunc2 () {
+  // instructions à exécuter
+}
+
+// etc. etc.
+
+// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
+
+var queryableFunctions = {
+  // exemple #1 : obtenir la différence entre deux nombres :
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // exemple #2 : attendre trois secondes
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// fonctions système
+
+function defaultQuery (vMsg) {
+  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
+  // instructions à exécuter
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};
+ +

Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.

+ +

Passage de données par transfert de propriété (objets transférables)

+ +

Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.

+ +
// Crée un "fichier" de 32MB et le remplit.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+
+ +
+

Remarque : pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez Transferable Objects: Lightning Fast! sur HTML5 Rocks.

+
+ +

Workers embarqués

+ +

Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut src et dont l'attribut type n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  var myVar = "Hello World!";
+  // Le reste du code de votre worker commence ici.
+</script>
+<script type="text/javascript">
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+  function pageLog (sMsg) {
+    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Le reste du code de votre worker commence ici.
+</script>
+<script type="text/javascript">
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+
+  // Dans le passé... :
+  // blob builder a existé
+  // ...mais nous utilisons désormais Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Démarrage du worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée document.worker.

+ +

Exemples

+ +

Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.

+ +

Réaliser des calculs en arrière-plan

+ +

Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.

+ +

Le code JavaScript

+ +

Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

Le worker affecte à la propriété onmessage  une fonction qui recevra les messages envoyés lorsque la méthode  postMessage() de l'objet worker est appelée (remarquez que cela diffère de définir une variable globale de ce nom, ou de définir une fonction avec ce nom.   var onmessage et function onmessage définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.

+ +

Le code HTML

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+
+ +

La page web crée un élément div avec l'ID  result , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire onmessage est configuré pour afficher les résultats en renseignant le contenu de l'élément div, et le gestionnaire onerror est configuré pour capturer le message d'erreur.

+ +

Finalement, un message est envoyé au worker pour le démarrer.

+ +

Tester cet exemple.

+ +

Réaliser des E/S web en arrière-plan

+ +

Vous pouvez trouver un tel exemple dans l'article Using workers in extensions .

+ +

Répartir des tâches entre plusieurs workers

+ +

Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/webrtc_api/index.html b/files/fr/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..2d516d62d5 --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,52 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +tags: + - Intro + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: Web/Guide/API/WebRTC +--- +

WebRTC (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.

+

Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.

+
+

Note: Cette documentation n'est pas à jour et est un travail en cours. Vous voulez aider? Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page Débuter sur MDN si vous voulez aider.

+
+

Guide

+
+
+ Introduction au WebRTC
+
+ Guide d'introduction à ce qu’est WebRTC et comment ça marche.
+
+ Communications Peer-to-peer avec WebRTC
+
+ Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.
+
+ Prendre des photos avec la webcam
+
+ Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.
+
+ Introduction à l'architecture WebRTC
+
+ (AKA "WebRTC et l'océan des acronymes") WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.
+
+ L’essentiel du WebRTC
+
+ Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.
+
+

Référence

+
+
+ Navigator.getUserMedia
+
+ L'API pour capturer des médias (audio/video).
+
+ RTCPeerConnection
+
+ L'interface traitant en continu des données entre deux pairs.
+
+ RTCDataChannel
+
+ L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).
+
diff --git a/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html new file mode 100644 index 0000000000..7bff67c30f --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html @@ -0,0 +1,77 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +

Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.

+ +
 
+ +
Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.
+ +
 
+ +
Envie de découvrir WebRTC ? Suivre cette introduction vidéo ! (en Anglais)
+ +
 
+ +
 
+ + + + + + + + +
+

Documentation de WebRTC

+ +
+
Introduction à WebRTC
+
Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.
+
Utilisation de l'API de flux réseau
+
Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.
+
Communications de pair-à-pair avec WebRTC
+
Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.
+
Prendre des photos avec la webcam
+
 
+
MediaStream API
+
L'API qui permet la production et la manipulation d'objets de flux multimédia.
+
getUserMedia ()
+
La fonction de navigation qui permet d'accéder aux périphériques du système des médias.
+
+ +

Afficher tout ...

+ 		+

Obtenir de l'aide de la communauté

+ +

Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.

+ +
    +
  • Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}
    • +
+ +
    +
  • Posez votre question sur le canal IRC de Mozilla médias: # media
    • +
+ +

N'oubliez pas la netiquette...

+ + + + + +

Ressource

+ +
    +
  • {{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}
    • +
+
+ +

 

diff --git a/files/fr/conflicting/web/api/window/localstorage/index.html b/files/fr/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..9f6c400f86 --- /dev/null +++ b/files/fr/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +

{{APIRef()}}

+ +

La propriété localStorage de l’objet Window est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. localStorage a été introduit dans Firefox 3.5.

+ +
Note : Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.
+ +
// Sauvegarder les informations dans l’espace local courant
+localStorage.setItem("username", "John");
+
+// Accéder à des données enregistrées
+alert("username = " + localStorage.getItem("username"));
+ +

La persistence de localStorage le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce tutoriel sur Codepen.

+ +

Compatibilité

+ +

Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet localStorage dans les navigateurs qui ne le supportent pas nativement.

+ +

Cet algorithme est une imitation exacte de l’objet localStorage, mais utilise les cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Note : La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions localStorage.setItem() et localStorage.removeItem() pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes localStorage.yourKey = yourValue; et delete localStorage.yourKey; pour définir ou supprimer une clé n’est pas sécurisée avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet localStorage.
+ +
Note : En remplaçant "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de sessionStorage restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
+ +

Voici une autre imitation, moins exacte, de l’objet localStorage. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (testé et vérifié même avec Internet Explorer 6). Ce code utilise également les cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Note : La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions localStorage.getItem(), localStorage.setItem(), et localStorage.removeItem() pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode localStorage.yourKey pour récupérer, définir, ou supprimer une clé n’est pas possible avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet localStorage.
+ +
Note : En remplaçant la chaîne "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec sessionStorage restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
+ +

Compatibilité et relation avec globalStorage

+ +

localStorage est équivalent à globalStorage[location.hostname], à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que localStorage est une instance de Storage, contrairement à globalStorage[location.hostname] qui est une instance de StorageObsolete (qui est abordé ci-dessous). Par exemple, http://example.com ne sera pas capable d’accéder au même objet localStorage que https://example.com mais il pourront accéder au même élément globalStorage. localStorage est une interface standard alors que globalStorage n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.

+ +

Veuillez noter que définir une propriété sur globalStorage[location.hostname] n’entraîne pas sa définition sur localStorage, et qu’étendre Storage.prototype n’affecte pas les objets globalStorage ; pour faire ainsi, c’est StorageObsolete.prototype qu’il faut étendre.

+ +

Format de stockage

+ +

Les clés et les valeurs de Storage sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.

diff --git a/files/fr/conflicting/web/api/xsltprocessor/index.html b/files/fr/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..0b42bdbde9 --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,44 @@ +--- +title: XSLT dans Gecko +slug: XSLT_dans_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLT_in_Gecko +--- +

 

+ +
    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +
+ +

 

+ +

Introduction

+ +

Une des tendances notables dans les standards du W3C a été l'effort de séparation du contenu et du style. Cela permet de réutiliser un même style pour de multiple contenus, mais également de simplifier le travail de maintenance et de permettre une modification rapide (en ne modifiant qu'un seul et unique fichier) de la charte graphique du contenu.

+ +

CSS (Cascade Style Sheets) a été l'un des premiers moyens proposés par le W3C. CSS est un moyen simple d'appliquer des règles de style à un document Web. Ces règles de style définissent de quelle façon le document (le contenu) doit s'afficher. Cependant, CSS a plusieurs limitations, telles l'absence de structures de programmation et l' impossibilité de créer des modèles de rendu complexes. CSS possède également un support limité des changements de position d'un élément.

+ +

Les transformations XSL (eXtensible Stylesheet Language) sont composées de deux parties : les éléments XSL, qui permettent la transformation d'un arbre XML en un arbre possédant un balisage différent, et XPath, un langage de sélection pour les arbres. XSLT traite un document XML (le contenu) et crée un nouveau document basé sur les règles contenues dans une feuille de style XSL. Ceci permet à XSLT d'ajouter, d'enlever, de réorganiser les éléments du document XML original et permet ainsi un contrôle plus fin de la structure du document résultant.

+ +

Les transformations XSLT sont basées sur des règles qui sont constituées de modèles. Chaque modèle détermine à quels fragments du document XML d'entrée il applique (à l'aide de XPath) les règles de substitution qu'il contient pour créer le nouveau document en sortie.

+ +

{{Next("XSLT dans Gecko:Exemple basique")}}

+ +
+

Informations sur le document original

+ + +
+ +

Interwiki Languages Links

diff --git a/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html new file mode 100644 index 0000000000..940157af5f --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html @@ -0,0 +1,15 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +

+

XSLTProcesor est un objet fournissant une interface avec le moteur XSLT de Mozilla. Il est utilisable par du code JavaScript sans privilèges. +

+ +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLTProcessor" } ) }} -- cgit v1.2.3-54-g00ecf