From 6610a471aa98f393d61d7106b83a972980f50233 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 11 Feb 2022 08:07:53 +0100 Subject: Remove mozillademos for web (other than css/js) (#3627) * Update web components page vs en-us * update filereader.readasdataurl vs en-us --- files/fr/web/api/filereader/readasdataurl/index.md | 72 ++++---- files/fr/web/web_components/index.md | 181 ++++++++++++++++----- 2 files changed, 175 insertions(+), 78 deletions(-) (limited to 'files') diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md index bc00d1b624..31a0350ffe 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.md +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -2,63 +2,69 @@ title: FileReader.readAsDataURL() slug: Web/API/FileReader/readAsDataURL translation_of: Web/API/FileReader/readAsDataURL +browser-compat: api.FileReader.readAsDataURL --- -{{APIRef("API File")}} +{{APIRef("File API")}} -La méthode `readAsDataURL` permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état `DONE`, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64. +La méthode **`FileReader.readAsDataURL()`** est utilisée afin de lire le contenu d'un blob ([`Blob`](/fr/docs/Web/API/Blob)) ou d'un fichier ([`File`](/fr/docs/Web/API/File)). Lorsque l'opération de lecture est terminée, [`readyState`](/fr/docs/Web/API/FileReader/readyState) prend la valeur `DONE`, et l'évènement [`loadend`](/fr/docs/Web/API/XMLHttpRequest/loadend_event) est déclenché. À partir de ce moment, la propriété [`result`](/fr/docs/Web/API/FileReader/result) contient les données sous la forme d'une [URL de données](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) qui représente les données du fichier sous la forme d'une chaîne de caractères encodée en base64. + +> **Note :** Pour un blob, [`result`](/fr/docs/Web/API/FileReader/result) ne peut pas être décodé en base64 sans avoir d'abord retiré la déclaration d'URL de données qui précède les données encodées. Pour récupérer uniquement la chaîne encodée en base 64, il faut d'abord supprimer le préfixe `data:*/*;base64,` du résultat. ## Syntaxe - instanceOfFileReader.readAsDataURL(blob); +```js +instanceOfFileReader.readAsDataURL(blob); +``` ### Paramètres - `blob` - - : L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture. + - : L'objet [`Blob`](/fr/docs/Web/API/Blob) ou [`File`](/fr/docs/Web/API/File) qu'on souhaite lire. + +## Exemples -## Exemple +### Exemple simple -### HTML +#### HTML ```html
-Aperçu de l’image... +Prévisualisation de l'image… ``` -### JavaScript +#### JavaScript ```js function previewFile() { -  var preview = document.querySelector('img'); -  var file    = document.querySelector('input[type=file]').files[0]; -  var reader  = new FileReader(); + const preview = document.querySelector('img'); + const file = document.querySelector('input[type=file]').files[0]; + const reader = new FileReader(); -  reader.addEventListener("load", function () { -    preview.src = reader.result; -  }, false); + reader.addEventListener("load", function () { + // on convertit l'image en une chaîne de caractères base64 + preview.src = reader.result; + }, false); -  if (file) { -    reader.readAsDataURL(file); -  } + if (file) { + reader.readAsDataURL(file); + } } ``` -### Résultat en direct - -{{EmbedLiveSample("Exemple", "100%", 240)}} +#### Résultat +{{EmbedLiveSample("", "100%", 240)}} +### Lire plusieurs fichiers -## Exemple de lecture de plusieurs fichiers - -### HTML +#### HTML ```html
``` -### JavaScript +#### JavaScript ```js function previewFiles() { @@ -68,7 +74,8 @@ function previewFiles() { function readAndPreview(file) { - // Veillez à ce que `file.name` corresponde à nos critères d’extension + // On s'assure que `file.name` termine par + // une des extensions souhaitées if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new FileReader(); @@ -92,18 +99,17 @@ function previewFiles() { } ``` -> **Note :** Le constructeur [`FileReader()`](/en-US/docs/Web/API/FileReader) n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre [solution d’aperçu d’image multinavigateur](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html). Examinez également cette [alternative plus puissante](https://mdn.mozillademos.org/files/3698/image_upload_preview.html). - +> **Note :** Le constructeur [`FileReader()`](/fr/docs/Web/API/FileReader) n'était pas pris en charge pour les versions d'Internet Explorer antérieures à IE 10. Voir aussi [cet autre exemple](https://mdn.mozillademos.org/files/3698/image_upload_preview.html). + ## Spécifications -| Spécification | État | Commentaire | -| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName("API File", "#FileReader-interface", "FileReader")}} | {{Spec2("API File")}} | Définition initiale | +{{Specifications}} -## Compatibilité avec les navigateurs +## Compatibilité des navigateurs -{{Compat("api.FileReader.readAsDataURL")}} +{{Compat}} ## Voir aussi -- {{domxref("FileReader")}} +- [`FileReader`](/fr/docs/Web/API/FileReader) +- [`URL.createObjectURL()`](/fr/docs/Web/API/URL/createObjectURL) \ No newline at end of file diff --git a/files/fr/web/web_components/index.md b/files/fr/web/web_components/index.md index c94b26038a..e283537856 100644 --- a/files/fr/web/web_components/index.md +++ b/files/fr/web/web_components/index.md @@ -1,70 +1,161 @@ --- -title: Web Components +title: Web Components (composants web) slug: Web/Web_Components -tags: - - Composants Web translation_of: Web/Web_Components --- -{{DefaultAPISidebar("Web Components")}}{{ draft }} +{{DefaultAPISidebar("Web Components")}} -Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d'interface graphique personnalisés et réutilisables, qui ont été créés en utilisant des technologies web libres. Ils font partie du navigateur, et donc ne nécessitent pas de bibliothèque externe comme jQuery ou Dojo. Un Composant Web existant peut être utilisé sans l'écriture de code, en ajoutant simplement une déclaration d'importation à une page HTML. Les Composants Web utilisent les nouvelles capacités standard de navigateur, ou celles en cours de développement. +Les composants web (Web Components) sont un ensemble de plusieurs technologies qui permettent de créer des éléments personnalisés réutilisables, dont les fonctionnalités sont encapsulées en dehors du reste du code et qui peuvent être utilisées au sein d'applications web. ## Concepts et utilisation -En tant que développeurs, nous savons tous à quel point la réutilisation de code est une bonne chose. Malgré cela, historiquement, il a toujours été difficile de réutiliser les languages balisés. Prenez par exemple tous ces éléments complexes en HTML que vous avez créés et dû répéter dans vos applications avec le risque que votre code devienne incompréhensible. +On essaie tant que possible de réutiliser du code. Cette réutilisation n'a pas toujours été simple pour du HTML, CSS et JavaScript complexe utilisé pour créer des éléments d'interface utilisateur personnalisés. Réutiliser de tels éléments d'interface peuvent gâcher une page si on ne fait pas attention. -Les composants Web ont pour but de résoudre ce problème et consistent en 3 technologies qui peuvent être utilisées ensemble pour créer des éléments réutilisables, encapsulés, versatiles et sans risquer une collision avec d'autre morceaux de code. +Les composants web (Web Components en anglais) visent à résoudre ces problèmes. Il s'agit de trois technologies qui peuvent être combinées ensemble pour créer des éléments sur mesure avec des fonctionnalités encapsulées et qu'on peut réutiliser à volonté, sans risque de collisions. -- [Custom Elements: ](/fr/docs/Web/Web_Components/Custom_Elements)pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur. -- [HTML Templates: ](/fr/docs/Web/HTML/Element/template)squelette pour créer des éléments HTML instanciables. -- [Shadow DOM: ](/fr/docs/Web/Web_Components/Shadow_DOM)permet d'encapsuler le JavaScript et le CSS des éléments. +- **Les éléments personnalisés (custom elements)** : un ensemble d'API JavaScript qui permettent de définir des éléments personnalisés ainsi que leur comportement +- **Le Shadow DOM** : un ensemble d'API JavaScript qui permettent d'attacher un DOM « sombre » encapsulé à un élément, qui est rendu séparément du DOM du document principal et de contrôler les fonctionnalités associées. Ainsi, les fonctionnalités d'un élément peuvent être gardées privées pour que la mise en forme et le script puissent être appliqués sans risque de collision avec les autres parties du document. +- **Les gabarits HTML** : les éléments [`