JavaScript

Modifier cette page sur Github

Voici quelques informations sur les angliscismes usuels utilisés dans le contexte de JavaScript.

Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.

Cette section de glossaire est spécifique à la documentation française de Svelte, et n'existe pas dans la documentation officielle.

Bubble / Capturepermalink

Lorsqu'un événement JavaScript est déclenché, celui-ci parcours le DOM en 3 phases distinctes, dans cet ordre :

• la phase capture : de l'élément window jusqu'à l'élément qui a déclenché l'événement
• la phase target : lorsque l'événement atteint l'élément qui a déclenché l'événement
• la phase bubble de l'élément qui a déclenché l'événement jusqu'à l'élément window

Un event listener écoutera par défaut les événements dans leurs phases de bubbling. Il est néanmoins possible d'initialiser un listener pour qu'il écoute dans la phase capture avec l'option {capture: true} (en svelte, avec le modificateur de directive |capture).

Event dispatcherpermalink

Un event dispatcher (ou générateur d'évènements) est une fonction qui peut être utilisée pour distribuer des évènements au sein d'une application, notamment pour communiquer entre composants.

Plus d'infos sur les event dispatchers dans la documentation.

Event listenerpermalink

Un event listener est une fonction conçue pour être exécutée lorsqu'un événement est déclenché.

Par exemple, on peut utiliser un event listener pour changer la couleur d'un bouton (fonction) lorsqu'on clique dessus.

<!-- HTML -->
<button onclick="() => console.log('Click !')">
	Clic
</button>

ts
// JavaScript
const element = document.createElement('button');

element.onclick = () => console.log('Click !')
// ou
element.addEventListener('click', () => console.log('Click !'))

 <!-- Svelte -->
<button on:click={() => console.log('Click !')}>
	Clic
</button>

Plus d'infos sur les event listeners sur le site de MDN.

Falsy / Truthypermalink

Falsypermalink

Une valeur est dite falsy si celle-ci peut être interprétée comme équivalente (et non pas égale) à false.

Les valeurs falsy sont:

• false
• 0
• -0
• 0n (0 en BigInt)
• "" (chaîne de caractère vide)
• null
• undefined
• NaN
• document.all

Si une valeur est falsy, alors sa double négation renvoie la valeur false.

ts
!!0 // false
!!null // false
!!undefined // false
// ...

Plus d'infos sur les valeurs falsy sur le site de MDN (en anglais).

Truthypermalink

Une valeur est dite truthy si celle-ci n'est pas falsy. Toutes les valeurs qui ne sont pas celles listées juste au-dessus sont donc truthy.

Si une valeur est truthy, alors sa double négation renvoie la valeur true.

ts
!!1 // true
!!{} // true
!!'dsds' // true
// ...

Plus d'infos sur les valeurs truthy sur le site de MDN.

Genericpermalink

Un generic est une notion en TypeScript qui permet de définir une variable au sein d'un type. Il a pour fonctionnalité première de permettre de propager un type au sein d'une méthode lorsque le type est variable. L'exemple le plus simple est la fonction identité :

function identity<Type>(arg: Type): Type {
	return arg;
}

Dans ce cas précis, le paramètre arg pourra être de n'importe quel type, représenté par le generic Type. Le retour de la méthode aura le même type que le paramètre.

Plus d'infos sur les generics sur le site TypeScript.

Inlinepermalink

L'adjectif inline désigne le fait de définir du style, une condition, une fonction ou un composant sur une seule ligne. Toutes ces fonctionnalités ne sont pas permises nativement en Javascript. Certaines sont apportées par les frameworks de développement, comme Svelte.

Exemples :

ts
// fonction inline
const saluer = (nom: string) => console.log(`Salut ${nom} !`)

function saluer(nom: string) {
	// condition inline
	if (!nom) return;

	// traitement
}

<!-- style inline en HTML ou en Svelte -->
<div style="margin: 8px;"/>

<!-- autre manière d'écrire du style inline en Svelte -->
<div style:margin="8px"/>

Nullishpermalink

Une valeur nullish est une valeur qui est null ou undefined.

null et undefined sont deux valeurs qui représentent toutes les deux l'absence de valeur. Ce sont des valeurs différentes (null !== undefined), mais équivalentes (null == undefined). Pour pouvoir faire référence aux deux, on utilise le terme nullish.

Pour en savoir plus sur la différence entre null et undefined, vous pouvez par exemple lire ceci (en anglais).

Polyfillpermalink

Un polyfill est un bout de code (généralement en JavaScript sur le web) utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement.

Plus d'infos sur les polyfills sur le site MDN.

Shadow DOMpermalink

Un shadow DOM (ou DOM fantôme) est un DOM dans le DOM. Il est monté via la méthode element.attachShadow() et a pour particularité d'être encapsulé, c'est-à-dire que sa structure de balisage est isolée, que son style est isolé et que son comportement est caché et séparé du reste de code de la page.

Plus d'infos sur le shadow DOM sur le site MDN.