# Programmation JavaScript/Version imprimable

* Si vous imprimez cette page, choisissez « Aperçu avant impression » dans votre navigateur, ou cliquez sur le lien Version imprimable dans la boîte à outils, vous verrez cette page sans ce message, ni éléments de navigation sur la gauche ou en haut.
* Cliquez sur Rafraîchir cette page pour obtenir la dernière version du wikilivre.
* Pour plus d'informations sur les version imprimables, y compris la manière d'obtenir une version PDF, vous pouvez lire l'article Versions imprimables.
Une version à jour et éditable de ce livre est disponible sur Wikilivres, une bibliothèque de livres pédagogiques, à l'URL : https://fr.wikibooks.org/wiki/Programmation_JavaScript

# Introduction

JavaScript (alias JS) est un langage de programmation utilisé initialement par les navigateurs web, dont le champ d’application s’est progressivement étendu aux serveurs web et aux applications graphiques. Il partage avec Java une syntaxe inspirée du langage C, mais leurs similitudes s'arrêtent là. Il fut créé par Netscape sous le nom LiveScript en 1996.
Le noyau du JavaScript est aujourd'hui défini par le standard ECMA 262, connu aussi sous l'appellation ECMAScript (ES).
Les fichiers JavaScript possèdent l'extension .js, mais on trouve aussi des .ts correspondant au TypeScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript créé par Microsoft en 2012 pour améliorer et de sécuriser le JS.
Intégré directement au sein des pages Web, le JavaScript est alors exécuté par le client Web (par opposition au serveur Web) : c'est le navigateur Web qui prend en charge l'exécution de ces bouts de programme, manipulant leur environnement, appelés scripts.
Généralement, JavaScript sert à interagir avec le document HTML et ses feuilles de style CSS via l'interface DOM (Document Object Model ; on parle de HTML dynamique ou DHTML pour désigner cette intégration des trois langages). JavaScript est ainsi utilisé pour réaliser des services dynamiques en communication avec le serveur Web, la plupart du temps grâce à une technique appelée (abusivement) AJAX.
Il est souvent source de difficultés dues aux nombreuses versions différentes de l'interpréteur et du DOM, dépendantes des éditeurs de navigateurs. Chacun ayant développé sa propre variante supportant (presque) le standard ECMAScript, un ou deux des deux standards DOM, et possédant de surcroît des fonctionnalités supplémentaires et incompatibles.

## Versions

Voici les différentes versions du JavaScript par année :
* ES2015 / ES6
* ES2016 / ES7
* ES2017 / ES8
* ES2018 / ES9
* ES2019 / ES10
* ES2020 / ES11
* ES2021 / ES12
* ES2022 / ES13
* ES2023 / ES14

## Moteurs JS

Côté client, le langage est compilé par les navigateurs : ils parsent le script, créent l'arbre de la syntaxe abstraite (AST), l'optimisent, génèrent du code à octets en juste-à-temps (JIT) à partir de l'arbre, puis le code machine spécifique au hardware avec cela, et enfin l'exécute.
Les principaux moteurs de JS sont :
* V8 de Google, Google Chrome, Electron, Chromium, node.js
* SpiderMonkey de Mozilla, Firefox
* JavaScriptCore d'Apple, Safari
* ActionScript d'Adobe, Flash

## Références

* ↑ http://www.ecma-international.org/publications/standards/Ecma-262.htm
* ↑ https://www.typescriptlang.org/fr/
* ↑ https://formationjavascript.com/versions-de-javascript-histoire-et-futur/

# Programmer en deux minutes

JavaScript est un langage exécuté par le navigateur web, à l'affichage d'une page web. (il est surtout utilisé pour ça)
Créer ce document HTML (le nom du fichier se terminera généralement par .html) puis l'ouvrir avec un navigateur.
Le navigateur vous demande d’entrer un texte dans une pop-up, affiche le texte donné dans une seconde pop-up, et enfin affiche le corps du document. Félicitations, vous avez écrit vos premières instructions JavaScript dans un document HTML !
Note : La plupart des navigateurs exécuteront sans problème ce code simplifié :

## Une minute

    Une page web est un document composé d'une tête et d'un corps (<html> <head></head> <body></body> </html>).
    Le corps du document est affiché à l'écran tandis que la tête contient le titre de la page, son favicon, ses mots-clés, etc. (pour un exemple, afficher le code source de cette page (on peut souvent utiliser le raccourci clavier Ctrl + U))
La tête comme le corps d'un document HTML peuvent contenir des instructions JavaScript :
Le navigateur se comporte comme pour le premier document de cette page, excepté le fait que le contenu de la page est affiché avant l’ouverture des pop-ups

## une minute trente : une fonction JavaScript

La fonction est définie en tête de document et est exécutée lorsque la souris sort de l'ancre (onmouseout).

## Deux minutes

Afin d'aller plus loin, ouvrez la console du navigateur.
Pour apprendre à manipuler cet outil, introduisez une erreur dans votre document, par exemple en oubliant un des guillemets ", et vérifiez la présence de l'erreur dans la console JavaScript.
Félicitation, vous êtes paré pour écrire davantage d'instructions !
En deux minutes :
* Une page wiki
* Compteur en temps réel des dépenses militaires.
* Tout un site web dans un seul document.

## console.log

Par la suite, nous utiliserons cette instruction pour faire apparaitre des messages en console, ce qui est pratique pour débuguer sans impacter le fonctionner du site (contrairement à alert). De plus, on peut y utiliser du code CSS et même y publier des tableaux.

# Programmer en deux minutes/Une page wiki

Munis de votre éditeur de texte avec coloration syntaxique, créez ce document *.html et ouvrez-le avec votre navigateur outillé d'une extension Firebug-like.
Le navigateur prompte et affiche le texte dans une division du document.
Pour obtenir une wikipage, il faut communiquer les changements à un serveur, puis que le serveur enregistre les changements.
Vous l'avez compris, ceci nécessite d'autres technologies que le JavaScript. Rendez-vous sur Programmation Web/Programmer en deux minutes à la sous-page : Un wiki en JavaScript et PHP.

# Programmer en deux minutes/Compteur en temps réel

Document HTML :
Le JavaScript peut sembler long mais est très simple : il exécute la fonction RunWarCost qui se ré-exécute toutes les 100 millisecondes (window.setTimeout).
Au passage cette fonction calcule le prix et l'affiche dans la division "compteur" du document. (document.getElementById.innerHTML)
    Si vous êtes un utilisateur enregistré de Wikipédia, vous pouvez personnaliser votre JavaScript pour ajouter à votre interface plein de choses, dont bien sûr ce compteur. (voir Gadget-WarCost.js)

# Programmer en deux minutes/Tout un site web dans un seul document

Pour créer Tout un site web dans un seul document, écrivez un document HTML contenant des divisions non-affichées (style="display:none") et une fonction Javascript pour les afficher lorsqu'on navigue dans le document, en cliquant sur les ancres <a onclick='afficher'>, ce qui exécute le Javascript suivant :
* Créez à l'aide d'un éditeur avec coloration syntaxique le fichier *.html suivant, et ouvrez-le dans votre navigateur :
Félicitation, les divisions de classe page sont affichées et cachées lors des clics sur les ancres.
Remarquez que ce document pose un problème d'accessibilité : les éléments cachés ne s'afficheront pas si le navigateur n'exécute pas le javascript.

## Sans utiliser de JavaScript !

L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.

### CSS

* Créez ce document *.html et ouvrez-le dans un navigateur :

## Avec jQuery, une librairie d'instructions javascript

Nous allons créer un site défilant dans une division d'id galerie.
La division #galerie contient trois divisions :
* deux boutons (div#next et div#previous) à droite et à gauche,
* une très large division (div#slide {width:10000px;}) contenant les pages à faire défiler horizontalement.

### Javascript

    La librairie jQuery est déclarée en tête du document (<script src=http://). Ensuite viennent nos instructions utilisant l'objet jQuery $.
    L'objet $(document) est le document, l'objet $("#ex") est l'élément du document d'id="ex". Il existe des méthodes associées à ces objets :
   * $("#divisionId").width <- retourne la largeur de la division, en pixels.
   * $("#divisionId").hide <- attribut style="display:none" à la division.
   * $(document).ready <- s'éxecute lorsque le document est prêt.
Ces instructions exécutent la méthode ready de l'objet $(document). ($(document).ready(function);)
    Lorsque le document est prêt c'est-à-dire que tout est chargé, la fonction est exécutée. Cette fonction crée l'objet slider.
    slider modifie les styles des divisions #slide, #next et #previous en utilisant les méthodes jQuery animate, show et hide.
* Créez ce document *.html et ouvrez-le dans un navigateur :

## Un menu déroulant en CSS

Le CSS permet également d'interagir avec la souris, via notamment la pseudo-classe hover.
L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.

### CSS declarations

ul.niveau2 est affiché (display:block;) lorsque la souris est dessus li.sousmenu (li.sousmenu:hover) contenue dans div#menu ul.niveau1.

### Créez ce document *.html et ouvrez-le dans votre navigateur
# Outils de développement
## Gestionnaires de paquets

Pour installer des bibliothèques, il existe plusieurs gestionnaires de paquets.

### npm
#### Installation

Sur Windows, le télécharger de : https://nodejs.org/en/download/
Sur Linux :

#### Utilisation

Par exemple pour une installation en environnement de développement uniquement :

### yarn
#### Installation

Réputé plus rapide que le précédent, il s'installe à partir de ce dernier :

#### Utilisation

Par exemple pour une installation en environnement de développement uniquement :
NB : dans les premières versions, c'était :
Pour lancer le processus en tâche de fond qui compile et minifie le code dans node_modules :

## IDE

Un environnement de développement intégré (EDI ou IDE en anglais pour Integrated Development Environment) est un programme regroupant un éditeur de texte, des outils automatiques de fabrication, et souvent un débogueur. Il en existe pour pratiquement tous les langages informatique et le Javascript n'échappe pas à la règle. Les IDE pour javascript sont souvent pourvus de fonctionnalité pour écrire en HTML.
Les utilités principales des IDE sont :
* L'analyse du code (Syntaxique, fonctionnel, objet...)
    Permet d'éviter de faire des erreurs et de parcourir rapidement les différentes parties du code.
* Le débogueur
    Indique où se trouve les erreurs et de quel type d'erreur il s'agit.
* L'auto complétion
    Permet de visionner les méthodes et paramètres des objets javascript que vous utilisez.
* La documentation
    L'aide de chaque fonction est accessible rapidement.
* Les générateurs de code
    Des exemples de code permettent d'obtenir des programmes très rapidement.

### Libre

* Visual Studio Code
* NetBeans
* Aptana (Basé sur Eclipse)

### Propriétaire

* PhpStorm (ou WebStorm)
* Dreamweaver

## En ligne

* https://jsfiddle.net/ : un interpréteur en ligne, pratique pour tester des commandes.
* http://jsbin.com/#javascript,html : interpréteur en ligne.
* https://www.htmlstrip.com/javascript-validator : validateur en ligne.

### Plugins de navigateur

Il existe des plugins de navigateurs comme Greasemonkey ou Tampermonkey permettant de stocker des javascripts à exécuter sur certains sites (auquel on n'a pas forcément accès au code). Cela permet par exemple de préremplir des formulaires ou d'ajouter des hyperliens sur des mots reconnus par regex.

# Syntaxe

Les deux grandes structures du langage sont les instructions et les structures de contrôle, qui toutes deux contiennent des expressions.
La syntaxe du JavaScript est largement inspirée des langages C et Java. Il faut ajouter à cela le fait que la plupart des opérateurs utilisent les mêmes noms ou symboles que dans ces langages.
L'avantage de cette similarité de forme est qu'elle permet de s'appuyer sur ce que l'on connaît déjà dans ces langages très répandus pour coder ou pour lire en JavaScript, ou réciproquement.
L'inconvénient est que cette similarité de forme dissimule des différences nombreuses, subtiles ou fondamentales, et des fonctionnalités inexistantes dans les langages classiques auxquels on est tenté de comparer le JavaScript. Et inversement, on peut vouloir appliquer en JavaScript des mots et des syntaxes propres à ces langages qui lui ressemblent, et être déçu de leur absence.

# Ligne d'instruction
## Composition d'une instruction

Une instruction JavaScript est constituée d'une combinaison d'expressions (identificateurs, variables, opérateurs, expressions littérales, appels de fonctions), parfois précédée d'une déclaration (var, void). Elle peut être suivie ou entrecoupée de commentaires.

## Délimitation des instructions

Une instruction s'achève lorsqu'une autre instruction commence. En règle générale, on rencontre une ligne d'instruction par ligne de texte. Pour écrire plusieurs instructions sur une même ligne, il est nécessaire de les séparer avec un point-virgule ( ; ). Par habitude, on met souvent des point-virgules à la fin de toutes les instructions en JavaScript mais il faut savoir que leur absence n'est pas une erreur de syntaxe.
Les mêmes instructions sur plusieurs lignes, sans point-virgules (JavaScript "comprend" que chaque nouvelle ligne est une instruction différente) :
Une instruction répartie sur plusieurs lignes (JavaScript "comprend" que chaque nouvelle ligne prolonge l'instruction)
Intégration de commentaires :
Ces quatre exemples provoquent l'affichage d'une boite d'avertissement munie de la chaîne "trois mots concaténés". Leur présentation diffère en fonction des besoins d'expressivité et de lisibilité du code tel que voulu par le programmeur.

## Regroupement des lignes d'instructions en blocs

Les lignes d'instructions sont regroupées en blocs d'instructions délimités par des accolades.
Note : JavaScript différencie les majuscules et les minuscules. Il convient donc d'être vigilant sur ce point lors de l'écriture des lignes d'instructions pour s'éviter de longues séances de débogage.

# Ordre d'évaluation
## Scripts

Lors du chargement d'une page Web, dès que le navigateur rencontre un script, il l'exécute avant de charger la suite du document HTML. Si le script contient des instructions qui doivent être évaluées immédiatement et qui manipulent le document, ce dernier risque de ne pas être prêt.
Lorsque des balises <script> possèdent l'attribut defer, le navigateur est supposé télécharger ces scripts en parallèle (donc plus rapidement), et attendre d'avoir fini le chargement de la page avant de les exécuter dans l'ordre des balises.
Lorsque qu'elles possèdent l'attribut async, le navigateur les télécharge et exécute en parallèle, dans un ordre qui dépend du contexte, donc aléatoire et potentiellement avant la fin du chargement de la page. Il ne faut donc jamais l'utiliser pour charger des bibliothèques ayant des dépendances, comme jQuery.
S'il faut manipuler le document au moment du chargement, il est donc fortement recommandé de déclencher le code après avoir déclaré toute partie du document qui doit être utilisée. Il reste bien sûr possible de déclarer la plupart du code dans des fonctions avant le corps du document, comme cela est fait couramment, et soit d'appeler les fonctions dans un script ultérieur, soit de placer ces instructions dans la méthode document.onload.

## Instructions

À la base, chaque fichier ou fragment de code JavaScript est évalué de haut en bas : chaque instruction est exécutée avant de passer à la suivante. Bien entendu, les fonctions, structures de contrôle, et d'autres éléments du langage font que certaines instructions sont évaluées à un autre moment, et/ou plusieurs fois, ou pas du tout.

## Expressions

Les expressions sont évaluées de gauche à droite, en respectant la priorité des opérateurs et les parenthèses. Lorsqu'une expression est composée d'opérations de priorité identique (par exemple, plusieurs additions) la première opération en partant de la gauche est effectuée (et ses opérandes sont évaluées), puis son résultat est utilisé comme opérande de gauche de l'opération suivante (et l'opérande de droite est évaluée), et ainsi de suite.
L'exemple ci-dessus montre que la première opération entre deux nombres se comporte normalement (1 et 3 font 4), la seconde se transforme en concaténation car une des opérandes est de type "string", et à partir de là le résultat de chaque opération est une chaîne donc toutes les additions suivantes se transforment en concaténations. Ce serait différent avec des parenthèses :
Les opérations de priorité identique ne sont pas évaluées simultanément (techniquement ce ne serait pas possible d'ailleurs) et marginalement, cela peut avoir une influence sur le résultat. Par conséquent, les opérations que l'on appelle commutatives en mathématiques ne sont pas strictement commutatives en JavaScript.
Dans cet exemple, l'addition n'est pas commutative. Si l'opération v=u est placée à gauche de l'addition, elle est évaluée en premier et modifie l'autre opérande. En revanche, placée à droite, elle est évaluée après v, et donc la valeur de v utilisée par l'addition est l'ancienne valeur.

# Bloc d'instructions

Les blocs d'instructions JavaScript sont constitués d'instructions placées entre une accolade ouvrante ( { ) et une accolade fermante ( } ). Un bloc d'instructions est obligatoirement introduit par ces déclarations (les accolades sont nécessaires même pour une seule instruction) :
* une déclaration de fonction
* une déclaration d'objet implicite with
* les déclarations try, catch et finally
* et par la structure de contrôle switch
Ces autres structures sont généralement suivies d'un bloc d'instruction (mais dans le cas d'une seule instruction les accolades sont facultatives) :
* une déclaration de boucle (for, while, do)
* un branchement conditionnel (if et else)
Dans tout autre cas, les accolades sont considérées comme les délimiteurs de l'écriture littérale d'un objet et non pas d'un bloc d'instructions.

## Exécution séquentielle

À l'intérieur d'un bloc, les instructions sont exécutées séquentiellement, à moins de l'apparition du mot réservé return (dans une fonction) ou du mot réservé break (dans certaines structures de branchement conditionnelles) ou de l'occurrence d'une erreur.

## Inclusion de blocs

Un bloc d'instructions peut lui-même contenir d'autres blocs, généralement des structures conditionnelles ou itératives, mais aussi des déclarations de fonctions imbriquées.

# Identificateurs

La programmation JavaScript, comme tous les langages informatiques, demande au développeur de définir des identificateurs, et ceci dans deux cas :
* pour nommer une fonction utilisateur
* pour nommer une variable
Pour construire notre identificateur nous pouvons utiliser les caractères autorisés, et devons proscrire les caractères interdits. De plus, certaines combinaisons sont interdites. Notre identificateur ne doit pas correspondre à un mot réservé. Enfin, il est utile de se conformer à certaines recommandations en ce qui concerne le choix et l'orthographe de l'identificateur, pour renforcer l'expressivité du code.

## Principales règles

* Ne pas commencer par un chiffre,
* Ne pas utiliser de caractère interdit,
* Ne pas faire suivre un caractère accentué par un chiffre,
* Rester monobloc. Pas de caractère espace au milieu,
* Vérifier que l'identificateur n'est pas un mot réservé,
* Garder en tête que javascript différencie les majuscules des minuscules.

## Caractères autorisés

Tous les caractères sont autorisés, sauf ceux qui contreviennent aux règles précédentes et aux caractères interdits.
* Les lettres de l'alphabet, majuscules et minuscules,
* Les chiffres, sous réserve de ne pas commencer avec,
* Les caractères accentués, avec limitations,
* Certains caractères spéciaux : $ _
* Les séquences d'échappement unicode de forme \uNNNN

## Caractères interdits

* Les ponctuations et autres symboles spéciaux : - , . " ' @ : / + * % = ~ ! ? < > ( ) [ ] { } # & | ` ^ ¨ €
* Les caractères de contrôles obtenus par séquence d'échappement,
* Les espaces.

## Standardisation

Les identificateurs sont en particulier standardisés par l'ECMA 262, au chapitre §7.6. Ce standard s'appuie sur la chapitre 5 de l'Unicode version 3.
Sont en particulier autorisés les échappement Unicode, s'ils conduisent à un identificateur autorisé. Enfin, deux identificateurs équivalent ne sont considérés identique que s'ils sont identiques binairement.
Les versions suivants d'Unicode peuvent fonctionner mais ne sont pas nécessairement portables et compatibles.

## Notes de bas de page

* ↑ Librement disponible sur internet
* ↑ Lire éventuellement À la découverte d'Unicode.
* ↑ Par exemple la séquence [ e; accent aigu ] (en deux points de code ) est différent de [ e accent aigu ] (en un seul point de code)

# Expression littérale

Dans un programme JavaScript, il est courant de devoir introduire des données sous forme littérale. Cela se produit principalement quand on renseigne une variable, ou quand on appelle une fonction.
Ce qui suit est valide pour le code JavaScript écrit dans les fichiers externes, ou entre les balises <script> </script>. En ce qui concerne le code associé aux évènements (onclick, onload...), l'approche est différente.
Ces expressions littérales peuvent être des chaînes, ou des nombres.

## Les chaînes sous forme littérale

Elles sont constituées de lettres, chiffres, ponctuation et symboles avec un mécanisme (échappement) permettant d'étendre cet ensemble à des caractères de contrôle, de formatage et des caractères spéciaux.
Une chaîne exprimée sous forme littérale est délimitée par des guillemets double ( " ) ou simple ( ' ).
La règle veut qu'une chaîne ouverte avec un guillemet double doit être fermée avec un guillemet double. De même, une chaîne ouverte avec un guillemet simple doit être fermée avec un guillemet simple.
La première complication se produit quand nous désirons inclure des guillemets dans notre chaîne.
Appelons une fonction avec une chaîne en paramètre :
... à la place, on peut écrire:
... mais c'est affreux.
Pour utiliser une solution élégante, nous avons recours au mécanisme d'échappement.

### Le mécanisme d'échappement

Le mécanisme d'échappement consiste à inclure dans les chaînes, des anti-slash (\) suivis d'un caractère choisi pour sa fonction.
les caractères échappés sont en nombre limités et facile à mettre en œuvre.

#### L'échappement des guillemets simples (\') ou double (\")

Précédé d'un anti-slash, les guillemets ne feront plus office de délimiteur de chaîne, et ceci permet de les inclure comme de simples symboles de ponctuation.

#### Le retour à la ligne avec \n

Il est interdit d'aller à la ligne à l'intérieur d'une chaîne de caractère délimitée par ' ou ".
Cependant, il peut être utile de formater une chaîne en la présentant sur plusieurs lignes. La séquence d'échappement \n réalise cela. Elle inclut en effet le caractère de contrôle "linefeed" (valeur 10 en décimal, 0A en hexadécimal) qui réalise le retour à la ligne avec la plupart des navigateurs graphique.
Par exemple, il n'est pas possible de formater une chaîne de caractère en utilisant le code suivant :
Il faudra utiliser à la place l'écriture suivante :
... affiche :

#### Le retour à la ligne avec `

Autre solution, utiliser l'accent grave à la place de ' ou " (`) :

#### La tabulation avec \t

La séquence d'échappement \t insère un caractère de tabulation dans la chaîne, et permet ainsi de formater l'affichage. Le caractère de tabulation est codé 9 en décimal et 09 en hexadécimal.

#### L'inclusion de caractères unicode avec \u

Javascript, quand il est codé dans un fichier distinct, ou quand il est codé entre les balises <script> </script> ne supporte pas les entités de la forme &lt; ou &#160;, ou toute autre forme d'entité.
L'échappement \u offre un mécanisme de remplacement dont la mise en œuvre nécessite de se référer à une table associant les codes hexadécimaux au symboles correspondant (par exemple).
Ces codes hexadécimaux sont présentés avec 4 (ou 5) chiffres hexadécimaux, et la séquence d'échappement \u nécessite d'écrire ces 4 chiffres sous peine d'un déclenchement d'erreur.
... affiche Rodrigue as-tu du cœur?
ce qui est plus conforme à l'original que l'anti-typographique "coeur", utilisé à longueur d'internet.
L'inclusion de caractères Unicode permet l'accès aux symboles et à la citation de fragments utilisant d'autres alphabets que le nôtre.
De plus, il permet également l'inclusion des caractères de contrôle. Ainsi, \n et \u000A sont équivalents.
Table Unicode (wikipédia)
Unicode est toutefois plus vaste et peut être découvert au travers du livre Wikibooks À la découverte d'Unicode.

## Les nombres sous forme littérale

Les nombres sont constitués de chiffres et de signes à l'exclusion du caractère espace. JavaScript permet d'exprimer littéralement les nombres entiers, réels, octaux, hexadécimaux, exponentiels, sous forme positive ou négative.

### Les nombres négatifs

En plaçant le signe moins ( - ) devant le nombre, on obtient ce nombre en négatif, et ceci qu'il soit noté comme entier, réel, octal, hexadécimal ou exponentiel.

### Les entiers

Ils s'écrivent tel quel, c'est la représentation par défaut, employant les chiffres 0 à 9.

### Les réels

Le signe de séparation de la partie entière est le point ( . )

### L'octal

Un nombre commençant par zero et ne comprenant que les chiffres de 0 à 7 sera interprété en octal.

### L'hexadécimal

Un nombre commençant par 0x (ou 0X) comprenant les chiffres et les lettres abcdef en minuscule, majuscule ou les deux, sera interprété en hexadécimal.

### La notation scientifique

En faisant suivre un nombre entier ou réel de la lettre e (ou E), elle-même suivie d'un entier positif ou négatif, on obtient un nombre en notation scientifique.

### Taille des nombres

Le type number est au format 64 bits double précision.

## Les chaînes littérales dans les expressions associées aux évènements

À l'intérieur des balises HTML, il est possible d'intégrer du code JavaScript associé aux évènements, (comme onclick, onmouseover...). Javascript est à ce moment là interprété en dehors de son territoire propre, c'est à dire entre les balises <script> et </script> ou dans un fichier séparé. Sa rédaction obéit alors aux règles de rédaction des attributs des balises, qui n'autorisent pas tout.
Html, comme xhtml, ne reconnaît pas les séquences de type \uHHHH. Nous devons nous limiter aux caractères échappés classiques, amputés de ( \" ) et ( \' ). En effet, ces deux caractères ne seront pas interprétables comme valeur de la propriété de la balise.
Si nous voulons afficher Je suis "cliqué", nous devons recourir aux entités.
Les entités sont un mécanisme permettant d'insérer n'importe quel caractère dans une chaîne.
Selon la référence du doctype html, nous aurons accès à des entités munies d'un identificateur. Sinon, sous réserve de disposer d'une table adéquate, nous pouvons reproduire n'importe quel caractère.
Sans aller plus-avant dans la description des entités, nous pouvons les décrire comme suit :
L'entité commence par le caractère & (esperluette ou "et commercial") et finit par un point-virgule. Entre ces deux symboles, on rencontre soit un identificateur ( &lt; &gt; &amp;), soit le code du caractère exprimé en décimal et précédé du signe sharp (#) (&#160; &#339;).
... Mission accomplie.

# Commentaire

JavaScript permet d'insérer des commentaires dans les programmes, et ceci de deux manières :
* Syntaxe à double-slash (//)
* Syntaxe slash-étoile (/* */)

## La syntaxe à double-slash.

Les caractères placés à droite du double-slash sont ignorés par l'interpréteur jusqu'à l’occurrence d'un retour à la ligne.

## La syntaxe slash-étoile.

Les commentaires sont ouverts avec ( /* ) et fermés avec ( */ ) et donc ignorés par l'interpréteur.

## Intégration dans les lignes d'instruction

Les deux syntaxes de commentaire permettent de multiples modes d'inclusion dans le code:

# Mots réservés

Cet article va passer en revue les mots réservés et constantes prédéfinies de JavaScript. La norme ECMA 262, définit les mots réservés de JavaScript en deux catégories :
* les mots réservés (break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof)
* les futurs mots réservés (abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public).
On ne doit pas utiliser un mot réservé comme identificateur. Cela provoque une erreur. Mais comme le langage différencie les majuscules et minuscules, il est possible de mettre en majuscule une lettre pour rendre l'identificateur utilisable.
On peut, avec la plupart des navigateurs utiliser un futur mot réservé comme identificateur, mais cela est déconseillé, car le programme ne fonctionnera probablement plus à l'apparition d'une version future de JavaScript.
Voici une description sommaire des mots réservés :

## Déclarations
### var

Déclaration d'une variable locale, avec ou sans affectation. À placer en début d'instruction.
Une variable locale est détruite automatiquement à la fin de la fonction où elle a été créée (sauf dans le cas des closures). Seul le code écrit dans cette fonction peut y accéder, et dans ce code, la variable est prioritaire sur tout autre identifiant homonyme. En revanche, elle ne peut être détruite par l'opérateur delete.
Voir la section sur rehaussement des déclarations.

### const

Déclaration d'une constante locale.

### let

Comme "var" mais restreint la portée au bloc, comme si ce bloc était situé dans une autre fonction. Exemple :

### function

Déclaration d'une fonction utilisateur. C'est aussi un opérateur.

### void

void est une déclaration placée obligatoirement en début d'instruction. void ne fait rien, ne retourne rien, et n'est utile que dans un seul contexte : les pseudo-URL javascript:. En effet, si l'instruction qui compose cet URL retourne une valeur, cette valeur remplace le contenu de la page, ce qui est souvent indésirable. On place alors la déclaration void pour que l'instruction n'ait aucune valeur.

### with

Permet de simplifier la référence aux propriétés et méthodes des objets en précédant un bloc d'instruction dans lequel un objet devient implicite. La déclaration with rajoute en fait un niveau tout en haut de la pile de scopes.
est équivalent à

## Structures de contrôle
### return

Employé dans une fonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat.

### if

Permet de définir l'exécution conditionnelle d'instructions ou d'un bloc d'instructions. Peut-être utilisé conjointement à else.

### else

Utilisé conjointement à if, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if.

### switch

Utilisé conjointement à case, permet d'implanter un sélecteur de cas.

### case

Utilisé à l'intérieur d'un bloc switch, constitue un des choix du sélecteur.

### break

Utilisé à l'intérieur d'un bloc switch, permet de sortir du sélecteur sans procéder tests suivants. Utilisé à l'intérieur d'une boucle telle un bloc switch, permet de quitter la boucle immédiatement.

### default

Utilisé à l'intérieur d'un bloc switch, constitue l'option par défaut du sélecteur.

### for

Introduit une boucle itérative.
For each :
En tableau associatif :
NB : voir aussi la méthode Array.prototype.forEach.

### do

Introduit une boucle itérative conditionnelle avec test effectué à chaque tour par "while" :

### while

Introduit une boucle itérative conditionnelle:

### continue

Utilisé dans une boucle "for", "while" et "do", permet de sauter un tour.

## Gestions des erreurs
### throw

Provoque une erreur personnalisée.

### try ... catch ... finally

Évalue un bloc (try) en capturant les erreurs, tente de les gérer (catch) si elles se produisent, et quoiqu'il arrive, évalue un dernier bloc (finally).

## Opérateurs
### in

Opérateur qui détermine l'appartenance à un objet. Dans une boucle for... in, permet de répéter des instructions pour chaque propriété d'un objet.

### new

Opérateur qui permet l'instanciation d'un objet.

### instanceof

Cet opérateur permet de tester si une valeur est une instance d'un objet :

### typeof

Cet opérateur renvoie le type de la variable placée à droite. Les valeurs renvoyées par typeof correspondent aux types de variables JavaScript, soit : boolean string number function object undefined.

### delete

Cet opérateur permet de supprimer une propriété.

## Valeurs spéciales
### this

Dans le constructeur ou une méthode d'un objet, c'est une référence à l'objet. Hors de ce contexte, this référence l'objet global window.

### true

Valeur booléenne "vrai".

### false

Valeur booléenne "faux".

### null

Valeur de type "object" qui ne référence rien.

### undefined

C'est la valeur de toutes les variables inexistantes ou supprimées.

## Futurs mots réservés

Les versions futures de JavaScript intégreront peut-être un ou plusieurs mots réservés parmi la liste suivante. Il est donc officiellement déconseillé de les employer comme identificateurs dans les programmes actuels, sous peine de risquer un comportement bizarre dans le futur.

## Références

* ↑ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
* ↑ https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/const
* ↑ https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
* ↑ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#future_reserved_words

# Variables

Les variables permettent d'instancier un objet et de manipuler cette instance à l'aide d'un identificateur (le nom de la variable). Tous les identificateurs en JavaScript sont des références à un objet. Javascript étant un langage au typage dynamique, le type des objets n'est pas déclaré explicitement et il peut changer automatiquement.

## Typage dynamique

Il est donc possible de déclarer une variable sans lui définir de type. Ou plutôt, une variable déclarée de telle manière sera du type undefined. Tout au long de son utilisation, cette variable pourra changer de type sans que l'interpréteur n'y trouve rien à redire.
Il n'est en fait pas nécessaire de déclarer une variable (avec le mot-clé var). La différence est expliquée ci-après.

## Identificateur

Les règles d'élaboration des identificateurs sont décrites à ce lien. Pour résumer, les identificateurs comportent des caractères alphanumériques et le tiret soulignant (_). Ils ne peuvent commencer par un chiffre, et les majuscules comptent.

## Portée
### Propriétés

L'instanciation directe (sans mot-clé var) d'un objet avec un identificateur donne souvent l'impression de créer une variable globale. En réalité, la notion de "variable globale" n'existe pas en JavaScript. Toutes les variables sont, sauf quand on les déclare avec var, des propriétés d'un objet. Par défaut, cet objet est implicitement l'objet window (et non, window n'est pas une variable globale qui ferait exception à la règle car il est une de ses propres propriétés, c'est-à-dire que window est une propriété de window).
Comme window reste l'objet implicite la plupart du temps, une variable créée ainsi pourra être employée comme si elle était globale :
La variable mon_autre_variable est certes déclarée dans une fonction, mais il faut lire "window.mon_autre_variable" donc c'est une propriété de window et elle ne sera pas détruite automatiquement à la fin de la fonction.

### Sous-entendre un objet

Pour économiser du code, il peut être intéressant de sous-entendre un autre objet que window. Cela se fait explicitement avec un bloc with. Cette déclaration ne fonctionne pas aussi simplement qu'en Basic, par exemple. L'objet est en fait placé en haut de la scope chain dans le bloc d'instruction, presque comme si ses propriétés étaient des variables locales d'une fonction (voir Programmation JavaScript/Scope chain). Lorsqu'on utilise un identificateur dans un bloc with, la résolution se fait aussitôt qu'une des conditions suivantes est remplie :
* l'identificateur est une propriété existante de l'objet sous-entendu
* l'identificateur existe ailleurs dans la scope chain, en partant du haut (par exemple, une variable locale)
* l'identificateur est une propriété existante de window
Si aucune condition n'est remplie et que l'expression affecte une valeur à la variable, cette variable est créée comme propriété de l'objet global. Si l'expression ne fait qu'utiliser la valeur, elle retournera simplement undefined.

### Variables locales

À l'aide de la déclaration var, il est possible de définir une variable locale, qui n'est pas une propriété d'un autre objet. Cette déclaration peut avoir lieu n'importe où dans le corps d'une fonction, pas nécessairement au début, mais seules les utilisation ultérieures de l'identificateur feront référence à la variable locale puisqu'elle n'existait pas avant.
Comme toute variable locale, elle est automatiquement détruite à la fin de la fonction, bien que sa valeur puisse être sauvegardée dans certains cas (voir Fermeture). Par contre, elle ne peut pas être détruite par l'opérateur delete.
Si la déclaration var est utilisée en-dehors de toute fonction, la variable sera utilisable dans tout le script.

### Hoisting

L'exemple précédent montre l'effet hositing (levage) des déclarations avec le mot-clé var. Les déclarations sont en effet remontées au niveau du premier bloc de code de la fonction. Cela permet dans l'exemple précédent de continuer à accéder à la variable loc_2 après la boucle for.
Par contre, la partie initialisation n'est pas rehaussée et la variable a donc une valeur indéfinie (undefined). L'exemple précédent équivaut au code suivant :
Il en va de même pour les fonctions déclarées dans des fonctions :
Cela équivaut au code suivant :
Depuis Javascript 5, le mot-clé let permet de déclarer des variables locales à un bloc, sans effet de rehaussement.

## Types

Javascript est faiblement typé, mais typé quand même. Voici une revue des types que peut prendre une variable. Il est possible à tout moment de vérifier le type avec l'opérateur typeof.

### undefined

Une variable est du type undefined dans trois cas:
* Après déclaration var sans affectation
* Si on lui affecte explicitement la valeur undefined, ou qu'on lui affecte le résultat d'une expression qui retourne cette valeur.
* Si elle n'a pas été déclarée ni utilisée, ou bien qu'elle a été effacée par l'opérateur delete.
À noter : dans les deux premiers cas, la variable existe et possède une valeur (undefined). On peut lire cette valeur sans provoquer d'erreur. Dans le troisième cas cependant, la variable n'existe pas : l'opérateur typeof retourne "undefined", mais lire directement la valeur de la variable provoque une erreur.

### number

JavaScript réunit en un seul type les entiers, petits et grands, les décimaux, et les réels, flottants ou pas.
Concrètement, les nombres sont stockés sur 64 bits, avec une mantisse de 53 bits. Cela permet des valeurs entières jusqu'à 9 007 199 254 740 991, à partir duquel on commence à perdre de la précision jusqu'à 2^1024-1 qui est la valeur flottante la plus élevée représentable en JavaScript.
En fait, JavaScript inclut également dans le type number deux valeurs spéciales. Infinity, un nombre signé, est renvoyé dès que le résultat dépasse la capacité de stockage de number, mais aussi dans des cas limites simples. Dans les cas indécidables, ou bien lorsqu'une opération qui retourne un nombre ne peut pas le faire, c'est la valeur NaN (Not A Number) qui est renvoyée (voir les opérateurs arithmétiques, les méthodes de Number et les méthodes de Math pour les cas qui produisent ces deux valeurs).

### string

Le type string stocke une chaîne de caractères. C'est aussi le type le plus "faible" du langage : n'importe quelle valeur peut être convertie en chaîne, et en cas de doute avec l'opérateur +, c'est une concaténation qui aura lieu, pas une addition.
Tous les objets possèdent une méthode générique toString "magique" qui est appelée lorsqu'il faut convertir leur valeur en chaîne. Elle peut bien sûr être écrasée par une méthode plus spécifique.
Les chaînes de caractères en JavaScript sont encadrées par des guillemets droits (double quotes, ") ou des single quotes ('), au choix. Il n'y a pas de distinction entre des chaînes définies avec l'un ou l'autre, mais si on commence une chaîne par un type de guillemet il faut la finir par le même type. À l'intérieur d'une chaîne, les séquences d'échappement connues fonctionnent comme partout :
* \n : line feed, saut de ligne Unix
* \r : carriage return, saut de ligne Mac OS classique
* \t : tabulation
* \\ : backslash
* \' ou \" : un guillemet si la chaîne commence par ce caractère
etc.
Enfin, JavaScript utilise des chaînes de caractères Unicode multi-octets. Quel que soit l'encodage du fichier où est écrit le script, il est toujours possible d'inclure n'importe quel caractère dans une chaîne, soit en récupérant une chaîne d'un autre fichier, soit en créant une chaîne avec la méthode statique String.fromCharCode, soit en utilisant la séquence d'échappement :
* \xHH : HH est le code hexadécimal du caractère dans l'encodage courant
* \uHHHH : HHHH est le code hexadécimal du caractère dans le tableau Unicode. Il ne peut y avoir moins de 4 chiffres après la séquence \u.

### boolean

Une variable de type boolean accepte deux valeurs : vrai et faux.
Dans une comparaison, les valeurs suivantes sont équivalentes (opérateur ==) à false :
* 0 : le nombre zéro et ses variations, du style 0.000, 0x0, 0e12, etc.
* "" : la chaîne vide
* "0" : la chaîne contenant le nombre zéro, et toutes ses variations, comme pour le nombre
* ou new Array : un tableau vide, et en fait tout objet dont la conversion en chaîne est l'une des valeurs ci-dessus
Par ailleurs, les valeurs suivantes donnent false si on les convertit (explicitement ou pas) en booléen, bien qu'elle ne soient pas toutes équivalentes par comparaison :
* 0 et ses variations
* null
* NaN
* undefined
Comme ces listes le montrent, une valeur peut être équivalente à false sans être considérée comme fausse elle-même ! Et inversement, une valeur considérée comme fausse n'est pas forcément équivalente au booléen false.
Cela peut sembler surprenant et illogique à première vue (et source de quelques bugs) mais il faut comprendre l'origine de ces différences :
* les valeurs null, NaN et undefined refusent simplement d'être équivalentes à n'importe quoi sauf elles-mêmes. Donc l'opérateur == retournera systématiquement false si une des opérandes est null, NaN ou undefined et que l'autre n'est pas strictement identique. Cependant, à choisir entre vrai ou faux (lors d'une conversion en Boolean, il n'y a pas d'autre choix), ces valeurs sont plutôt false.
* les chaînes "0" et ses variantes sont... des chaînes, et false est un booléen. JavaScript ne peut pas comparer directement deux types différents. Il pourrait convertir la chaîne en booléen, mais préfère convertir les deux en number (le type number est plus "fort"). Le résultat est 0 == 0 la comparaison est donc vraie. Cependant, "0" reste une chaîne non-vide, et si on la convertir en booléen, on obtient true.
* la chaîne "false" est aussi une chaîne, mais ne peut pas être convertie en number. JavaScript, en dernier recours, convertit alors l'autre opérande en string et se retrouve à comparer "false"=="false", ce qui est vrai. Par contre, comme pour "0", la chaîne n'est pas vide et sa conversion en booléen donne true.
* le tableau vide est un tableau, donc JavaScript le convertit en chaîne pour le comparer à false. Or, la méthode toString d'un tableau retourne la fusion de tous les éléments, séparés par des virgules. Comme il n'y a aucun élément dans le tableau, le résultat est la chaîne vide "", qui est équivalente à false. Par contre, un tableau est de type objet et sa conversion en booléen donne true.
Une valeur qui n'est pas équivalente à false ne sera pas pour autant équivalente à true par comparaison, à commencer par null, NaN et undefined mais aussi toute valeur qui n'est pas équivalente à l'une des conversions possibles de true (la chaîne "true", la chaîne ou le nombre 1). Par contre, toutes les valeurs qui ne donnent pas false par conversion en boolean donnent true, sans exception.
Attention, les valeurs de type object, y compris les instances des classes String, Number et Boolean créées avec le constructeur new sont toujours converties en true, même lorsque leur valeur est "", 0 ou false (la seule exception est null qui est de type object et dont la conversion en booléen est false). Cependant la comparaison avec false fonctionne de la même façon qu'avec des valeurs littérales.

### object

Une variable de type object assume pleinement sa nature. Les autres types de variables, dits "scalaires", se comportent comme s'ils étaient eux-mêmes une valeur. Ainsi, lorsqu'on passe une variable scalaire à une expression, sa valeur est clonée. En revanche, passer une variable de type object ne fait que copier la référence, et la valeur n'est pas clonée.
L'existence de "classes" en JavaScript est discutée. Le langage ne possède pas de déclaration de classe en tant que telle. Pour cette raison, l'utilisation de ce terme sera mise entre guillemets.
Il existe trois manières de créer une variable de type object.
* implicitement par l'expression littérale d'une valeur non-scalaire (valable uniquement quand une expression littérale existe pour la "classe" voulue)
* explicitement avec new et le constructeur (valable pour toutes les "classes" sauf les objet du DOM)
* indirectement pour les objets du DOM (et on ne peut pas utiliser new avec eux)
L'instanciation explicite d'un objet grâce à un constructeur s'effectue avec l'opérateur new.
Les expressions littérales de chaînes, nombres et booléens créent des variables scalaires alors que le constructeur de ces types crée un objet (explicitement de type object et donc strictement différents d'une valeur scalaire équivalente). Mais les expressions littérales de fonctions, tableaux et expressions rationnelles créent des objets, car ce ne sont pas des types scalaires. Ces objets, instanciés sans utilisation de new, sont néanmoins strictement identiques à leur équivalent produit par l'appel d'un constructeur. Par exemple :
On peut créer un objet générique (qui sera simplement une instance de la "classe" Object) avec la notation littérale. Cela consiste à écrire, entre accolades, une liste de couples clé : valeur séparés par des virgules, la clé pouvant être un identifiant ou bien une chaîne, et la valeur pouvant être n'importe quelle valeur. La clé et la valeur sont séparés par deux points (':').
Attention, dans l'exemple ci-dessus, on ne pourra accéder à la dernière propriété ("nom de code") de l'objet qu'avec la notation tableau (avec des crochets), pas la notation objet (avec des points) car ce n'est pas un identifiant valide (il y a des espaces dedans).
Le DOM (aussi bien W3C que IE) définit certaines "classes" : HTMLElement, HTMLTextNode, HTMLDocument, CSSRuleSet, CSSRule, etc. On doit utiliser les méthodes du DOM (comme document.createElement) pour instancier ces objets (le "DOM 0" fait exception à cette règle et à bien d'autres).
Les autres "classes" d'objets ne peuvent être créés que par un constructeur. Il y a des constructeurs natifs tels que Date, et on peut définir un constructeur soi-même. Pour plus de détails, voir le chapitre consacré aux objets.

### function

La différence essentielle entre une variable de type function et une variable de type object, est qu'on peut appeler une fonction. Dans les deux sens du terme :
* une fonction peut être nommée, par un identifiant autre que le nom de la variable qui la référence
* une fonction peut être invoquée
Attention : ne pas confondre le type de variable ("object", "function") avec les constructeurs homonymes (Object, Function). Une variable de type "object" peut avoir n'importe quel constructeur sauf Function et bien des comportements différents, tous différents du comportement d'une fonction. Mais cette section est uniquement consacrée au type "function".
Contrairement aux autres types, le type "function" n'a pas de valeur spéciale (telle que NaN pour "number" ou null pour "object"). Il n'y a aucun moyen de convertir directement un autre type en fonction.
Une fonction est créée par l'expression littérale (exemple ci-dessous) ou bien par le constructeur Function.
Cette déclaration crée une variable "fibonacci" qui référence la fonction, mais c'est aussi une opération qui retourne la référence de la fonction, que l'on peut ainsi affecter à une autre variable. Il est d'ailleurs possible de déclarer une fonction anonyme. De plus, toute nouvelle fonction reçoit automatiquement une propriété prototype identique au prototype de la fonction Object.
L'appel se fait en ouvrant et fermant une paire de parenthèses juste après une expression dont la valeur est de type "function". Cette expression n'est pas obligatoirement le nom d'une fonction, ni même un identifiant. Cette signification des parenthèses est prioritaire sur la signification générale (forcer une expression à être évaluée avant celles qui l'entourent).
Les opérateurs et méthodes qui acceptent des objets comme opérande ou argument fonctionnent pareil avec des fonctions, notamment le point pour accéder aux propriétés de la fonction. L'opérateur new n'accepte que des fonctions comme opérande.
Par défaut, la conversion d'une fonction en chaîne retourne le code source de la fonction, préalablement reformaté par l'interpréteur JavaScript : les point-virgules, sauts de ligne et indentations seront normalisés.

# Opérateurs

Les opérateurs JavaScript reprennent la plupart des opérateurs du langage C.

## Affectation (= et ses dérivés)

Le principal opérateur d'affectation est le signe égal (=). Il permet d'affecter une valeur à une variable.
Comme en C, l'opérateur d'affectation copie la valeur de l'expression qui le suit (opérande de droite) dans la variable qui le précède (opérande de gauche). Contrairement au C, l'opération d'affectation ne retourne généralement pas true ou false, mais la valeur qui a été affectée. Dans le cas où l'affectation est impossible, JavaScript lance une exception.
Lorsque l'identifiant à gauche du signe = n'est pas une propriété existante, cette propriété est ajoutée automatiquement à l'objet global (window) et l'affectation se déroule normalement. Il n'y a jamais d'erreur lorsqu'on affecte une valeur à une variable d'un type différent car ce sont les valeurs elles-mêmes qui ont un type en JavaScript, pas les variables. L'affectation à une constante prédéfinie (comme Math.PI) ne provoque pas d'erreur mais la constante ne sera pas modifiée.
La seule cause d'erreur possible lors d'une affectation est lorsque l'opérande de gauche n'est pas une variable valide ou devient autre chose qu'une variable avant l'affectation :
JavaScript reprend les raccourcis sténographiques du langage C en proposant les autres opérateurs d'affectation qui font précéder le signe égal par un opérateur binaire arithmétique (+, -, *, / ou %), de concaténation (+), bit-à-bit (&, | ou ^) ou de décalage de bits (<<, >> ou <<<).
ma_var = ma_var + 2 est remplacé avantageusement par ma_var += 2 ma_var = ma_var / 2 peut s'écrire ma_var /= 2 ma_var = ma_var << 2 peut s'écrire ma_var <<= 2 ma_var = ma_var ^ 1 peut s'écrire ma_var ^= 1 et ainsi de suite.

## Concaténation (+)

Surchargé avec l'opérateur arithmétique d'addition, l'opérateur de concaténation permet de joindre des chaînes, ou des chaînes avec d'autres objets comme des nombres, qui sont alors automatiquement convertis en chaîne. Le résultat d'une concaténation est du type string.
La concaténation ne provoque jamais d'erreur car en JavaScript, absolument tout peut être converti en chaîne.
Attention, l'opérateur + fonctionne ainsi dès qu'au moins une des opérandes est de type "string" (y compris la chaîne vide ""), "function" ou "object" (à l'exception de null). Une chaîne représentant un nombre, par exemple la chaîne "17", sera considérée comme une chaîne et ne sera pas convertie automatiquement en nombre par cet opérateur.

## Opérateurs arithmétiques
### Addition (+)

En présence de deux opérandes de type number ou boolean, d'objets construits avec new Number, de l'objet null, ou de la valeur undefined, l'opérateur d'addition va effectuer la somme arithmétique des deux valeurs, après les avoir converties en nombre le cas échéant. Le résultat de l'addition est de type number :
Exemple :
* 3 + 1 donne 4
Dans le cas limite Infinity + -Infinity, le résultat est NaN.
Attention : si au moins l'un des deux objets ne fait pas partie de ceux mentionnés ci-dessus, alors l'opérateur se comporte comme un opérateur de concaténation :
Exemple :
* 3 + "bonjour" donne "3bonjour" (et non 0)
Accessoirement, l'opérateur + avec une seule opérande à sa droite se comporte comme un opérateur unaire de conversion en nombre, comme la méthode Number. C'est très utile pour forcer justement les autres + à additionner au lieu de concaténer :

### Soustraction (-)

Retourne la différence arithmétique entre deux valeurs de type number ou converties dans ce type. Le résultat est lui-même de type number. Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoie NaN (Not a Number). Dans le cas limite Infinity-Infinity, le résultat est également NaN.
Accessoirement, le signe - avec une seule opérande à sa droite devient un opérateur unaire qui en change le signe (après l'avoir convertie en nombre si nécessaire).

### Multiplication (*)

Retourne le produit arithmétique de deux valeurs de type number ou converties dans ce type. Le résultat est lui-même de type number. Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoie NaN (Not a Number). Dans le cas limite Infinity*0, le résultat est également NaN.

### Division (/)

L'opérateur de division permet d'effectuer la division de deux entités de type number ou converties dans ce type. Le résultat est lui-même de type number. Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoie NaN (Not a Number). Dans les cas limite Infinity/Infinity et 0/0, le résultat est également NaN.
À noter : la division d'un autre nombre par zéro est possible et retourne le nombre Infinity sans provoquer d'erreur.
Attention : le signe / est également utilisé pour délimiter les expressions rationnelles. En cas d'ambiguïté (même en cas de saut de ligne sans point-virgule), JavaScript privilégie la division.

### Modulo (%)

L'opérateur '%' permet d'effectuer l'opération mathématique modulo
Il retourne l'opérande de gauche modulo l'opérande de droite, et les deux opérandes sont d'abord converties en number si elles étaient d'un autre type. Le résultat est lui-même de type number. Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoie NaN (Not a Number). De plus, n'importe quel nombre modulo zéro retournera NaN.
À noter : l'opérateur % accepte sans problème des nombres non-entiers pour les deux opérandes mais dans ce cas il y a souvent un problème de précision, par exemple 4%1.6 affichera 0.7999999999999998 au lieu de 0.8.
Attention : le signe % est utilisé par l'encodage des URL. S'il est suivi de deux chiffres hexadécimaux, le navigateur convertira la séquence %xx en un caractère si le code se trouve dans une URL javascript:. Pour éviter ce problème, mettez l'opérande de droite entre parenthèses ou bien séparez-la de l'opérateur par un espace.

### Limitation sur les entiers

Javascript n'a pas de type pour les nombres entiers, il utilise des nombres à virgule flottante. Les entiers ou les chiffres d'un nombre réel sont limités à 54 bits dans les opérations arithmétiques, et à 32 bits dans les opérations sur les bits.
Par exemple, l'expression 0xF0000000000003FF == 0xF000000000000000 retourne true car seuls les 54 bits de poids forts sont stockés.

## Opérateurs logiques
### ET (&&)

L'opérateur logique &&, aussi appelé "prérequis", détermine si deux expressions sont "vraies" (au sens booléen). Le résultat est l'une des deux opérandes, et la conversion booléenne du résultat est identique au résultat de l'opérateur && dans les langages où il retourne simplement un booléen.
Cet opérateur est utilisé fréquemment dans les structures de contrôle if, while, etc :
L'opérateur && en JavaScript retourne l'opérande de gauche si elle est fausse (c'est-à-dire si sa conversion en booléen est égale à false) sans évaluer l'expression de droite, et sinon, évalue et retourne l'opérande de droite. Par conséquent, son résultat n'est généralement pas un booléen et && n'est pas strictement commutatif :
Cela peut provoquer quelques comportements inattendus, par exemple :
Mais on peut aussi en tirer partie pour condenser un code tel que celui-ci :
en le remplaçant par celui-ci :
D'où le nom "prérequis" : l'opérande de droite requiert que l'opérande de gauche soit vraie pour être évaluée et retournée.

### OU (||)

L'opérateur logique ||, aussi appelé "défaut", détermine si au moins une expression est "vraie" (au sens booléen). Le résultat est l'une des deux opérandes, et la conversion booléenne du résultat est identique au résultat de l'opérateur || dans les langages où il retourne simplement un booléen.
L'opérateur || en JavaScript retourne l'opérande de gauche si elle est vraie (c'est-à-dire si sa conversion en booléen est égale à true) sans évaluer l'expression de droite, et sinon, évalue et retourne l'opérande de droite. Par conséquent, son résultat n'est généralement pas un booléen et || n'est pas strictement commutatif :
Cela peut provoquer quelques comportements inattendus, par exemple :
Mais on peut aussi en tirer partie pour condenser un code tel que celui-ci :
en le remplaçant par celui-ci :
D'où le nom "défaut" : si l'opérande de gauche a une valeur non-nulle, elle est utilisée, mais sinon l'opérande de droite est utilisée comme valeur par défaut. Cela permet à la fonction dans ce dernier exemple de prévoir une valeur par défaut pour son argument 'n', au cas où il ne serait pas fourni.

### NON (!)

L'opérateur de négation ! contredit logiquement l'expression qu'il précède. Il en convertit d'abord la valeur en booléen si elle était d'un autre type, et retourne le booléen contraire.
Si on l'utilise deux fois de suite (!!) il permet simplement de convertir la valeur de son opérande en booléen :
mais

## Opérateurs de bits

Les opérateurs bit-à-bit et de décalage de bits commencent par convertir leurs opérandes en entiers de 32bits, après les avoir converties en number si c'était nécessaire. Les nombres NaN et Infinity donnent le nombre entier zéro.
Les opérateurs logiques &, |, ^ et ~ effectuent un test logique séparément sur chaque bit, de la manière illustrée par l'exemple suivant ou l'opérateur est un ET bit-à-bit :
Les autres opérateurs de bits sont les opérateurs de décalage des bits (vers la droite ou la gauche).

### Et binaire (&)

Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :

### Ou binaire (|)

Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :

### Ou exclusif binaire (^)

Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :

### Non binaire (~)

Cet opérateur retourne pour un opérande entier a un nombre entier c dont chaque bit est l'opposé du bit original :

### Décalage de bits vers la gauche (<<)

Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la gauche du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle et en supprimant les bits qui dépassent de l'autre côté.
Exemple :
Attention : le bit le plus à gauche détermine le signe du nombre, et il est aussi affecté par le décalage.

### Décalage de bits vers la droite (>>)

Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la droite du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle à droite et en supprimant des bits de poids faible (les plus à gauche dans la représentation binaire).
Exemple :
Le bit de signe (le plus à gauche) est préservé.

### Décalage de bits vers la droite y compris le bit de signe (>>>)

Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la droite du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle à droite et en supprimant des bits de poids faible (les plus à gauche dans la représentation binaire).
Exemple :
Attention : le bit le plus à gauche détermine le signe du nombre, et il est aussi affecté par le décalage. Le résultat de l'exemple ci-dessus est 536870910.

## Opérateurs de comparaison
### Égalité (==, ===)

L'opérateur d'égalité == renvoie la valeur vrai si les deux termes à comparer sont équivalents.
L'opérateur === compare les valeurs et leur type. Le résultat est vrai (true) si les deux valeurs sont égales et de même type.
Si les deux opérandes sont des références (types object, function...), c'est les références qui sont comparées.
Quelques valeurs spéciales :
* undefined est seulement équivalent, mais pas identique, à null.
* La chaîne vide "" est équivalente au nombre zéro, au booléen false, et à une liste vide.
* Tous les nombres sont équivalents à leurs représentations sous forme de chaîne.
* Le nombre 1 est, de plus, équivalent au booléen true.
* Par contre le nombre NaN n'est pas équivalent à la chaîne "NaN".
Ces équivalences sont commutatives.

### Inégalité (!=, !==)

L'opérateur d'inégalité != renvoie la valeur vrai si les deux termes à comparer sont différents.
L'opérateur !== compare les valeurs et leur type. Le résultat est vrai (true) si les deux valeurs sont différentes ou de type différent.

### Ordre (<, <=, >=, >)

Respectivement inférieur, inférieur ou égal, supérieur ou égal, supérieur, permet de comparer des valeurs.
À l'instar de l'opérateur +, les opérateurs de comparaison peuvent comparer numériquement ou alphabétiquement. Si les deux opérandes sont de types number ou boolean, object construit par new Number, ou les valeurs null ou undefined (les mêmes valeurs qui font que l'opérateur + les additionnerait), alors les valeurs sont converties en nombres et comparées en tant que telles. Sinon, les valeurs sont converties en chaînes et comparées alphabétiquement.

## Opérateurs d'incrémentation et décrémentation (++ --)

Ces deux opérateurs proposent un moyen simple d'incrémenter ou décrémenter une variable de type number. Si l'opérande n'est pas de type number, elle est convertie automatiquement. Si ce n'est pas une variable du tout, cela provoque une erreur comme pour l'affectation.
Note : Appliqué sur une valeur qui ne peut être convertie, comme une chaîne qui ne représente pas un nombre, l'opérateur abîme définitivement le contenu de la variable. Contrairement à l'opérateur +, l'opérateur ++ ne concatène jamais.
Remarque :
    En langage C cette instruction peut être utilisée car une chaîne de caractères en C est un pointeur, donc fondamentalement un nombre entier. Ce n'est pas le cas en JavaScript.
Comme dans les autres langages, les opérateurs ++ et -- peuvent être placés avant ou après leur opérande. Cela change la valeur retournée par l'opération :
* Lorsque l'opérateur est placé à droite, l'opération retourne d'abord la valeur de départ de la variable puis l'incrémente (Post-incrémentation);
* Lorsque l'opérateur est à gauche, l'opération incrémente d'abord la variable puis retourne sa valeur modifiée (Pré-incrémentation).

## Opérateurs spéciaux
### Conditionnel (? :)

L'opérateur conditionnel est ternaire (il prend trois opérandes). Il est représenté par le signe ? qui sépare les deux premières, et : qui sépare les deux dernières. L'opération retourne l'une des deux opérandes qui entourent les deux points (:) après avoir déterminé si l'expression précédant le point d'interrogation (?) est vraie ou fausse.
Si X est vrai (autrement dit si sa conversion en booléen donne true), l'opération évalue et retourne A sans évaluer B. Sinon, elle évalue et retourne B sans évaluer A.
On peut se représenter l'opérateur avec une structure if...else classique :

### Instanciation (new)

L'opérateur new crée un nouvel objet qui hérite du prototype de la fonction qui le suit, puis appelle cette fonction dans laquelle le mot-clé this sera une référence à ce nouvel objet. La fonction qui sert d'opérande à new (le constructeur) peut prendre des arguments. Le résultat de l'opération est l'objet ainsi créé, sauf si le constructeur retourne autre chose.
Il est possible, dans l'opération d'instanciation, d'omettre les parenthèses après le nom de la fonction (comme si on ne l'appelait pas) lorsqu'on ne lui passe aucun argument :
Bien sûr, une référence du constructeur est suffisante pour instancier un objet, il n'est pas nécessaire d'utiliser le nom de la fonction tel que défini dans la déclaration function :
Il est même possible de déclarer le constructeur dans la même ligne que new, et même d'utiliser une fonction anonyme :
Si l'opérande n'est pas de type "function", l'opération provoque une erreur.

### Dé-référencement (delete)

L'opérateur delete supprime la propriété qui le suit. Si la propriété contient une référence à un objet, seule la référence est supprimée : l'objet existe toujours et, s'il est référencé par d'autres variables, ne sera pas supprimé.
Note : seul l'opérateur delete efface la propriété. Affecter null ou undefined à une variable déréférence l'objet qu'elle référençait s'il y en avait un, mais la variable existe toujours :
delete peut supprimer toute propriété existante (y compris prédéfinies telles que Math, Object...), mais pas les variables locales déclarées avec var ni les arguments d'une fonction, ni les variables NaN et undefined. Dans les cas où la variable ne peut pas être supprimée, l'opération retourne false. delete accepte aussi des propriétés inexistantes, et des valeurs anonymes (dans ce cas, il n'a aucun effet).

### Propriété d'un objet (.)

L'opérateur . (point) permet simplement d'accéder à la propriété, nommée par l'opérande de droite, de l'objet référencé par l'opérande de gauche. L'opérande de droite doit être un identifiant ; l'opérande de gauche peut être n'importe quelle expression qui retourne un objet différent de null.
Si l'opérande de gauche est une valeur scalaire (string, boolean ou number), elle est convertie en un objet correspondant. Par exemple, une chaîne est convertie en un objet construit par String :
L'opérande de droite n'a pas besoin de désigner une propriété existante de l'objet. Il suffit (et il faut) que ce soit un identifiant valide.
L'opération provoque une erreur si l'opérande de gauche est undefined ou null, ou si l'opérande de droite n'est pas un identifiant.
Attention, le point est également le séparateur entre parties entière et décimale d'un nombre. S'il est immédiatement précédé par un nombre entier (sans espace), il ne fonctionnera pas comme opérateur.

### Propriété d'un objet existant (?.)

Idem sur "." mais sans erreur (TypeError) si l'objet n'existe pas.

### Valeur d'une variable inexistante (??)

Définit une valeur par défaut si une variable est null ou undefined.

### Type de variable (typeof)

L'opérateur typeof retourne une chaîne représentant le type de la valeur de l'expression à sa droite. Les possibilités sont "undefined", "boolean", "number", "string", "object" et "function".

### Type d'objet (instanceof)

L'opérateur instanceof détermine si l'opérande de gauche "hérite" de l'objet à droite. C'est-à-dire, pour parler JavaScript, si le prototype de l'objet à droite de instanceof se trouve dans la chaîne de prototypes de l'opérande de gauche. instanceof retourne un booléen. L'opérande de droite n'a pas besoin d'être le constructeur de celle de gauche pour que instanceof retourne true.
instanceof retourne toujours false lorsque l'opérande de gauche est une valeur scalaire (types string, boolean, number), undefined ou null. Une erreur se produit si c'est l'opérande de droite qui est dans ce cas.

### Appartenance à une liste (in)

L'opérateur in détermine si l'expression à sa gauche est le nom d'une propriété de l'objet à sa droite. L'opérande de droite doit obligatoirement être de type "object" et différente de null, sinon l'opération provoque une erreur. L'opérande de gauche peut être n'importe quelle valeur car elle sera automatiquement convertie en chaîne.
Exemple :

### Can't perform a React state update on an unmounted component

Cette erreur se produit quand le composant n'est plus présent dans la page, mais que son état est mis à jour par la conclusion d'une opération asynchrone (Promise, timer, évènement...).
Pour ne plus avoir ce message, il faut libérer les ressources (timer, annuler les requêtes en cours...) dans la fonction retournée dans le code d'un useEffect, et gérer un booléen mis à jour pour connaître l'état du composant au début des callbacks pour ne pas effectuer le traitement si le composant n'est plus monté.

### A component is changing an uncontrolled input of type controltype to be controlled.

Les contrôles d'entrée de formulaire (champ texte, case à cocher, liste déroulante, ...) peuvent être contrôlé ou non, mais ne peuvent varier entre les deux modes.
Le mode contrôlé signifie que la valeur est définie par un état (useState en codage de composant de type fonctionnel).
Cette erreur peut arriver quand l'état n'a pas de valeur initiale définie (undefined), ce qui met le contrôle d'entrée en mode non contrôlé. Le mode change à contrôlé quand l'utilisateur modifie la valeur (taper du texte, cocher la case, ...) provoquant un changement de l'état à une valeur définie, passant le contrôle d'entrée en mode contrôlé, ce qui provoque ce message d'erreur.
Dans ce cas, le remède est de définir une valeur initiale (argument de la fonction useState).

### React Hook "use..." is called conditionally. React Hooks must be called in the exact same order in every component render

Les hooks sont les fonctions dont le nom commence par "use" (useState, useEffect). Chaque appel à une telle fonction alloue en interne un emplacement (slot) permettant de stocker l'état interne du hook. Ces fonctions doivent donc être appelées systématiquement, et toujours dans le même ordre, donc sans condition.
React n'est pas un framework stable, et cette erreur peut être un faux positif très gênant.

## CSS
### z-index n'a aucun effet sur cet élément, car il ne s'agit pas d'un élément positionné

La propriété CSS z-index n'agit que sur les éléments ayant une propriété position. La solution est de définir cette propriété, en général avec la valeur relative.

# Références
## Liens externes
### Spécifications

* Standard ECMA 262 ECMAScript Language Specification
    https://www.ecma-international.org/ecma-262/6.0/

### Documentation

* https://wiki.selfhtml.org/wiki/JavaScript
* https://github.com/getify/You-Dont-Know-JS

### Outils

* http://wiki.moxiecode.com/index.php/Main_Page : TinyMCE WYSIWYG.
* https://jsfiddle.net/