Big bang → Apparition de l'homme → Javascript

Voir https://www.youtube.com/watch?v=RO1Wnu-xKoY et toute la série de vidéos associées

• Large domination de Netscape, à une époque où le web n'est qu'un moyen de diffuser du contenu.
• Mark Anderssen, responsable de Netscape, souhaite ajouter de l'interactivité côté client, avec un langage utilisable par les designers et les développeurs.
• Netscape missionne Brendon Eich pour embarquer... Scheme dans le navigateur (cf. cours PFS)
• Fusion Sun Microsystems (Java) avec Netscape → Java revient en force, mais est jugé trop complexe tel quel.
• Finalement, Eich s'inspire de Java pour créer l'ancêtre de Javascript, appelé Mocha, en seulement 10 jours.

Mocha emprunte la syntaxe de Java et conserve l'aspect fonctionnel de Scheme, et l'orienté objet par prototypes de Smalltalk.

Le nom Mocha évoluera vers LiveScript, puis vers Javascript pour rappeler Java.

On a donc d'un côté Javascript, souple et léger, et Java, plus lourd mais plus riche, utilisé pour développer des composants web.

A l'époque la concurrence était rude entre Netscape (Navigator) et Microsoft (Internet Explorer). Microsoft a donc proposé sa propre implémentation de Javascript qu'il a nommé JScript.

Bien évidemment, Javascript et JScript ne sont pas compatibles, car les fondements du langage n'ont pas été standardisés... Les développeurs devaient donc développer en double leurs sites, ou apposer un des fameux "Best viewed with Netscape" or "Best viewed with Internet Explorer".

• Première tentative auprès du W3C → échec (contentieux avec Netscape)
• Seconde approche avec ECMA → succès

ECMA European Computer Manufacturer Association, fondée en 1961, se consacre à la standardisation de systèmes d'information et de communication.

En novembre 1996, Netscape soumet Javascript à ECMA pour en faire une spécification standard :

• tous les acteurs (développeurs de navigateurs, géants du net, etc.) ont leur mot à dire - comité technique TC39
• toutes les implémentations du langage sont consistantes au standard ECMA-262 qui définit ECMAScript (le nom Javascript étant propriété d'Oracle qui a racheté Sun Microsystems)

De nos jours, ECMAScript désigne le standard ECMA-262 et Javascript désigne le langage en pratique (son implémentation).

Chaque proposition d'amélioration est discutée par le comité technique TC39 et progressivement validée
https://www.ecma-international.org/publications/standards/Ecma-262.htm.

Parmi tous les nombreux moteurs interprétant Javascript, on retiendra les trois principaux :

• SpiderMonkey - Firefox, Gecko Layout Engine, Adobe Acrobat
• V8 - Chrome, Node.js, Opera, MarkLogic
• JavaScriptCore - Webkit, Safari, Qt5

Tous 3 supportent généralement la dernière spécification ECMA-262. D'autres (comme Chakra pour MS Edge Legacy - avant 2019) bloquent à des versions antérieures d'ES et ne proposent éventuellement que certaines des fonctionnalités récentes.

A noter que pour des questions de performances, ces moteurs utilisent la technique de compilation Just-In-Time, qui consiste à compiler à la voler le programme plutôt qu'avant son exécution (compromis entre compilation ahead-of-time et interprétation).
https://www.youtube.com/watch?v=p-iiEDtpy6I

Mauvaises nouvelles : le standard évolue régulièrement, et même si les navigateurs suivent, les utilisateurs ne les mettent pas forcément à jour systématiquement.

On retrouve en Javascript les ingrédients principaux en terme de syntaxe du langage Java :

• des instructions qui se terminent par ;
• des commentaires sur une ligne avec // ou sur (potentiellement) plusieurs /* ... */
• des blocs de code délimités par { ... }
• les structures de contrôle classiques if, while, for, etc.

En Javascript, les variables servent à stocker des valeurs. Dans une portée donnée, toutes les variables doivent être uniques.

Pour l'instant, on déclare les variables avec var (notation historique), mais il existe aussi let et const dont on reparlera un peu plus tard...

Comme en Java, le nommage des variables est régi par les règles suivantes :

• les noms de variables contiennent des lettres, des chiffres, _, $ et ne doivent pas commencer par un chiffre
• les noms de variables sont sensibles à la casse : x et X sont deux noms différents
• les mot-clés du langage Javascript ne sont pas autorisés

• number - tous les nombres entiers ou flottants : 42, 1.0, -42e3
• boolean - valeurs booléenne : true, false, 42 > "5"
• string - chaînes de caractères délimitées par des guillemets simples ou doubles : "Quarante-Deux", 'La réponse à la grande question sur la vie, l\'univers et tout le reste.', "42"
• object - type agrégé avec prototype : {prenom: "Fred", nombre: 42}
• date - type Date avec fonctions de manipulation Date()
• array - tableaux : [], [42, "quarante-deux"]
• function - une fonction, first-class citizen en Javascript : function(...) { ... }
• undefined - type d'une variable non définie

• true, false - valeurs booléennes
• Infinity - l'infini
• NaN - not a number
• undefined - absence de valeur (cas d'une variable déclarée, mais non définie/affectée)
• null - valeur vide (mais valeur quand même)

Javascript est faiblement typé, cela signifie que :

• on ne définit pas le type d'une variable lorsque l'on déclare celle-ci :
  var x = 42;
• le type d'une variable peut changer par une affectation :
  x = "Quarante-Deux";
• des conversions de type au sein des expressions peuvent avoir lieu (en fonction des opérateurs), mais sans impact sur le type initial de la variable :
  var y = 40 + 2 * x; va nécessiter la conversion de la valeur de x calculer y (type casting/conversion/coercion).

On peut se dire que la valeur booléenne d'une chaîne s correspond à s.length > 0.

Ces opérateurs s'appliquent entre chaînes ou entre nombres. Les données sont automatiquement converties vers l'un ou l'autre de ces types.

• Javascript ne propose qu'un seul type nombre pour les valeurs numériques.
• Différentes écritures sont possibles : 42 (sans décimales), 4.2 (avec décimales), 4.2e1 ou 0.42e-2 (exposant pour les grands nombres).
• Les nombres sont tous représentés par des virgules flottantes en 64 bits : 1 bit de signe (bit 63), 11 bits pour l'exposant (bits 62-52) et les 52 bits restants pour la mantisse.

• Jusqu'à 15 chiffres, les entiers sont précis. Au delà, il y a quelques arrondis.
• Bad news, les calcul avec des nombres flottants en représentation IEEE-754, c'est pas top...
  0.1 + 0.2 → 0.30000000000000004 -- solution : réécrire en (0.1*10 + 0.2*10)/10

Javascript utilise l'opérateur + pour l'addition et la concaténation.

Javascript fonctionne de gauche à droite.

Les nombres peuvent aussi se représenter comme des objets.

var l = 42; (littéral -- typeof l → "number")
var o = new Number(42) (objet -- typeof o → "object")

Méthodes statiques (pas besoin de créer d'objet pour les invoquer) :

Méthodes d'instance (qui s'invoquent sur un nombre variable ou objet) :

La principale propriété est la constante Math.PI. La classe Math propose également (entre autres) le nombre d'Euler (Math.E), les logarithmes néperiens de 2 (Math.LN2), la racine de 2 (Math.SQRT2) etc.

• fonctions classiques : valeur absolue (Math.abs(x)), exponentielle (Math.exp(x)), logarithme (Math.log(x)), puissance (Math.pow(x,y)), et racine carrée (Math.sqrt(x))
• fonctions trigonométriques (avec angles en radians) : cosinus (Math.cos(x)), sinus (Math.sin(x)), tangeante (Math.tan(x)), etc.
• fonctions d'arrondis : à l'entier inférieur (Math.floor(x)), à l'entier supérieur (Math.ceil(x)), à l'entier le plus proche (Math.round(x))
• fonctions utilitaires : minimum d'une liste de valeurs (Math.min(a,b,...)), maxium (Math.max(a,b,...)) génération aléatoire (Math.random() qui renvoie un réel entre 0 inclus et 1 exclu)

Les chaînes de caractères sont une suite de caractères délimités par des guillemets simples (ex. 'Fred') ou doubles (ex. "Fred"). Contrairement à PHP le choix de l'un ou l'autre des délimiteurs ne fait pas de différence.

La longueur d'une chaîne est donnée par la propriété length (sans les parenthèses !) - Exemple : "Fred".length → 4

Classiquement, les indices des chaînes commencent à 0.

Les méthodes les plus utilisées sont similaires à celles proposées par Java.

Les littéraux de gabarits sont délimités par des ` (accent grave) au lieu des habituels guillemets simples ou doubles.

Il est possible de faire apparaître des expressions délimitées par ${...} au sein de la chaîne et qui seront évaluées et substituées pour construire la chaîne. Par ailleurs, il est possible de déclarer des chaînes multi-lignes.

La notation avec [ ] ou ( | ) permet de liste des caractères/chaînes/sous-chaîne autorisées.

Une partie de schéma peut-être répétée en utilisant des quantificateurs.

Plutôt que d'énumerer les caractères autorisés/interdits individuellement, on peut utiliser des meta-caractères.

Pour plus de détails sur les formats de chaînes de caractères associés aux dates :
https://www.w3schools.com/js/js_date_formats.asp

Une variante de ces méthodes existe avec UTC (ex. getUTCTime()) pour spécifier la date par rapport à UTC. Par défaut les dates manipulées correspondent à la locale du poste client.

Les fonctions :

• permettent de factoriser du code, en vue de faciliter l'écriture et la maintenance du code,
• peuvent admettre des paramètres
• peuvent renvoyer une valeur

En Javascript, le typage est dynamique, de ce fait, quand on déclare une fonction :

• on ne lui déclare pas de type de retour
• les paramètres ne sont pas typés, il n'y a pas de vérification de type sur les paramètres

Et en plus, on peut appeler la fonction sans renseigner tous ses paramètres.

Si un appel de fonction ne présente pas assez de paramètres par rapport à la signature déclarée, les valeurs manquantes sont undefined.

Si un appel de fonction propose trop de valeurs de paramètres, les valeurs en trop sont ignorées.

Classiquement, la valeur retournée par la fonction est renvoyée par return.

Si la fonction ne renvoie aucune valeur, alors sa valeur de retour est undefined.

Chaque fonction présente un objet arguments qui est un tableau permettant d'accéder aux arguments de la fonction appelée et permet de connaître leur nombre, valeurs, etc.

Il est possible d'utiliser la notation ... pour désigner un nombre d'arguments quelconque. Cette notation (appelée Rest) ne s'applique, si nécessaire, qu'au dernier paramètre. Les arguments sont ensuite accédés comme un tableau.

A l'inverse, il est également possible d'utiliser la notation ... (appelée cette fois-ci Spread) sur un tableau lors d'un appel de fonction. Les valeurs du tableau seront alors utilisées comme les différents arguments de la fonction.

Les arguments sont passés par valeur. La fonction n'a accès qu'aux valeurs, pas à l'emplacement mémoire des arguments. De ce fait, si la valeur d'un argument est changée par la fonction, cela n'affecte pas la variable initiale.

Les références sont les valeurs des objets. Si la fonction modifie la valeur d'attribut d'un objet en paramètre, celui-ci restera modifié.

• Portée globale : pour les variables déclarées en dehors de toute fonction, qui seront accessibles de n'importe où (ie. dans n'importe quelle fonction ou en dehors), mais aussi les variables affectées dans une fonction sans avoir été déclarées (!)
• Portée locale : pour les variables déclarées dans une fonction, qui ne seront accessible que depuis la fonction où elles sont déclarées.

Pour pallier au problème de portée des variables déclarées avec var, ES2017 a introduit deux mots-clés pour définir des données :

• const qui permet de définir une constante. Celle-ci constante devra obligatoirement être déclarée avec une valeur assignée.
• let qui permet de déclarer une variable locale au bloc de code considéré.

La notation vue précédemment function f(...) { ... } est une déclaration de fonction. On peut aussi définir une fonction comme une expression qui sera stockée dans une variable.

var f = function(arguments...) { /* ... code de la fonction ... */ }

On déclare ainsi une fonction anonyme qui sera appelée par l'intermédiaire de la variable dans laquelle elle est enregistrée.

ES2015 a introduit les fonctions fléchées (arrow functions). Il s'agit d'un sucre syntaxique [avec une petite subtilité, on y reviendra plus tard] pour la déclaration d'une fonction dans le plus pure style de la programmation fonctionnelle à la Caml.

Voir https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077 pour plus de détails sur l'utilité de cette notation.

• Les fonctions peuvent être stockées dans des variables, si déclarées comme des expressions. Dans ce cas, il s'agit de fonctions anonymes.
• Les fonctions peuvent être utilisées comme des valeurs, qui sont passées en paramètre, ou renvoyées par une fonction.

En Javascript, il existe un mécanisme qui s'applique automatiquement sur le code et qui va remonter les déclarations (fonctions ou variables) en début de script ou de fonction.

De ce fait, les déclarations de fonctions sont remontées, tandis que seule la déclaration de la variable contenant la fonction est remontée, mais pas son initialisation.

Le hoisting est un principe de Javascript qui consiste à faire remonter automatiquement les déclarations (fonctions ou variables) au début du script ou de la fonction correspondante.

Attention, le hoisting a pour effet de ne faire remonter que la déclaration, et pas l'initialisation.

Le hoisting s'applique aux fonctions et variables déclarées avec var, mais pas à celles déclarées avec let ou const... enfin pas exactement.

Les déclarations sont (en interne) effectivement bien remontées, mais une donnée déclarée avec let ou const n'est pas accessible avant sa déclaration, sous peine de générer une erreur.

En Javascript une closure est une fonction (anonyme ou non) qui va accéder aux variables de l'environnement dans lequel elle est définie et les utiliser/modifier.

Une closure ("fermeture") est appelée ainsi car elle enferme avec elle les variables qui se trouvaient dans l'environnement où elle est définie. Lorsqu'elle s'exécute, les variables sont accédées et utilisées comme si elles étaient globales, pourtant ces variables restent locales à la fonction dans laquelle elles étaient déclarées.

La curryfication est un processus qui consiste à casser une fonction à plusieurs arguments pour en faire une suite d'appels de fonctions avec chacun des arguments successifs (nom donné d'après Haskell Brooks Curry). En Javascript, les closures permettent de réaliser ce genre de procédé.

Cette pratique consiste à déclarer une fonction qui s'exécute immédiatement. L'intérêt principal est de créer une portée locale dont les variables ne viendront pas "polluer" le scope global.

• Les déclaration de fonctions ne peuvent pas être écrites sous cette forme.
• Si la fonction retourne un résultat, celui-ci peut bien sûr être récupéré.

Les tableaux sont des structures de données classiques qui permettent de stocker plusieurs valeurs.

En Javascript, les tableaux sont toujours indicés par des entiers. Le contenu n'est pas obligatoirement homogène.

Pour déclarer un tableau, on utilise la syntaxe suivante :

var profsDuS6 = ["jube", "fred", "jmh", 42];

Il existe aussi une autre syntaxe pour faire la même chose :

Toutefois, bien que les tableaux (tout comme les chaînes) soient considérés comme des objets, il n'est pas nécessaire de les instancier avec un new pour des questions de performances.

A noter que new Array(10) créé un tableau vide de taille 10, mais new Array("10") créé un tableau contenant le seul élément "10".

Pour accéder au contenu d'un tableau, on utilise la notation [indice] classique.
L'indice est forcément une expression de type entier (ou qui sera convertie en entier pour être évaluée).

La longueur d'un tableau est donnée par sa propriété length.

L'utilisation de typeof ne va pas nous aider : typeof [] → "object".

Trois solutions :

1. Utiliser Array.isArray(t), mais celui-ci n'est supporté que depuis ECMAScript 5 (pas sur les anciens navigateurs).
2. Tester le constructeur : t.constructor.toString().indexOf("Array") > -1 ... un peu tordu non ?
3. Utiliser t instanceof Array : la meilleure solution

Plusieurs solutions existent, exemple avec t = ["fred", "jube"] :

• Utiliser l'indice : t[n], sachant que
  un indice inférieur strictement à la longueur écrase un élément existant : t[0] = "jmh" → ["jmh", "jube"]
  un indice supérieur strictement à la longueur crééra des vides : t[3] = "jmh" → ["fred", "jube", undefined, "jmh"]
• Utiliser la méthode push(valeur) : t.push("jmh") → ["fred","jube","jmh"]
  Cette méthode équivaut à t[t.length] = "jmh"
• Utiliser la méthode splice qui permet d'insérer des éléments à un indice spécifique en effaçant certains éléments : t.splice(1, 0, "jmh") → ["fred", "jmh", "jube"]

Les objets représentent des entités du monde réel ou virtuel. Ils possèdent des propiétés qui permettent de caractériser leur état, et des méthodes qui permettent de le faire évoluer.

En Javascript, à part les types primitifs (entiers, chaine, booléen, null, undefined), tout le reste est objet : les objets bien sûr, mais aussi des objets spéciaux/prédéfinis comme Date, Maths, les expressions régulières, les tableaux et les fonctions.

A noter que Number, Boolean et String sont des objets (si créés avec new, mais on évitera de le faire).

En Javascript, les objets sont et peuvent être déclarés comme un ensemble de couples (nom, valeur).

La syntaxe pour déclarer un objet : var personnage = { nom: "Threepwood", prenom: "Guybrush" };

En Javascript, les fonctions sont des valeurs de variables comme les autres. Les méthodes des objets sont donc des fonctions.

Comme dans tous les langages objet classiques, on retrouve le mot-clé this pour désigner l'objet sur lequelle la fonction est invoquée.

• L'accès aux propriétés d'un objet peut se faire soit avec la notation objet.propriete, soit avec la notation objet["propriete"].
• L'accès aux méthodes d'un objet ne se fait que via la notation objet.methode(...) qui réalise l'invocation de la méthode sur l'objet. En l'absence des (...), objet.methode renvoie la fonction.

Depuis ES2020, la notation obj?.prop1?.prop2 peut être utilisée pour accéder aux membres des objets sans avoir à vérifier si les objets conteneurs sont null ou undefined au préalable.

Il est possible d'ajouter directement une propriété à un objet, comme si on faisait une simple affectation :
obj.nouvellePropriete = valeur;

A noter qu'il est ainsi possible d'ajouter des propriétés à des objets natifs, mais cette pratique est à éviter.

Il est également possible de supprimer les propriétés d'un objet avec le mot-clé delete :
delete obj.proprieteASupprimer;

Depuis ES2015, Javascript offre la possibilité d'utiliser des getters et des setters (des accesseurs) qui seront automatiquement appelés lorsque l'on utilise la notation objet.accesser lors d'une évaluation (get) ou d'une affectation (set).

La classe Object propose quelques méthodes statiques intéressantes pour manipuler les objets. Notamment, defineProperty(obj, prop, desc) permet d'ajouter à l'objet obj la propriété prop avec un descripteur desc.

Suivant que la propriété est une donnée ou un accesseur, les propriétés suivantes sont possibles pour le descripteur :

• configurable : booléen indiquant si le type de propriété peut être changé et si la propriété pourra être supprimée de l'objet.
• enumerable : booléen indiquant si la propriété peut être listée dans une boucle for...in
• writable : booléen indiquant si la propriété peut-être modifiée (descripteur de donnée)
• value : la valeur par défaut, undefined si non renseigné (descripteur de donnée)
• get : fonction utilisée comme getter, undefined si pas d'accesseur (descripteur d'accesseur)
• set : fonction utilisée comme setter, undefined si non renseigné (descripteur d'accesseur)

La classe Object contient plusieurs méthodes statiques qui peuvent être utiles :

• Object.keys(obj) renvoie un tableau des propriétés de l'objet en paramètre
• Object.values(obj) renvoie un tableau des valeurs des propriétés de l'objet en paramètre
• Object.entries(obj) renvoie un tableau de couples [propriete, valeur] de l'objet en paramètre

La structure de boucle for...in permet de parcourir les attributs d'un objet.

Pour qu'une propriété apparaisse dans une itération for...in, elle doit être enumerable. Pour contrôler cette propriété sur un attribut, il faut passer par la méthode Object.defineProperty(...).

Les fonctions déclarées dans le code sont des objets Function qui possèdent notamment : un nom (name), une taille (length) représentant le nombre d'arguments. Ceci a deux conséquences :

• assigner une fonction à une variable assigne la référence de l'objet Function correspondant, créant un alias pour la fonction d'origine
• il est possible de leur assigner des propriétés ou des fonctions (cela ne semble pas très utile sur le moment, mais vous allez voir par la suite, c'est juste central).

Etant donné que ce sont des objets, les fonctions peuvent donc, dans leur code, faire référence à this, même si ces fonctions ne sont pas rattachées à un objet. Dans ce cas, elles référenceront l'objet global.

Attention, contrairement à une fonction déclarée avec le mot-clé function, les fonctions fléchées ne sont pas liées à l'objet this de l'objet qui les contient. Pour elles, this représente l'objet qui a défini cette fonction (closure).

Lors de leur appel, il sera possible de rattacher à ces fonctions l'objet à considérer comme this.

On utilise pour cela la méthde bind proposée par l'objet Function qui créé une fonction liée var boundF = f.bind(objet); qu'il ne restera plus qu'à invoquer ensuite : boundF(...).

De manière générale, bind permet aussi de fixer certains arguments de la fonction liée, pas uniquement this.

Une autre solution consiste à s'appuyer sur la méthode apply également présente dans les fonctions.

La syntaxe est la suivante : f.apply(objetThis, tableauArguments).

Une autre solution consiste à s'appuyer sur la méthode call également présente dans les fonctions.

La syntaxe est la suivante : f.call(objetThis, argument1, argument2, ...)

Javascript propose des constructeurs intégrés pour les objets natifs (Object, String, Number, Boolean, Array, RegExp, Function, Date).

Bien que Javascript propose des objets pour les types natifs, il n'est pas nécessaire :

• d'utiliser new Object() pour créer un objet, on utilisera plutôt le littéral {}
• d'utiliser new String(...) pour créer une chaîne, on utilisera plutôt le littéral "..."
• d'utiliser new Number(42) pour créer un nombre, on utilisera plutôt le nombre en littéral 42
• d'utiliser new Boolean(false) pour créer un booléen, on utilisera plutôt le littéral false
• d'utiliser new Array() pour créer un tableau, on utilisera plutôt le littéral []
• d'utiliser new RegExp(...) pour créer une expression régulière, on utilisera plutôt /.../..
• d'utiliser new Function(...) pour créer une fonction, on utilisera plutôt function(...){...}

La notation {...} permet de construire un seul objet. Pour construire un ensemble d'objets contenant les mêmes propriétés, Javascript propose un mécanisme spécifique nommé prototype.

Cette notion permet de créer des objets qui "héritent" automatiquement des propriétés et fonctions d'un objet de référence, appelé... prototype.

Pour créer un objet à partir d'un prototype, on utilise la méthode Object.create(proto).

Il s'agit du mécanisme d'héritage de Javascript. Chaque objet a un prototype, et les prototypes sont eux-mêmes des objets. Les objets héritent des propriétés et des méthodes de leur prototype.

Un prototype est donc un objet qui sert de ressource pour fournir un ensemble de propriétés et de méthodes à un objet.

Pour accéder à une propriété ou à une fonction de l'objet courant, Javascript applique le principe suivante :

• Si la propriété/fonction est dans l'objet, c'est elle qui est considérée.
• Sinon, on regarde si la propriété/fonction est présente dans le prototype de l'objet. Si c'est le cas, c'est elle qui est considérée.
• Si la propriété/fonction n'est pas dans le prototype, on recommence avec le prototype du prototype, et ainsi de suite.
• Si toute la chaîne de prototype a été explorée et que la propriété/fonction n'a pas été trouvée, alors la valeur est undefined.

Au sommet de la hiérarchie, tous les objets héritent d'un prototype Object.prototype.

Par exemple, les objets Date héritent de Date.prototype, qui lui-même hérite de Object.prototype.

Par définition, le prototype Object n'a pas de prototype (il est au sommet de la hiérarchie).

Il est également possible de créer des objets sans prototype (prototype-less), avec var objSansPrototype = Object.create(null).

Par défaut,

• tous les objets créés (avec la notation {...}) ont pour prototype Object.prototype.
• toutes les fonctions ont pour prototype Function.prototype.

Ces deux prototypes existent "nativement" en Javascript, ce sont eux qui proposent des méthodes communes à tous les objets/fonctions, comme par exemple toString() pour les objets, ou call, bind, apply pour les fonctions.

En orienté objet, le polymorphisme est la capacité pour une fonction de produire une résultat différent en fonction du contexte dans laquelle elle est invoquée.

Pour réaliser ceci, il suffit de déclarer dans l'objet, la fonction que l'on souhaite surcharger.

Pour éviter de dupliquer dans un objet, le code métier qui serait dans une fonction de son prototype, on peut directement appeler celle-ci.

Pour ce faire, on utiliser protoype.fonction.call(this,...) pour bien référencer la fonction du prototype, mais invoquée sur l'objet courant.

Pour savoir si une propriété est propre à un objet ou si elle a été héritée, il est possible d'utiliser la méthode hasOwnProperty(prop) héritée du prototype de Object.

Il y a une bonne et une mauvaise nouvelle :

• Javascript n'est pas un langage de classe, un langage dans lequel les classes sont définies proprement, et la hiérachie d'héritage est clairement établie.
• Il existe néanmoins une syntaxe proche de celle des langages de programmation objet qui permet de retrouver les mots-clés classiques.
• Toutefois, quand on connaît le mécanisme sous-jacent, on sait et on peut l'utiliser à bon escient pour construire des objets et une hiérarchie d'objet qui fonctionne.

Un premier principe est d'utiliser un prototype pour contenir les fonctions de nos objets, et de construire les objets à partir de ce prototype.

Toujours sur le même principe, on peut créer un second prototype, à partir du premier, pour les objets plus spécialisés. Le nouveau prototype contient les nouvelles functions et les fonctions surchargées.

On retrouve une structuration classique en classes, instances, et sous-classes. Mais niveau technique, c'est pas top : logique métier dupliquée, violation de l'encapsulation.

Pour pallier au problème d'accéder aux propriétés d'un objet et de devoir dupliquer ce type d'action, on va utiliser un constructeur pour initialiser les propriétés de nos objets.

L'approche basée sur les prototypes proposée ici fonctionne, dans le sens où elle va bien construire une chaîne de prototype correctement structurée.

Toutefois, on constatera que l'opération de créer un objet et de l'initialiser avec un constructeur est une action classique, qui est habituellement réalisée par le mot-clé new dans les langages de programmation.

Le modèle classique est une autre manière, plus conventionnelle, de construire des objets. Il s'agit de la représentation que vous rencontrerez le plus souvent.

Il y a deux manières de déclarer ses objets :

• Utiliser des fonctions : une fonction définit une classe (notation/approche historique)
• Utiliser des déclarations de classe (notation moderne - ES2015)

Lorsque l'on déclare une fonction en Javascript, un objet Function est créé en mémoire, celui-ci possède en réalité 3 propriétés : un nom, un taille et...un prototype.

La particularité est que cette propriété prototype de notre fonction pointe sur un objet (créé automatiquement en mémoire) présentant une propriété constructor qui renvoie sur... la fonction elle-même.

Cela ressemble à quelque chose que l'on connaît...

Oui, c'est le modèle de prototype vu précedemment.

Chaque function possède son propre prototype associé :

• La plupart du temps, quand on déclare des fonctions qui n'ont pas de but spécifique, celui-ci ne servira rien.
• Par contre, si on utilise ces fonctions comme constructeurs d'objet, le prototype de la méthode sera utilisé.

C'est l'appel de la fonction avec le mot-clé new qui aura cet effet.

• un nouvel objet est créé
• ses propriétés sont initialisées par le code de la fonction (via this.XXX = ...)
• le prototype de l'objet créé sera...le prototype contenu dans la propriété éponyme de la fonction utilisée

Pour réaliser un héritage avec un prototype, il y a 3 actions à réaliser :

• déclarer un constructeur sous la forme d'une fonction pour permettre de créer l'objet ; ceci va avoir pour effet corrolaire de créer un prototype pour cette fonction.
  function MaSousClasse(...) { ... }
• ce prototype n'étant pas désiré (on souhaiterait qu'il pointe vers la "classe-mère"), on va créer un objet pour le prototype de cette fonction.
  MaSousClasse.prototype = Object.create(MaFonction.prototype);
  L'ancien prototype sera ainsi détaché de la fonction et détruit par le garbage collector.
• spécifier que le constructeur de ce nouveau prototype est la fonction constructeur de la sous-classe

On peut aussi créer des méthodes statiques en les ajoutant directement à la fonction constructeur et non pas à son prototype.

Dans cette représentation, il est possible de déclarer des attributs comme privés en "trichant" sur leur déclaration : on déclare une variable locale à la fonction (sans this) et on laisse la notion de closure faire le reste, pour y accéder au sein des différentes méthodes.

ECMAScript 2015 a rajouté au standard des mots-clés bien connus : class, extends, super comme sucre syntaxique pour les constructions définies précédemment.

Les méthodes sont déclarées sans utiliser mot-clé function.

Les classes présentent une méthode constructor qui permet d'initialiser les attributs de l'objet ainsi créé.

Jusqu'à présent, les objets créés encapsulent des attributs ayant une visibilité publique : ils sont nécessairement accessibles depuis l'extérieur puisque déclarés avec this..

Il est pourtant possible de rendre des attributs et des méthodes privées au sein d'un objet, en les déclarant et en les nommant avec le préfixe # (nouveauté ES2022).

Bien connu des adeptes de la programmation objet, cet opérateur permet de tester le type d'un objet.

Cet opérateur renvoie true à l'expression o instanceof C si C appartient à la chaîne de prototypes du constructeur de o.

JSON signifie JavaScript Object Notation. Il s'agit d'un format textuel pour stocker (enregistrer des objets structurés) et échanger des données (en les sérialisant via des chaînes de caractères).

La syntaxe de JSON s'inspire de la syntaxe des objets Javascript :

• les données sont présentées sous la forme clé : valeur où la clé est obligatoirement délimitée par des guillemets doubles (ex. "prenom" : "fred") ;
• les données sont séparées par des virgules ,
• les objets sont délimités par des accolades {...}
• les tableaux sont délimités par des crochets [...]

A noter que les chaînes sont obligatoirement délimitées par des guillemets doubles. Les guillemets simples ne peuvent pas être utilisés comme délimiteurs.

Tous les types de données ne sont pas autorisés pour être enregistrés au format JSON. En effet, celui-ci autorise :

• les nombres avec ou sans partie décimale,
• les booléens
• les chaînes (obligatoirement délimitées par des guillemets doubles)
• les tableaux
• le objets (sous la forme d'un objet JSON)
• la valeur null

De ce fait, les dates, les fonctions et undefined ne sont pas autorisés.

Bien que nommé à partir de Javascript, cette notation est un format purement textuel que l'on retrouve dans différents langages : PHP, Python, Ruby, Java, etc. Il s'agit d'une bonne alternative à XML pour échanger des données structurées.

En tant que telle la notation JSON n'a pas vraiment d'avantages par rapport à la notation objet classique de Javascript. L'obligation d'entourer les noms de propriétés de guillemets aurait même tendance à rendre JSON moins facile d'usage.

L'utilisation principale d'un objet JSON est d'offrir un mécanisme de stockage et d'échange plus simple et flexible qu'XML.

Dans tous les langages, il existe des primitives permettant de sérialiser un objet (d'en faire une chaine de caractères) et de le désérialiser (le créer à partir d'une chaîne). En Javascript, ces méthodes sont les suivantes :

• JSON.stringify(obj) renvoie la chaîne de caractères sérialisant l'objet obj.
• JSON.parse(chaine) renvoie l'objet extrait de la chaîne de caractères décrivant l'objet.

L'objet décrit au format JSON dans la zone de texte sera converti en "vrai" objet Javascript.

Javascript gère automatiquement la mémoire. Il possède ainsi un garbage collector (tout comme Java) qui permet régulièrement de nettoyer les objets qui ne sont plus rattachés à aucune donnée.

En conséquence, ce n'est pas à vous de gérer la suppression des objets. Attention toutefois à ne pas surcharger la mémoire de petits objets, ou de petites variables, pour économiser les ressources.

Javascript possède un mot-clé debugger représentant une instruction qui, lorsqu'elle est exécutée dans un environnement à peine évolué (a minima un navigateur web avec des outils développeurs -- la plupart en proposent), permet de stopper l'exécution du code et d'ouvrir le debugger pour offrir les possibilités classiques de ce genre d'outil : inspection de la mémoire, exécution pas-à-pas, etc.

Pour instancier plusieurs variables en même temps, il est possible de les assimiler à une donnée structurée qui sera "déstructurée" pour faire correspondre aux valeurs.

Le mode strict en Javascript a été introduit pour signaler comme erreur des constructions du langages qui sont souvent inappropriées (utilisation de variables non déclarées, etc.)

Pour utiliser ce mode, on déclare "use strict"; en début de script, ou en début de fonction pour une portée locale (mais toujours au début sinon il est ignoré).

JSLint, ESLint ou JSHint sont des "linter", c'est-à-dire des logiciels capables de réaliser (un peu) l'analyse statique du code Javascript en vue d'y détecter des erreurs, des mauvaises constructions, etc.

Ils sont utilisables en ligne, soit comme extension de vos éditeurs de code préférés (pour peu que vous utilisiez autre chose que gedit ou textedit...).

Bien qu'utiles, ils ne remplacent pas une bonne phase de test, mais ils permettent au moins de détecter pas mal de petites erreurs. Ils sont généralement paramétrables pour fixer la granularité des erreurs détectées.

Certains d'entre eux peuvent s'utiliser en ligne :
JSLint : http://www.jslint.com/ ou JSHint : http://jshint.com/

Typescript est tout simplement une version typée de Javascript, dans laquelle chaque variable, paramètre, fonction, etc. déclare un type parmi les types primitifs (number, etc.) ou dérivés (Array<number>, etc.).

Un compilateur est en charge de réaliser l'analyse statique des types et ainsi de s'assurer de l'utilisation correcte des données. Si aucune erreur n'est levée, un fichier JS "pur" est ainsi créé et est prêt à être exécuté (côté client ou serveur).

Certains éditeurs de code (comme VSCode) sont capables d'analyser les sources et de lever ainsi certaines erreurs avant même la compilation.

• The Principles of Objet-Oriented Javascript - N. Zakas
• Javascript for Web Developers - Nicholas Zakas
• Eloquent Javascript - Marijn Haverbeke
• Secrets of the Javascript Ninja - John Resig et Bear Bibeault

• Référence complète : https://developer.mozilla.org/fr/docs/Web/JavaScript
• Tutoriels et référence : http://w3schools.com
• Exploring JS : http://exploringjs.com/
• Javascript is sexy: http://javascriptissexy.com/
• Et tellement d'autres...

• Comment fonctionnent les interpréteurs Javascript ?
  https://www.youtube.com/watch?v=p-iiEDtpy6I
• Functional programming with Javascript :
  https://www.youtube.com/watch?v=e-5obm1G_FY
• Toutes les vidéos de Douglas Crockford, notamment celles-ci :
  https://www.youtube.com/watch?v=v2ifWcnQs6M, https://www.youtube.com/watch?v=DwYPG6vreJg et https://www.youtube.com/watch?v=NPB34lDZj3E