recursal/MDN huggingface dataset:
WebAssembly.Table.prototype.set()
=================================

La méthode **`set()`**, rattachée au prototype de `WebAssembly.Table`, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.

Syntaxe
-------


```js
table.set(index, valeur);
```

### Paramètres

`index`

L'index de la référence de la fonction qu'on souhaite modifier.

`valeur`

La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être une fonction exportée WebAssembly (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).

### Valeur de retour

Aucune.

### Exceptions

* Si `index` est supérieur ou égal à `Table.prototype.length`, une exception `RangeError` sera levée.
* Si `valeur` n'est pas une fonction WebAssembly exportée ou la valeur `null`, une exception `TypeError` sera levée.
Exemples
--------

Dans l'exemple qui suit (basé sur le code source de `table2.html` et qui dispose d'une démonstration), on crée ue nouvelle instance d'un tableau WebAssembly (`Table`) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode `Table.prototype.get()`) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur `null`).


```js
var tbl = new WebAssembly.Table({ initial: 2, element: "anyfunc" });
console.log(tbl.length);
console.log(tbl.get(0));
console.log(tbl.get(1));
```


On crée ensuite un objet d'import qui contient une référence au tableau :


```js
var importObj = {
  js: {
    tbl: tbl,
  },
};
```


Enfin, on charge et on instancie le module WebAssembly (`table2.wasm`) grâce à la méthode `WebAssembly.instantiateStreaming()`, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module `table2.wasm` (cf. la représentation textuelle) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :


```js
WebAssembly.instantiateStreaming(fetch("table2.wasm"), importObject).then(
  function (obj) {
    console.log(tbl.length);
    console.log(tbl.get(0)());
    console.log(tbl.get(1)());
  },
);
```


On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit `get(0)()` plutôt que `get(0)`) .

Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-set |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
Constructeur WebAssembly.Table()
================================

Le constructeur **`WebAssembly.Table()`** crée un nouvel objet `Table` de la taille et du type d'élément donné.

Syntaxe
-------


```js
new WebAssembly.Table(descripteurTable);
```

### Paramètres

*descripteurTable*

Un objet qui peut contenir les propriétés suivantes :

`element`

Une chaîne de caractères représentant le type de valeur à stocker dans la table. Pour le moment, sa valeur ne peut être que `"anyfunc"` (indiquant les fonctions).

`initial`

Le nombre initial d'éléments dans la table WebAssembly.

*maximum Facultatif*

Le nombre maximal d'éléments jusqu'auquel la table WebAssembly peut grandir.


### Exceptions

* Si `descripteurTable` n'est pas un objet, une exception `TypeError` sera levée.
* Si `maximum` est fourni et est inférieur à `initial`, une exception `RangeError` sera levée.
Exemples
--------

### Créer une nouvelle instance d'une Table WebAssembly

Dans l'exemple suivant (voir le code source et la démo live correspondants), on crée une nouvelle instance d'une table WebAssembly avec une taille initiale de 2 éléments. On affiche alors la longueur de la table et son contenu (grâce à `Table.prototype.get()` pour montrer que la longueur vaut 2 et que les deux éléments sont `null`.


```js
var tbl = new WebAssembly.Table({ initial: 2, element: "anyfunc" });
console.log(tbl.length); // "2"
console.log(tbl.get(0)); // "null"
console.log(tbl.get(1)); // "null"
```


On peut ensuite créer un objet d'import qui contient la table :


```js
var importObj = {
  js: {
    tbl: tbl,
  },
};
```


Enfin, on charge et on instancie un module WASM (table2.wasm) en utilisant la méthode `WebAssembly.instantiateStreaming()`. Le module table2.wasm contient deux fonctions (une qui renvoie 42 et l'autre qui renvoie 83) et on stocke ces deux fonctions dans les éléments 0 et 1 de la table importée (voir la représentation textuelle). Ainsi, après l'instanciation, la table a toujours une longueur qui vaut 2 et les éléments contiennent désormais des fonctions WebAssembly exportées qu'on peut appeler depuis le code JavaScript.


```js
WebAssembly.instantiateStreaming(fetch("table2.wasm"), importObject).then(
  function (obj) {
    console.log(tbl.length);
    console.log(tbl.get(0)());
    console.log(tbl.get(1)());
  },
);
```


On notera qu'il faut inclure une deuxième paire de parenthèses afin d'invoquer la fonction référencée et d'afficher la valeur qui y est stockée (on écrit donc `get(0)()` plutôt que `get(0)`) .

Dans cet exemple, on illustre la création et l'accès à la table depuis du code JavaScript, mais cette même table est visible depuis l'instance WASM également.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-table |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La page WebAssembly
* Concepts WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.Table.prototype.grow()
==================================

La méthode **`grow()`**, rattachée au prototype de `WebAssembly.Table`, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.

Syntaxe
-------


```js
table.grow(nombre);
```

### Paramètres

`nombre`

Le nombre d'éléments qu'on souhaite ajouter au tableau.

### Valeur de retour

La taille du tableau avant l'agrandissement.

### Exceptions

Si l'opération `grow()` échoue, pour quelque raison que ce soit, une exception `RangeError` sera levée.

Exemples
--------

Dans l'exemple qui suit, on crée une instance de `Table` pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.


```js
var table = new WebAssembly.Table({
  element: "anyfunc",
  initial: 2,
  maximum: 10,
});
```


On étend ensuite le tableau d'une unité en utilisant la méthode `grow()` :


```js
console.log(table.length); // "2"
console.log(table.grow(1)); // "2"
console.log(table.length); // "3"
```

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-grow |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
WebAssembly.Table.prototype.get()
=================================

La méthode **`get()`**, rattachéee au prototype de `WebAssembly.Table()`, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.

Syntaxe
-------


```js
var funcRef = table.get(index);
```

### Paramètres

`index`

L'index de la référence de fonction qu'on souhaite récupérer.

### Valeur de retour

Une référence de fonction, c'est-à-dire une fonction WebAssembly exportée qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.

### Exceptions

Si `index` est supérieur ou égal à `Table.prototype.length`, la méthode lèvera une exception `RangeError`.

Exemples
--------

Dans l'exemple suivant (cf. le fichier `table.html` sur GitHub ainsi que le résultat obtenu), on compile et on instancie le *bytecode* chargé, `table.wasm`, grâce à la méthode `WebAssembly.instantiateStreaming()`. On récupère ensuite les références stockées dans le tableau d'export.


```js
WebAssembly.instantiateStreaming(fetch("table.wasm")).then(function (obj) {
  var tbl = obj.instance.exports.tbl;
  console.log(tbl.get(0)()); // 13
  console.log(tbl.get(1)()); // 42
});
```


On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise `get(0)()` plutôt que `get(0)`). La valeur exportée est une fonction plutôt qu'une valeur simple.

Spécifications
--------------

| Specification |
| --- |
| WebAssembly JavaScript Interface # dom-table-get |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le portail WebAssembly
* Les concepts relatifs à WebAssembly
* Utiliser l'API JavaScript WebAssembly
Optimisation et performances
============================

Lorsque l'on créent des sites et des applications internet modernes, il est important que notre code soit performant. C'est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d'un site ou de blog internet. Les plus connus sont listés ci-dessous :

* Google PageSpeed Insights
* Pingdome - Website Performance Monitoring
* ySlow

Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d'optimisation. Plusieurs produits logiciels open source à l'instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d'optimisez leurs performances web. WP Super Charge est un des plugins disponible sur la boutique de WordPress, il permet à l'utilisateur d'optimisez les performances de son site en un clic.

Budgets de performanceUn budget de performance est une limite pour éviter les régressions. Il peut s'appliquer à un fichier, un type de fichier, tous les fichiers chargés sur une page, une métrique spécifique (par exemple, Time to Interactive), une métrique personnalisée (par exemple, Time to Hero Element), ou un seuil sur une période de temps.

Le chargement différéLe **chargement différé** (*lazy loading* en anglais) est une stratégie d'identification des ressources non bloquantes (non critiques) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon de raccourcir le chemin critique de rendu (en-US), ce qui se traduit par une réduction du temps de chargement de la page.

Remplir la page: comment fonctionnent les navigateursLes utilisateurs veulent des expériences Web avec un contenu rapide à charger et une interaction fluide. Par conséquent, un développeur doit s'efforcer d'atteindre ces deux objectifs.

Temps de chargement : à partir de quel moment un site est-il « lent » ?Il n'y a pas de règle stricte définissant ce qui constitue un site trop long à charger, mais il y a des bonnes pratiques spécifiques pour définir un bon temps de chargement du contenu (1 seconde), de fonctionnement au ralenti (50 millisecondes), d'animation (16,7 secondes) ou encore de réponse à la saisie d'un visiteur (50 à 200 millisecondes).
XSLT
====

**Référence XSLT/XPath** : Éléments XSLT, Fonctions EXSLT, Fonctions XPath, Axes XPath

**Extensible Stylesheet Language Transformations (XSLT)** est un langage basé sur le XML utilisé avec des logiciels de traitements spécialisés pour la transformation de documents XML.

Bien que le traitement soit souvent qualifié de transformation, le document original reste inchangé et c'est un nouveau document XML qui est créé à partir du contenu d'un document existant. Ensuite, le nouveau document pourra être sérialisé par le mécanisme de traitement afin de produire un résultat au format XML standard ou dans un autre format comme HTML ou encore du texte brut.

XSLT est le plus souvent utilisé pour convertir des données entre différents schémas XML ou pour convertir des données XML en pages web ou en documents PDF.

Documentation
-------------

Référence des éléments XSLT

La référence indiquant la documentation pour chaque élément XSLT.

Transformer du XML avec XSLT

XSLT permet d'utiliser une feuille de style pour transformer un document XML initial de deux façons : manipuler et trier le contenu (y compris en réordonnant l'ensemble du document si besoin) d'une part et transformer le contenu dans un format différent d'autre part.

Utiliser l'interface JavaScript Mozilla pour les transformations XSL

Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT dans Mozilla 1.2 et les versions ultérieures.

Définir les paramètres utilisant des instructions de traitement

Firefox permet d'indiquer des paramètres de feuille de styles en utilisant l'instruction de traitement `<?xml-stylesheet?>`. Cela se fait en avec l'instruction de traitement `<?xslt-param?>`, décrite dans cet article.

Tutoriel XSLT

Ce tutoriel W3Schools indique comment utiliser XSLT pour transformer les documents XML dans d'autres formats, comme du XHTML.

Qu'est-ce que XSLT ?

Cet article est une riche introduction à XSLT et à XPath, sans connaissance particulière nécessaire des technologies. Il guide la lectrice ou le lecteur parmi le contexte, les raisons de ce langage, sa structure, ses concepts et sa terminologie.

Erreurs fréquentes avec XSLT (en-US)

Cet article liste certains des problèmes fréquemment rencontrés en utilisant XSLT avec Firefox.

Sujets connexes
---------------

* XML
* XPath
MathML
======

**Mathematical Markup Language (MathML)** est un langage basé sur XML permettant de décrire des formules mathématiques.

MathML était à l'origine conçu comme une spécification générique pour les navigateurs, les suites bureautiques, les systèmes de calcul formel, les lecteurs EPUB, les générateurs vers LaTeX… Toutefois, cette approche n'était pas adaptée au Web : le sous-ensemble concernant la sémantique n'a jamais été implémenté dans les navigateurs tandis que le sous-ensemble sur la disposition mathématique a conduit à des implémentations incomplètes et/ou incohérentes par les navigateurs.

*MathML Core* est un sous-ensemble avec des détails d'implémentation plus précis, basés sur des règles provenant de LaTeX et du format Open Font. Il est conçu pour les navigateurs et pour fonctionner en accord avec les autres standards du Web que sont HTML, CSS, DOM, et JavaScript.

Vous trouverez ici des liens vers la documentation, les exemples et les outils permettant de travailler avec cette technologie. Bien que nombre de ces ressources soient encore basées sur *MathML Full*, la transition vers *MathML Core* est en cours. Il est recommandé d'utiliser cette nouvelle spécification pour le développement et l'édition sur le Web et de recourir à d'autres technologies web pour compléter les cas d'usages qui étaient uniquement couverts par l'ancienne spécification.

Référence MathML
----------------

Référence des éléments MathML

Des informations précises sur chaque élément MathML et leurs compatibilités avec les différents navigateurs.

Référence des attributs MathML

Des informations sur les attributs MathML qui modifient l'apparence ou le comportement des éléments.

Exemples MathML

Des fragments de code MathML ainsi que des exemples pour comprendre son fonctionnement.

Éditer du MathML

Des conseils sur l'édition de document en MathML : les éditeurs à utiliser et comment intégrer le code produit dans du contenu web.

Obtenir de l'aide de la communauté
----------------------------------

* La page d'accueil de W3C Math
* Les archives mail de www-math w3.org
* Le groupe Google mozilla.dev.tech.mathml (inactif depuis 2020)
* Le wiki utilisé par les contributrices et contributeurs de Mozilla (page éditée pour la dernière fois en 2016)
Outils
------

* Le validateur W3C
* L'ensemble d'extensions Mathzilla pour Firefox
* TeXZilla — convertisseur JavaScript de LaTeX à MathML (démo, extension Firefox, utilisation dans une page web, un programme JavaScript, etc.)
* LaTeXML qui permet de transformer des documents LaTeX en pages HTML+MathML
* MathJax — moteur de rendu de JavaScript pour les formules mathématiques, compatible avec tous les navigateurs. Pour forcer MathJax à utiliser le MathML natif, essayez cette extension Firefox, ou cette extension pour Safari ou ce script GreaseMonkey.
Sujets connexes
---------------

* CSS
* HTML
* SVG
Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XML: Extensible Markup Language
===============================

Le langage de balisage extensible (nommé **Extensible Markup Language**) est une stricte sérialisation du DOM.

Introduction à XMLXML, pour *e**X**tensible **M**arkup **L**anguage* (langage de balisage extensible), est un langage de balisage généraliste recommandé par le W3C comme l'est HTML. XML est un sous-ensemble du langage SGML. Cela signifie que contrairement aux autres langages de balisages, XML n'est pas prédéfini, vous devez définir vos propres balises. Le but principal de ce langage est le partage de données entre différents systèmes, tel qu'Internet.
Applications web progressives
=============================

Les **applications web progressives** (ou *progressive web applications* en anglais, abrégées en PWAs) sont des applications web qui utilisent les *service workers*, les manifestes, et d'autres fonctionnalités de la plateforme web, avec l'amélioration progressive pour fournir aux utilisatrices et utilisateurs une expérience équivalente à celle des applications natives.

Les applications web progressives ont plusieurs avantages : elles peuvent être installées, améliorées progressivement, conçues de façon adaptative, maintenir l'engagement, être indiquées avec un lien, découvrables, indépendantes de l'état du réseau, et sécurisées.

Guides et autres documentations sur les PWA
-------------------------------------------

Ces documents d'introduction et ces guides vous feront découvrir les différentes facettes de la construction d'une PWA :

* Introduction aux applications web progressives
* Structure d'une application web progressive et aperçu structurel (en-US)
* Comprendre les briques de construction de la conception adaptative
* Le fonctionnement hors-ligne des PWA à l'aide des *service workers*
* Comment rendre une PWA installable, activer la fonctionnalité « ajouter à l'écran d'accueil », et plus de détails sur l'installation des PWA (en-US)
* Comment utiliser les API Notifications et Push pour l'engagement
* Comment activer le chargement progressif
* Comment construire des PWA pensées pour le mobile (en-US)
* Utiliser les *service workers*
* Utiliser le stockage côté client, IndexedDB, et l'API Web Storage
* Utiliser l'API Notifications et l'API Push
Voir aussi
----------

* La page de présentation des PWA de Google (en anglais) et une liste de bonnes pratiques (en anglais) sur web.dev (en anglais)
* Tout ce qu'il y a à savoir sur les PWA (en anglais)
* Les PWA : sortir des onglets sans y laisser son âme (en anglais)
* Chargement instantané des applications web avec une architecture de coquille d'application (en anglais)
* Workbox (en anglais), un ensemble de bibliothèques pour aider au développement d'une application web progressive de qualité
* Lighthouse (en anglais), une application web d'audit et qui inclut des fonctionnalités d'audit relatives aux PWA
* `localForage` (en anglais), une bibliothèque de stockage asynchrone avec une API similaire à `localStorage` et qui permet d'améliorer l'ergonomie hors-ligne de votre PWA
SVG (Scalable Vector Graphics)
==============================

Démarrer avec SVG
-----------------

**SVG (pour *Scalable Vector Graphics* en anglais, soit « graphiques vectoriels adaptables »**) est un langage construit à partir de XML et qui permet de décrire des graphiques vectoriels en deux dimensions.

Il s'agit d'un format texte, standardisé de façon ouverte pour le Web, pour décrire des images qui peuvent être affichées nettement à n'importe quelle taille et qui est conçu pour fonctionner avec les autres technologies web standard comme CSS, DOM, JavaScript, et SMIL. D'une certaine façon, SVG est aux graphiques ce que HTML est au texte.

Les images SVG et leur comportement sont définies dans des fichiers texte XML. Cela signifie qu'on peut rechercher dans ces textes, les indexer, réaliser des opérations scriptées, les compresser. De plus, cela signifie aussi qu'on peut en créer ou en éditer avec n'importe quel éditeur de texte ou avec des logiciels de dessin.

Contrairement aux images matricielles classiques aux formats JPEG ou PNG, les images SVG peuvent être affichées à n'importe quelle taille sans perte de qualité. De plus, on peut les localiser en adaptant le texte qu'elles contiennent, sans avoir nécessairement besoin d'un éditeur graphique. Avec des bibliothèques logicielles adaptées, les fichiers SVG peuvent être traduits à la volée.

SVG a été développé par le W3C (World Wide Web Consortium) depuis 1999.

Voir aussi le tutoriel SVG.

Documentation
-------------

Référence des éléments SVG

Des informations à propos de chaque élément SVG.

Référence des attributs SVG

Des informations à propos de chaque attribut SVG.

Référence du DOM SVG

Des informations quant à l'API DOM exposée par SVG, qui permet des interactions avec JavaScript.

Appliquer des effets SVG à du contenu HTML

SVG peut fonctionner avec HTML, CSS, et JavaScript. On pourra utiliser SVG pour améliorer de façon progressive une page ou une application web.

Outils
------

* Suite de tests SVG
* Validateur de balisage
Exemples
--------

* Bonnes pratiques pour l'édition de SVG (en anglais)
* SVG comme image
* Animation SVG avec SMIL
* Galerie d'art SVG
* D3 (une bibliothèque JavaScript qui permet de visualiser des données avec HTML, SVG, et CSS)