recursal/MDN huggingface dataset:
Contexte de formatage de blocs
==============================

Un **contexte de formatage de blocs** (*block formatting context*) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.

Un contexte de formatage de blocs est créé dans les situations suivantes :

* L'élément racine ou quelque chose qui le contient
* Les éléments flottants (éléments avec une valeur pour la propriété `float` autre que `none`)
* Les éléments avec une position absolue (éléments avec la propriété `position` à `absolute` ou `fixed`)
* Les blocs en ligne (éléments avec la propriété `display` à `inline-block`)
* Les cellules de tableau (éléments avec `display``: table-cell`, ce qui est le défaut pour les cellules de tableau)
* Les titres de tableau (éléments avec `display``: table-caption`, ce qui est le défaut pour `<caption>`)
* Les éléments où `overflow` a une valeur autre que `visible`
* Les boîtes flexibles (éléments avec `display``: flex` ou `inline-flex`)
* `display``: flow-root`

Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.

Les contextes de formatage de blocs sont important pour le positionnement (voir `float` et `clear`). Les règles de positionnement et de "libération" des blocs flottants (par `clear`) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et `clear` ne libère que des blocs flottants dans le même contexte de formatage de blocs.

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

* CSS 2.1
Voir aussi
----------

* `float`
* `clear`
* `display`
Guide JavaScript
================

Le guide JavaScript illustre comment utiliser JavaScript et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la référence JavaScript.

Chapitres
---------

Ce guide est divisé en plusieurs chapitres :

Introduction
------------

* À propos de ce guide
* À propos de JavaScript
* JavaScript et Java
* ECMAScript
* Les outils
* Hello World
Grammaire et types
------------------

* Syntaxe de base et commentaires
* Déclarations
* Portées des variables
* Remontée des variables
* Structures de données et types
* Littéraux
Contrôle du flux et gestion des erreurs
---------------------------------------

* `if...else`
* `switch`
* `try/catch/throw`
* Objets `Error`
Itération et boucles
--------------------

* `for`
* `while`
* `do...while`
* `break`/continue
* `for..in`
* `for..of`
Fonctions
---------

* Définir des fonctions
* Appeler des fonctions
* Portées des fonctions
* Fermetures (*closures*)
* Arguments et paramètres
* Fonctions fléchées
Expressions et opérateurs
-------------------------

* Affectation et comparaisons
* Opérateurs arithmétiques
* Opérateurs binaires et logiques
* Opérateur conditionnel
Nombres et dates
----------------

* Littéraux numériques
* Objet `Number`
* Objet `Math`
* Objet `Date`
Formatage du texte
------------------

* Littéraux de chaînes de caractères
* Objet `String`
* Littéraux de gabarits
* Internationalisation
* Expressions rationnelles
Collections indexées
--------------------

* Tableaux
* Tableaux typés
Collections avec clés - `Map`
-----------------------------

* `WeakMap`
* `Set`
* `WeakSet`
Utiliser les objets
-------------------

* Objets et propriétés
* Création d'objets
* Définition de méthodes
* Accesseurs et mutateurs
Le modèle objet JavaScript en détails
-------------------------------------

* Modèle à base de prototypes
* Créer des hiérarchies d'objets
* Héritage
Promesses
---------

* Garanties
* Chaînage
* Propagation des erreurs
* Composition
* Gestion du temps
Itérateurs et générateurs
-------------------------

* Itérateurs
* Itérables
* Générateurs
Métaprogrammation
-----------------

* `Proxy`
* Gestionnaires et trappes
* Proxy révocable
* `Reflect`
Modules JavaScript
------------------

* Exporter
* Importer
* Exports par défaut
* Renommage
* Agrégation de modules
* Chargement dynamique de modules
* Suivant »
extends
=======

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

* Learn more
* See full compatibility
* Report feedback
Le mot-clé **`extends`** est utilisé dans les déclarations et expressions de classes afin de signifier qu'un type représenté par une classe hérite d'un autre type.

Exemple interactif
------------------

Syntaxe
-------


```js
class ClasseFille extends ClasseParente { ... }
```

Description
-----------

Le mot-clé `extends` peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).

La propriété `.prototype` d'une classe fille (aussi appelée une *extension*) doit être un `Object` ou `null`.

Exemples
--------

### Utiliser `extends`

Ce fragment de code est tiré de cet exemple et crée une classe `Carré` qui hérite de `Polygone` :


```js
class Carré extends Polygone {
  constructor(longueur) {
    // On utilise le constructeur de la classe parente
    // avec le mot-clé super
    super(longueur, longueur);
    // Pour les classes dérivées, super() doit être appelé avant de
    // pouvoir utiliser 'this' sinon cela provoque une exception
    // ReferenceError
    this.nom = "Carré";
  }

  get aire() {
    return this.hauteur \* this.largeur;
  }
}
```

### Utiliser `extends` avec des objets natifs

Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour `Date` :


```js
class maDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var mois = [
      "Jan",
      "Fév",
      "Mar",
      "Avr",
      "Mai",
      "Juin",
      "Juil",
      "Août",
      "Sep",
      "Oct",
      "Nov",
      "Déc",
    ];
    return (
      this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear()
    );
  }
}
```


Ces exemples sont extraits de ces deux pages : démonstration, source.

### Étendre `null`

Étendre `null` se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de `Object.prototype` (en-US).


```js
class extensionNull extends null {
  constructor() {}
}

Object.getPrototypeOf(extensionNull); // Function.prototype
Object.getPrototypeOf(extensionNull.prototype); // null

new extensionNull(); // ReferenceError
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-class-definitions |

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

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

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

* Les classes
* `super`
ReferenceError
==============

L'objet **`ReferenceError`** représente une erreur qui se produit lorsqu'il fait référence à une variable qui n'existe pas (ou qui n'a pas encore été initialisée) dans la portée courante.

Constructeur
------------

`ReferenceError()`

Crée un nouvel objet `ReferenceError`.

Propriétés des instances
------------------------

`ReferenceError.prototype.message`

Le message d'erreur.

`ReferenceError.prototype.name`

Le nom d'erreur. Hérité depuis `Error`.

`ReferenceError.prototype.fileName`

Le chemin du fichier qui a déclenché cette erreur. Hérité depuis `Error`.

`ReferenceError.prototype.lineNumber`

Le numéro de la ligne du fichier qui a déclenché cette erreur. Hérité depuis `Error`.

`ReferenceError.prototype.columnNumber`

Le numéro de colonne dans la ligne du fichier qui a déclenché cette erreur. Hérité depuis `Error`.

`ReferenceError.prototype.stack`

La pile d'appels. Héritée depuis `Error`.

Exemples
--------

### Intercepter une exception `ReferenceError`


```js
try {
  let a = variableNonDefinie;
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "variableNonDefinie is not defined"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 6
  console.log(e.stack); // "@Scratchpad/2:2:7\n"
}
```

### Créer une exception `ReferenceError`


```js
try {
  throw new ReferenceError("Bonjour", "unFichier.js", 10);
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "Bonjour"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "unFichier.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // "@Scratchpad/2:2:9\n"
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-referenceerror |

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

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

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

* `Error`
decodeURIComponent()
====================

La fonction **`decodeURIComponent()`** permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par `encodeURIComponent` ou par une méthode similaire.

Exemple interactif
------------------

Syntaxe
-------


```js
decodeURIComponent(encodedURI);
```

### Paramètres

`encodedURI`

Un composant d'URI qui est encodé.

### Valeur de retour

Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.

### Exceptions levées

Cette méthode lève une exception `URIError` ("*malformed URI sequence*") lorsqu'elle est utilisée de façon incorrecte.

Description
-----------

Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.

Exemples
--------

### Décoder un composant d'URL encodé


```js
decodeURIComponent("JavaScript\_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
// "JavaScript\_шеллы"
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-decodeuricomponent-encodeduricomponent |

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

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

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

* `decodeURI`
* `encodeURI`
* `encodeURIComponent`
ArrayBuffer
===========

L'objet **`ArrayBuffer`** est utilisé afin de représenter un tampon (*buffer*) de données binaires de longueur fixe de façon générique.

Il s'agit d'un tableau d'octets. Il n'est pas possible de manipuler directement le contenu d'un `ArrayBuffer`, la manipulation se fait de façon indirecte en créant un tableau typé ou un objet `DataView` qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.

Le constructeur `ArrayBuffer()` permet de créer un nouvel objet `ArrayBuffer` dont la longueur, en octets, est fournie par l'argument. Il est aussi possible d'obtenir un tableau typé à partir de données existantes, par exemple depuis une chaîne en Base64 ou depuis un fichier local.

Constructeur
------------

`ArrayBuffer()`

Crée un nouvel objet `ArrayBuffer`.

Propriétés statiques
--------------------

`get ArrayBuffer[@@species]`

La fonction de construction utilisée pour créer des objets dérivés.

Méthodes statiques
------------------

`ArrayBuffer.isView(arg)`

Renvoie `true` si `arg` est une des vues sur le tableau typé sous la forme d'un objet de tableau typé ou `DataView` et `false` sinon.

Propriétés des instances
------------------------

`ArrayBuffer.prototype.byteLength`

La taille exprimée en octets, et en lecture seule, de l'objet `ArrayBuffer`. Elle est établie à la construction du tableau et ne peut pas être changée.

Méthodes des instances
----------------------

`ArrayBuffer.prototype.slice()`

Renvoie un nouvel objet `ArrayBuffer` dont le contenu est une copie des octets de l'objet `ArrayBuffer` courant entre l'indice de début (inclus) et l'indice de fin (exclus), passés en argument. Si les valeurs fournies pour l'indice de début ou de fin sont négatives, elles expriment un indice compté depuis la fin du tableau (plutôt que depuis le début).

Exemples
--------

### Créer un objet `ArrayBuffer`

Dans cet exemple, on crée un tampon de mémoire sur 8 octets avec une vue `Int32Array` qui porte sur le tampon :


```js
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-arraybuffer-objects |

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

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

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

* Une prothèse d'émulation (*polyfill*) pour `ArrayBuffer` dans la bibliothèque `core-js`
* Les tableaux typés en JavaScript
* `SharedArrayBuffer`
* *RangeError: invalid array length*
NaN
===

La propriété globale **`NaN`** est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (**N**ot **a** **N**umber en anglais).

| Attributs de `NaN` |
| --- |
| Écrivable | Non |
| Énumérable | Non |
| Configurable | Non |

Exemple interactif
------------------

Syntaxe
-------


```js
NaN;
```

Description
-----------

`NaN` est une propriété de *l'objet global*, c'est-à-dire qu'elle est accessible globalement.

La valeur initiale de `NaN` est `Number.NaN`. Dans les navigateurs modernes, `NaN` est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.

Il est rare d'utiliser expressément `NaN` dans un programme. On récupère généralement `NaN` comme le résultat d'une fonction mathématique qui échoue (`Math.sqrt(-1)`) où quand une fonction qui tente d'interpréter un nombre échoue (`parseInt("blabla")`).

### Tester `NaN`

Les opérateurs d'égalité (`==` et `===`) ne peuvent pas être utilisé pour tester une valeur par rapport à `NaN`. Il faut utiliser `Number.isNaN()` ou `isNaN()` à la place.


```js
NaN === NaN; // false
Number.NaN === NaN; // false
isNaN(NaN); // true
isNaN(Number.NaN); // true
```


La différence entre `isNaN()` et `Number.isNaN()` est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est `NaN` : `isNaN()` convertira l'argument en nombre avant de vérifier alors que `Number.isNaN()` ne renverra `true` que si l'opérande vaut `NaN`.


```js
isNaN("coucou monde"); // renvoie true
Number.isNaN("coucou monde"); // renvoie false
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-value-properties-of-the-global-object-nan |

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

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

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

* `Number.NaN`
* `Number.isNaN()`
* `isNaN()`
* L'égalité en JavaScript
RangeError
==========

L'objet **`RangeError`** permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle ou à l'ensemble de valeurs autorisées.

Description
-----------

Une exception `RangeError` est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle.

Par exemple, cela peut être le cas quand :

* on passe une valeur qui n'est pas une des valeurs autorisées pour `String.prototype.normalize()`, ou
* on souhaite créer un tableau avec une longueur illégale via `Array` ou
* lorsqu'on passe des valeurs incorrectes aux méthodes `Number.toExponential()`, `Number.toFixed()` ou `Number.toPrecision()`.
Constructeur
------------

`RangeError()`

Crée un nouvel objet `RangeError`.

Propriétés des instances
------------------------

`RangeError.prototype.message`

Un message d'erreur. Bien qu'ECMA-262 spécifie que `RangeError` devrait fournir sa propre propriété `message`, pour SpiderMonkey, celle-ci est héritée de `Error.prototype.message`.

`RangeError.prototype.name`

Le nom d'erreur. Hérité de `Error`.

`RangeError.prototype.fileName`

Le chemin vers le fichier qui a déclenché cette erreur. Héritée de `Error`.

`RangeError.prototype.lineNumber`

Le numéro de la ligne dans le fichier qui a déclenché cette erreur. Héritée de `Error`.

`RangeError.prototype.columnNumber`

Le numéro de la colonne dans la ligne du fichier qui a déclenché cette erreur. Héritée de `Error`.

`RangeError.prototype.stack`

La trace de la pile d'appel. Héritée de `Error`.

Exemples
--------

### Utiliser `RangeError`


```js
const MIN = 200;
const MAX = 300;
function verifier(num) {
  if (num < MIN || num > MAX) {
    throw new RangeError(
      "Le paramètre doit être compris entre " + MIN + " et " + MAX,
    );
  }
}

try {
  verifier(500);
} catch (e) {
  if (e instanceof RangeError) {
    // On gère ce qui se passe en cas d'erreur
  }
}
```

### Utiliser `RangeError` avec des valeurs non-numériques


```js
function verifier(valeur) {
  if (["pomme", "banane", "carotte"].includes(valeur) === false) {
    throw new RangeError(
      "L'argument n'est pas un fruit parmi pomme / banane ou carotte.",
    );
  }
}

try {
  verifier("chou");
} catch (erreur) {
  if (erreur instanceof RangeError) {
    //On gère ce qui se passe en cas d'erreur
  }
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-rangeerror |

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

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

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

* `Error`
* `Array`
* `Number.toExponential()`
* `Number.toFixed()`
* `Number.toPrecision()`
* `String.prototype.normalize()`
URIError
========

L'objet **`URIError`** représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.

Constructeur
------------

`URIError()`

Crée un nouvel objet `URIError`.

Propriétés des instances
------------------------

`URIError.prototype.message`

Le message d'erreur.

`URIError.prototype.name`

Le nom de l'erreur. Héritée de `Error`.

`URIError.prototype.fileName`

Le chemin du fichier qui a déclenché l'erreur. Héritée de `Error`.

`URIError.prototype.lineNumber`

Le numéro de la ligne dans le fichier qui a déclenché l'erreur. Héritée de `Error`.

`URIError.prototype.columnNumber`

Le numéro de la colonne dans la ligne du fichier qui a déclenché l'erreur. Héritée de `Error`.

`URIError.prototype.stack`

La pile d'appel. Héritée de `Error`.

Exemples
--------

### Intercepter une exception `URIError`


```js
try {
  decodeURIComponent("%");
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message); // "malformed URI sequence"
  console.log(e.name); // "URIError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 2
  console.log(e.stack); // "@Scratchpad/2:2:3\n"
}
```

### Créer une instance de `URIError`


```js
try {
  throw new URIError("Coucou", "unFichier.js", 10);
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message); // "Coucou"
  console.log(e.name); // "URIError"
  console.log(e.fileName); // "unFichier.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // "@Scratchpad/2:2:9\n"
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-urierror |

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

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

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

* `Error`
* `decodeURI()`
* `decodeURIComponent()`
* `encodeURI()`
* `encodeURIComponent()`
globalThis
==========

La propriété globale **`globalThis`** renvoie l'objet global de plus haut niveau.

Exemple interactif
------------------

Syntaxe
-------


```js
globalThis;
```

Description
-----------

 Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser `window` (en-US), `self` (en-US) ou `frames` ; pour les web workers, seul `self` peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser `global`.
 Le mot-clé `this` pouvait être utilisé à l'intérieur des fonctions en mode non-strict mais vaudra sinon `undefined` dans les modules et dans les fonctions utilisant le mode strict.

La propriété `globalThis` fournit une méthode standard d'accès à l'objet `this` global, quel que soit l'environnement. Contrairement aux propriétés `window` et `self`, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.

Pour mieux mémoriser ce nom, on se rappellera que la valeur de `this` dans la portée globale est `globalThis`.

### Accès indirect à la variable globale dans un contexte web

Dans la plupart des environnements, `globalThis` sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux *iframes* et aux liens entre les fenêtres, `globalThis` fournira un `Proxy` sur l'objet global (auquel on n'aura donc pas accès directement).

### Nommage

D'autres noms furent proposés pour cette fonctionnalité (tels que `self` et `global`) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir le document de la proposition pour le nommage.

Exemples
--------

Avant l'introduction de `globalThis`, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était `Function('return this')()`. Toutefois, cela enfreignait certaines règles CSP avec certains réglages et es6-shim, par exemple, devait utiliser une logique conditionnelle :


```js
var getGlobal = function () {
  if (typeof self !== "undefined") {
    return self;
  }
  if (typeof window !== "undefined") {
    return window;
  }
  if (typeof global !== "undefined") {
    return global;
  }
  throw new Error("impossible de trouver l'objet global");
};

var globals = getGlobal();

if (typeof globals.setTimeout !== "function") {
  // pas de setTimeout pour cet environnement
}
```


Avec `globalThis`, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :


```js
if (typeof globalThis.setTimeout !== "function") {
  // pas de setTimeout pour cet environnement
}
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-globalthis |

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

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