diff options
Diffstat (limited to 'files/fr/conflicting/web/api')
22 files changed, 2084 insertions, 0 deletions
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 +--- +<p> </p> +<h3 id="Introduction" name="Introduction">Introduction</h3> +<p>Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">spécification canvas du WHATWG</a>, elle-même basée sur la balise <code><canvas></code> 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.</p> +<p>{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>contextes de rendu</em>. 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 <code><canvas></code>.</p> +<h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2D">Le contexte de rendu 2D</h3> +<h4 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h4> +<p>Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :</p> +<p><img align="right" alt="Exemple 1." class="internal" src="/@api/deki/files/1337/=Canvas_ex1.png"></p> +<pre class="eval"><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> +</pre> +<p>La fonction <code>draw</code> récupère l'élément <code>canvas</code>, et ensuite son contexte <code>2d</code>. L'objet <code>ctx</code> peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant <code>fillStyle</code> à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à <code>fillRect</code>. Le second appel à <code>fillStyle</code> utilise <code>rgba()</code> pour spécifier une valeur alpha parmi les informations de couleur.</p> +<p>Les appels à <code>fillRect</code>, <code>strokeRect</code> et <code>clearRect</code> affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.</p> +<h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins">Utilisation de chemins</h4> +<p>La fonction <code>beginPath</code> commence un nouveau chemin, et <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de <code>closePath</code>. Une fois que le chemin est créé, vous pouvez utiliser <code>fill</code> ou <code>stroke</code> pour afficher celui-ci sur le canevas.</p> +<p><img align="right" alt="Exemple 2." class="internal" src="/@api/deki/files/1338/=Canvas_ex2.png"></p> +<pre class="eval"><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> +</pre> +<p>L'appel à <code>fill()</code> ou <code>stroke()</code> provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.</p> +<h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">État graphique</h4> +<p>Les attributs du contexte comme <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</code> font partie de l'<em>état graphique</em> courant. Le contexte fournit deux méthodes, <code>save()</code> et <code>restore()</code>, qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.</p> +<h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus_compliqu.C3.A9">Un exemple plus compliqué</h4> +<p>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 <code>translate()</code>, <code>scale()</code> et <code>rotate()</code> transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.</p> +<p><img align="right" alt="Exemple 3." class="internal" src="/@api/deki/files/1339/=Canvas_ex3.png"></p> +<pre> <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> +</pre> +<p>Ceci définit deux méthodes <code>dessineNoeudPap</code> et <code>point</code>, qui sont appelées 4 fois. Avant chaque appel, <code>translate()</code> et <code>rotate()</code> sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. <code>point</code> affiche un petit carré noir centré sur <code>(0, 0)</code>. Ce point est déplacé par la matrice de transformation. <code>dessineNoeudPap</code> affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.</p> +<p>Comme les opérations de matrices sont cumulatives, <code>save()</code> et <code>restore()</code> 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 <code>translate() rotate() translate()</code> donnera des résultats différents d'une série d'appels <code>translate() translate() rotate()</code>.</p> +<h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">Compatibilité avec le <canvas> d'Apple</h3> +<p>Pour la plus grande partie, le <code><canvas></code> 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.</p> +<h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fcanvas.3E_requise">Balise <code></canvas></code> requise</h4> +<p>Dans l'implémentation d'Apple Safari, <code><canvas></code> est un élément fortement semblable à l'élément <code><img></code> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <code><canvas></code> 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 <em>requise</em>.</p> +<p>Si aucun contenu alternatif n'est nécessaire, un simple <code><canvas id="foo" ...></canvas></code> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.</p> +<p>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). <strong>À faire : les commandes CSS exactes doivent être fournies par hixie.</strong></p> +<h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">Fonctionnalités supplémentaires</h3> +<h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affichage_de_contenu_Web_dans_un_canevas">Affichage de contenu Web dans un canevas</h4> +<div class="note"> + 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.</div> +<p>L'élément <code>canvas</code> de Mozilla a été étendu avec la méthode <code>drawWindow</code>. Celle-ci dessine une capture du contenu d'un élément DOM <code>window</code> dans le canevas. Par exemple,</p> +<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)"); +</pre> +<p>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).</p> +<p>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.</p> +<p>L'extension <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> 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.</p> +<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<ul> + <li><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li> + <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">Tutoriel canvas</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">Spécification du WHATWG</a></li> + <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">La documentation d'Apple sur Canvas</a></li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Affichage de miniatures de pages Web</a></li> + <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">exemples</a> : + <ul> + <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">Rendu 3D du format OBJ</a></li> + <li><a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">Un raycaster basique</a></li> + <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li> + <li><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Exemple impressionnant d'utilisation de canvas</a></li> + <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/Special:Tags?tag=HTML:Canvas&language=fr" title="Special:Tags?tag=HTML:Canvas&language=fr">Et plus…</a></li> +</ul> +<p>{{ 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" } ) }}</p> 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 +--- +<p>{{APIRef("DOM")}}</p> + +<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd> +</dl> + +<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.createEvent")}}</p> 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 +--- +<h3 id="Présentation_du_DOM">Présentation du DOM</h3> +<p>Le <a href="/fr/docs/DOM">Document Object Model</a>, ou modèle objet de document, est une API pour les documents <a href="/fr/docs/Web/HTML">HTML</a> et <a href="/fr/docs/XML">XML</a>. 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.</p> +<p>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'<a href="/fr/docs/R%c3%a9f%c3%a9rence_du_DOM_Gecko">objets</a> (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.</p> +<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/fr/docs/JavaScript">JavaScript</a>. 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 <a class="external" href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p> +<p>Le <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> établit un <a class="external" href="http://www.w3.org/DOM/">standard pour le DOM</a>, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs.</p> +<h3 id="L.27importance_du_support_du_DOM_dans_Mozilla" name="L.27importance_du_support_du_DOM_dans_Mozilla">L'importance du support du DOM dans Mozilla</h3> +<p>« Dynamic HTML » (<a href="/fr/docs/DHTML">DHTML</a>) 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 <a class="external" href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). É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.</p> +<p>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 <a href="/fr/docs/Modification_dynamique_d'interfaces_utilisateur_en_XUL">manipuler sa propre interface utilisateur</a>.</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3> +<p>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.</p> +<p>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 <a href="fr/DOM/document">référence de DOM document</a>) 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.</p> +<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3> +<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> 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, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p> +<p>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.</p> +<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3> +<p>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. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> +<p>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 <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou + <i> + chrome</i> + ) du navigateur.</p> +<p>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.</p> +<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3> +<p>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.</p> +<p>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 <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p> +<pre class="eval"><i>screenObj</i> = window.screen.availHeight; +</pre> +<p>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 :</p> +<pre class="eval"><i>chaine</i> = window.status; +window.status =<i>chaine</i>; +</pre> +<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p> +<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3> +<p>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é <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p> +<pre><html> + +<script> +function testWinDoc() { + + doc= window.document; + + alert(doc.title); + +} +</script> + +<button onclick="testWinDoc();">test de la propriété document</button> + +</html> +</pre> +<p>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 <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p> +<div class="noinclude"> + </div> +<p>{{ 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" } ) }}</p> 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 +--- +<p>{{draft}}</p> + +<p>Le <a href="/docs/DOM">Document Object Model</a> est une API pour les documents <a href="/en-US/docs/HTML">HTML</a> et <a href="/en-US/docs/XML">XML</a>. 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.</p> + +<p>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 <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (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.</p> + +<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/en-US/docs/JavaScript">JavaScript</a>. 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. <span class="tlid-translation translation" lang="fr"><span title="">Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour</span></span> <a href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p> + +<p>Le <a href="http://www.w3.org/">World Wide Web Consortium</a> établit une <a href="http://www.w3.org/DOM/">norme pour le DOM</a>, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.</p> + +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Pourquoi le DOM est-il important?</h2> + +<p>"HTML dynamique" (<a href="/en-US/docs/DHTML">DHTML</a>) 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 <a href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). 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.</p> + +<p>Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, en utilisant le DOM pour <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipuler sa propre interface utilisateur</a>.</p> + +<h2 id="En_savoir_plus_sur_le_DOM">En savoir plus sur le DOM</h2> + +<p>{{LandingPageListSubpages}}</p> 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 +--- +<p>L'objet <a href="/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de créer un ensemble de paires clef-valeur pour un envoi via <code>XMLHttpRequest</code>. 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 <code>submit()</code> pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".</p> + +<h2 id="Créer_un_objet_FormData_de_zéro">Créer un objet <code>FormData</code> de zéro</h2> + +<p>Vous pouvez créer un objet <code>FormData</code> en l'instanciant puis en lui ajoutant des champs au moyen de la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a>, comme ci-dessous :</p> + +<pre class="brush: js">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); +</pre> + +<div class="note"><strong>Remarque :</strong> 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 <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : <strong>si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères</strong>).</div> + +<p>Cet exemple crée une instance de <code>FormData</code> contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> de <code>XMLHttpRequest</code> pour envoyer les données du formulaire. Le champ "webmasterfile" est un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>. Un objet <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> 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 <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, vous pouvez invoquer le <a href="/en/DOM/Blob#Constructor" title="en/DOM/Blob#Constructor"><code>constructeur Blob</code></a>.</p> + +<h2 id="Récupérer_un_objet_FormData_à_partir_d'un_formulaire">Récupérer un objet <code>FormData</code> à partir d'un formulaire</h2> + +<p>Pour construire un objet <code>FormData</code> 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 <code>FormData</code> :</p> + +<pre class="brush: js">var formData = new FormData(someFormElement); +</pre> + +<p>Par exemple :</p> + +<pre class="brush: js">var formElement = document.getElementById("myFormElement"); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +request.send(new FormData(formElement)); +</pre> + +<p>Vous pouvez également ajouter des données additionnelles à l'objet <code>FormData</code> après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :</p> + +<pre class="brush: js">var formElement = document.getElementById("myFormElement"); +formData = new FormData(formElement); +formData.append("serialnumber", serialNumber++); +request.send(formData);</pre> + +<p>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.</p> + +<h2 id="Envoyer_des_fichiers_avec_un_objet_FormData">Envoyer des fichiers avec un objet <code>FormData</code></h2> + +<p>Vous pouvez aussi envoyer des fichiers en utilisant <code>FormData</code>. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :</p> + +<pre class="brush: html"><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> +</pre> + +<p>Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :</p> + +<pre class="brush: js">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); +</pre> + +<div class="note"> +<p><strong>Remarque </strong>: 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().</p> +</div> + +<div class="note"> +<p><strong>Remarque </strong>: 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.</p> +</div> + +<p>Vous pouvez aussi ajouter un {{ domxref("File") }} ou un {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :</p> + +<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); +</pre> + +<p>Lorsque la méthode <code>append</code> est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête <code>Content-Disposition</code> 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é.</p> + +<p>Vous pouvez aussi utiliser <code>FormData</code> avec jQuery si vous configurez les bonnes options :</p> + +<pre class="brush: js">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 +}); +</pre> + +<h2 id="Soumettre_des_formulaires_et_téléverser_des_fichiers_via_AJAX_sans_objets_FormData">Soumettre des formulaires et téléverser des fichiers via AJAX <em>sans</em> <code>objets FormData</code></h2> + +<p>Si vous souhaitez savoir comment sérialiser et soumettre via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> un formulaire<em> sans</em> utiliser d'objets FormData, veuillez consulter <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/HTMLFormElement" title="/en-US/docs/DOM/HTMLFormElement"><code>HTMLFormElement</code></a></li> + <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a></li> + <li><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<ul> + <li><code>funcRef</code> est une référence à une fonction.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre>window.onresize = doFunc; +</pre> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Resize the browser window to fire the resize event.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span> + widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> 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 +--- +<div>L'événement <strong>abort</strong> est déclenché lorsque le chargement d'une resource a été interrompu.</div> + +<div> </div> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/UIEvent">UIEvent</a> si généré à partir de l'interface utilisateur sinon, <a href="/fr/docs/Web/API/Event">Event</a>.</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> 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) +--- +<div> +<p>L'événement <strong>ended </strong>est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.</p> +</div> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;">{{SpecName("Web Audio API")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("AudioBufferSourceNode")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> 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 +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) 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") }}.</p> + +<div class="note"> +<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> +</div> + +<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> 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.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval"><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> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<p>Spécification DOM 2 HTML du W3C :</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li> +</ul> + +<p><small>Les traductions ne sont pas normatives.</small></p> 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 +--- +<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> 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.</p> + +<div class="warning"> +<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre><var>rootNode</var> = <em>node</em>.rootNode; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p> + +<pre class="brush: js">console.log(document.body.rootNode);</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.</p> + + <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> + et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.rootNode")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> 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 +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété <code><strong>Node.baseURIObject</strong></code> 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" (<em>chaîne de caractères</em>).</p> + +<p>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.</p> + +<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>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é.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>N'existe dans aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.baseURIObject")}}</p> 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 +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p> + +<p>{{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.")}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p> + +<h2 id="Notes">Notes</h2> + +<p>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é.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodePrincipal")}}</p> 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 +--- +<p>{{APIRef}}</p> + +<div class="summary"> +<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p> +</div> + +<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> + +<p>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.</p> + +<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p> + +<ul> + <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li> + <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li> + <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li> +</ul> + +<p>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")}}.</p> + +<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2> + +<dl> + <dt>{{domxref("Selection")}}</dt> + <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd> +</dl> + +<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2> + +<dl> + <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt> + <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>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).</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>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).</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>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.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Définition initiale (plus ancienne), à présent obsolète.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown()}}<br> + {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>modify()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setBaseAndExtent()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>deleteFromDocument()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown()}}<br> + {{CompatGeckoMobile(52)}}<sup>[1]</sup></p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>modify()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setBaseAndExtent()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>deleteFromDocument()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li> + <li>L’objet {{domxref("Range")}}.</li> +</ul> 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 +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p>La propriété <strong><code>Window.URL</code></strong> 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")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Utilisation de la méthode statique:</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>Utilisation d'un objet instancié:</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p> + +<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p> 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 +--- +<p>{{ ApiRef() }} {{ Fx_minversion_header(2) }}</p> +<div class="note"> + <p>Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)</p> +</div> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>DOM Storage est le nom donné à l'ensemble des <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">fonctionnalités de stockage</a> introduites dans la spécification <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. 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 <a href="fr/Firefox_2">Firefox 2</a> et suivants.</p> +<div class="note"> + <b>Note :</b> DOM Storage ne doit pas être confondu avec <a href="/Storage">mozStorage</a> (les interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="fr/API_de_restauration_de_session">API de restauration de session</a> (un utilitaire de stockage <a href="fr/XPCOM">XPCOM</a> utilisable par les extensions).</div> +<h3 id="Description" name="Description">Description</h3> +<p>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).</p> +<p>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 « <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a> » qui permet également de conserver des données d'une session de navigation à une autre.</p> +<p>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 <a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">cookies de navigation</a> ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme <a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a>) nécessitent un plugin externe.</p> +<p>Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (une application de prise de notes) écrite par <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. 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.</p> +<p>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.</p> +<h3 id="R.C3.A9f.C3.A9rence" name="R.C3.A9f.C3.A9rence">Référence</h3> +<p>Les objets suivants sont globaux et existent comme propriétés de tout <a href="fr/DOM/window">objet <code>window</code></a>. Cela signifie qu'on peut y accéder avec <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (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).</p> +<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> +<p>Il s'agit d'un objet global (<code>sessionStorage</code>) 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.</p> +<pre class="eval">// 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 ); +</pre> +<p>L'objet <code>sessionStorage</code> 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.</p> +<div class="bug"> + <b>Note :</b> <code>sessionStorage</code> 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 <code>sessionStorage</code> comme mesure préventive est discutable.</div> +<p><b>Exemples :</b></p> +<p>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.</p> +<pre class="eval"> // 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); +</pre> +<p><b>Pour plus d'informations :</b></p> +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">La spécification de <code>sessionStorage</code></a></li> +</ul> +<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> +<p>{{ Non-standard_header() }} Il s'agit d'un objet global (<code>globalStorage</code>) 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).</p> +<pre class="eval">// 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[<span class="nowiki">''</span>].favBrowser = "Firefox"; +</pre> +<p>Plus précisément, l'objet <code>globalStorage</code> 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 <code>globalStorage</code> sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :</p> +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> — Toutes les pages Web au sein du sous-domaine developer.mozilla.org peuvent lire et écrire des données dans cet objet de stockage.</li> +</ul> +<p>{{ 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 <code>localStorage</code>, qui n\'a pas encore été implémenté dans Firefox.") }}</p> +<p><b>Exemples :</b></p> +<p>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.</p> +<p>Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :</p> +<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> +<p>Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :</p> +<pre class="eval"> // 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; +</pre> +<h3 id="Pour_plus_d.27informations" name="Pour_plus_d.27informations">Pour plus d'informations</h3> +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Spécification Web Applications 1.0</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Spécification de Web Applications 1.0 Storage</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Activer/Désactiver DOM Storage dans Firefox ou SeaMonkey</a></li> +</ul> +<h3 id="Exemples" name="Exemples">Exemples</h3> +<ul> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Exemples basiques utilisant DOMStorage</a></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> — Application de prise de notes utilisant DOM Storage.</li> +</ul> +<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h3> +<ul> + <li><a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">Cookies HTTP</a> (<code><a href="fr/DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a> (enregistrement local avec Flash)</li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a> (en anglais)</li> +</ul> +<div class="noinclude"> + </div> +<div class="note"> + <p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> +</div> +<p> </p> 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 +--- +<div class="summary"> +<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p> +</div> + +<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2> + +<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, 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 <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p> + +<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p> + +<pre class="brush: js">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</pre> + +<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p> + +<p><strong>example.html </strong>(la page principale) :</p> + +<pre class="brush: js">var myWorker = new Worker("my_task.js"); + +myWorker.onmessage = function (oEvent) { + console.log("Worker said : " + oEvent.data); +}; + +myWorker.postMessage("ali");</pre> + +<p><strong>my_task.js</strong> (leworker) :</p> + +<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); + +onmessage = function (oEvent) { + postMessage("Hi " + oEvent.data); +};</pre> + +<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p> + +<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3> + +<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4> + +<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p> + +<pre class="brush: js">// 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 + }); + }; + +})();</pre> + +<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p> + +<pre>onmessage = function (oEvent) { + postMessage({ + "id": oEvent.data.id, + "evaluated": eval(oEvent.data.code) + }); +}</pre> + +<p>Exemples d'utilisation :</p> + +<pre class="brush: js">// 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})()");</pre> + +<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4> + +<p>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.</p> + +<p><strong>example.html</strong> (la page principale) :</p> + +<pre class="brush: html"><!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></pre> + +<p><strong>my_task.js</strong> (le worker) :</p> + +<pre class="brush: js">// 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); + } +};</pre> + +<p>Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.</p> + +<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3> + +<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) 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.</p> + +<pre class="brush: js">// 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]); +</pre> + +<div class="note"> +<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p> +</div> + +<h2 id="Workers_embarqués">Workers embarqués</h2> + +<p>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 <code>src</code> et dont l'attribut <code>type</code> 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 :</p> + +<pre class="brush: html"><!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></pre> + +<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p> + +<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3> + +<p>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.</p> + +<h4 id="Le_code_JavaScript">Le code JavaScript</h4> + +<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p> + +<pre class="brush: js">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); + } + };</pre> + +<p>Le worker affecte à la propriété <code>onmessage</code> une fonction qui recevra les messages envoyés lorsque la méthode <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom. <code>var onmessage</code> <code>et function onmessage</code> 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.</p> + +<h4 id="Le_code_HTML">Le code HTML</h4> + +<pre class="brush: 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> +</pre> + +<p>La page web crée un élément <code>div</code> avec l'ID <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker. Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p> + +<p>Finalement, un message est envoyé au worker pour le démarrer.</p> + +<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p> + +<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3> + +<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p> + +<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3> + +<p>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.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li> +</ul> 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 +--- +<p><strong>WebRTC</strong> (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.</p> +<p>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.</p> +<div class="note"> + <p><strong>Note:</strong> Cette documentation n'est pas à jour et est un travail en cours. <strong>Vous voulez aider?</strong> 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 <a href="/fr/docs/MDN/Débuter_sur_MDN">Débuter sur MDN</a> si vous voulez aider.</p> +</div> +<h2 id="Guide">Guide</h2> +<dl> + <dt> + <a href="/fr/docs/WebRTC/Introduction" title="/fr/docs/WebRTC/Introduction">Introduction au WebRTC</a></dt> + <dd> + Guide d'introduction à ce qu’est WebRTC et comment ça marche.</dd> + <dt> + <a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="Communication de pair-à-pair avec WebRTC">Communications Peer-to-peer avec WebRTC</a></dt> + <dd> + Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.</dd> + <dt> + <a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="Prendre des photos avec la webcam">Prendre des photos avec la webcam</a></dt> + <dd> + Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.</dd> + <dt> + <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Introduction à l'architecture WebRTC</a></dt> + <dd> + <strong>(AKA "WebRTC et l'océan des acronymes")</strong> 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.</dd> + <dt> + <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics">L’essentiel du WebRTC</a></dt> + <dd> + 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.</dd> +</dl> +<h2 id="Référence">Référence</h2> +<dl> + <dt> + <a href="/fr/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> + <dd> + L'API pour capturer des médias (audio/video).</dd> + <dt> + <a href="/fr/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a></dt> + <dd> + L'interface traitant en continu des données entre deux pairs.</dd> + <dt> + <a href="/fr/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd> + L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).</dd> +</dl> 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 +--- +<p>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.</p> + +<div> </div> + +<div>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.</div> + +<div> </div> + +<div>Envie de découvrir WebRTC ? <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">Suivre cette introduction vidéo </a>! (en Anglais)</div> + +<div> </div> + +<div> </div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation de WebRTC</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Introduction" title="https://developer.mozilla.org/fr/docs/WebRTC/Introduction">Introduction à WebRTC</a></dt> + <dd>Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API">Utilisation de l'API de flux réseau</a></dt> + <dd>Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.</dd> + <dt><a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Communications de pair-à-pair avec WebRTC</a></dt> + <dd>Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam">Prendre des photos avec la webcam</a></dt> + <dd> </dd> + <dt><a href="/fr/docs/WebRTC/MediaStream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a></dt> + <dd>L'API qui permet la production et la manipulation d'objets de flux multimédia.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia ()</a></dt> + <dd>La fonction de navigation qui permet d'accéder aux périphériques du système des médias.</dd> + </dl> + + <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/WebRTC" title="https://developer.mozilla.org/en-US/docs/tag/WebRTC">Afficher tout ...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Obtenir de l'aide de la communauté</h2> + + <p>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.</p> + + <ul> + <li>Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}</li> + </ul> + + <ul> + <li>Posez votre question sur le canal IRC de Mozilla médias: # media</li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">N'oubliez pas la netiquette...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets liés</h2> + + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">Utiliser l'audio et la vidéo HTML5</a></li> + </ul> + + <h2 class="Tools" id="Ressource">Ressource</h2> + + <ul> + <li>{{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> 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 +--- +<p>{{APIRef()}}</p> + +<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> 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. <code>localStorage</code> a été introduit dans Firefox 3.5.</p> + +<div class="note"><strong>Note :</strong> 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é.</div> + +<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant +localStorage.setItem("username", "John"); + +// Accéder à des données enregistrées +alert("username = " + localStorage.getItem("username"));</pre> + +<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p> + +<h2 id="Compatibilité">Compatibilité</h2> + +<p>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 <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p> + +<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p> + +<pre class="brush:js">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; + })()); +} +</pre> + +<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div> + +<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. 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 <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> + +<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p> + +<pre class="brush:js">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; +} +</pre> + +<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div> + +<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. 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 <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> + +<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3> + +<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p> + +<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p> + +<h2 id="Format_de_stockage">Format de stockage</h2> + +<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p> 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 +--- +<p> </p> + +<ol> + <li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> +</ol> + +<p> </p> + +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>{{Next("XSLT dans Gecko:Exemple basique")}}</p> + +<div class="originaldocinfo"> +<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> + +<ul> + <li>Auteur(s) : Doron Rosenberg</li> + <li>Dernière mise à jour : 30 janvier 2003</li> + <li>Copyright : © 2003 Netscape Communications.</li> + <li>URL : <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/xslt-browser/index_en.html">XSLT in Netscape Gecko</a></li> +</ul> +</div> + +<p><span class="comment">Interwiki Languages Links</span></p> 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 +--- +<p> +</p><p>XSLTProcesor est un objet fournissant une interface avec le moteur XSLT de Mozilla. Il est utilisable par du code JavaScript sans privilèges. +</p> +<ul><li> <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a> +</li><li> <a href="fr/L'interface_XSLT%2f%2fJavaScript_dans_Gecko">L'interface XSLT/JavaScript dans Gecko</a> +</li><li> <a class="external" href="http://xulplanet.com/references/objref/XSLTProcessor.html">XULPlanet reference (en)</a> +</li></ul> +<p><span>Interwiki Languages Links</span> +</p>{{ languages( { "en": "en/XSLTProcessor" } ) }} |