EPAI, Jérôme Frossard (2019) JAVASCRIPT Développer une interface utilisateur graphique 1 Introduction EPAI, Jérôme Frossard (2019) Historique 2 ¨ 1995 (mai) : Brendan Eich crée un langage de script pour le compte de Netscape Communications Corporation ¨ 1995 (décembre) : SUN et Netscape annoncent la distribution libre de droits de la spécification du langage JavaScript ¨ 1996 (mars) : Netscape intègre JavaScript dans son navigateur Netscape Navigator 2.0 ¨ 1996 (août) : Microsoft sort Internet Explorer 3.0 avec une implémentation du langage nommé JScript ¨ 1996 (novembre) : la spécification du langage est soumise à l’ECMA et les travaux de standardisation débute ¨ 1997 (juin) : le standard ECMA-262, ECMAScript Langage Specification est adopté EPAI, Jérôme Frossard (2019) Java… Script ? 3 ¨ JavaScript (ECMAScript) est : ¤ Un langage de programmation conçu en 1995 pour la réalisation de scripts dans les navigateur web. ¤ Le seul langage supporté par tous les navigateurs. ¤ La seule option pour le « code à la demande » depuis la disparition de Flash, des applets Java et autre Silverlight. ¤ Sans lien avec Java et la JVM.
La ressemblance de leurs syntaxes a été voulue pour des raisons marketing. ¤ un langage de programmation à usage général grâce la plateforme Node. EPAI, Jérôme Frossard (2019) Navigateur web et document HTML 4 ¨ Fonctionnalités de base du navigateur : ¤ Permettre à l’utilisateur de saisir une URL. ¤ Présente de la meilleures façon possible les représentations de ressource web (document HTML, image, video, son, …).
¨ Fonctionnalités de base d’un document HTML : ¤ Permettre à l’utilisateur de suivre un lien hypertexte. ¤ Permettre à l’utilisateur d’interagir avec les contrôles d’un formulaire HTML (zones de texte, listes déroulantes, etc. ¤ Permettre à l’utilisateur de soumettre le contenu des champs d’un formulaire au serveur (bouton submit). EPAI, Jérôme Frossard (2019) Document HTML et JavaScript 5 ¨ JavaScript permet d’ajouter des fonctionnalités à un document HTML.
¨ La structure d’objets du document (DOM) accessible à travers la variable globale window. ¨ Exemple d’utilisations possibles : ¤ Validation côté client du contenu d’un formulaire. ¤ Construction dynamique de partie du document. ¤ Modification dynamique du document en réponse à un événement.
¤ Envoi de requêtes HTTP (Ajax). EPAI, Jérôme Frossard (2019) Balise <script> 6 ¨ La balise script permet d’inclure du code JavaScript dans un document HTML. ¤ Inclusion directe (à éviter autant que possible) : <script> window.alert("hello world!"); </script> ¤ Inclusion du contenu d’un fichier (bonne pratique) : <script src=".js"></script> EPAI, Jérôme Frossard (2019) Traitement des balises <script> 7 ¨ Les balises <script> sont traitées dans l’ordre d’apparition dans le code HTML, comme les autres balises. ¨ Le contenu de la balise est exécuté au moment où elle est traitée (le reste du document n’est pas encore chargé).
¨ Les scripts et l’affichage sont exécutés dans le même thread, l’affichage est figé durant l’exécution d’un script. ¨ Conséquences : ¤ Au moment de l’exécution d’une balise script, seuls les éléments HTML qui se trouvent avant la balise sont accessibles. ¤ L’ordre d’inclusion des fichiers est important. ¤ Il est préférable d’inclure les scripts à la fin du document.
EPAI, Jérôme Frossard (2019) 8 Le langage JavaScript EPAI, Jérôme Frossard (2019) Caractéristiques 9 ¨ Syntaxe proche de celle de Java. ¨ Multiparadigme : ¤ Impératif, procédural et structuré (séquence, affectation, sous- programmes et structures de contrôles) ¤ orienté-objet (objets, polymorphisme, héritage) ¤ fonctionnel (les fonctions sont des objets de première classe) ¨ Typage dynamique et faible : ¤ Pas de déclaration de type, late-binding ¤ Conversions de type implicites ¨ Utilisation de prototypes pour la création d’objets (pas de classes) EPAI, Jérôme Frossard (2019) Programme JavaScript 10 ¨ Séquence d’instructions qui partagent une instance de l’objet Global (dans un navigateur : window) ¨ Un seul programme par document HTML (par fenêtre)… ¨ … et non pas un programme par balise <script>. ¨ Instructions : ¤ déclarations (variables et fonctions) ¤ affectations et appels de procédure ¤ contrôles de flux (choix, boucles) EPAI, Jérôme Frossard (2019) Typage dynamique 11 ¨ Le typage dynamique s’oppose au type statique. ¨ Langages statiquement typé (Java, C#) : ¤ On spécifie le type d’un identificateur lors de sa déclaration.
¤ Le type d’un identificateur ne peut pas changer. ¨ JavaScript est un langage dynamiquement typé : ¤ On ne spécifie pas le type d’un identificateur lors de la déclaration. ¤ Une variable adopte le type de la valeur qui lui est affectatée. ¤ Une fonction adopte le type de la valeur de retour.
¤ Par défaut, la valeur d’une variable est undefined de type Undefined. EPAI, Jérôme Frossard (2019) Types de données 12 ¨ Types primitifs ¤ Number : n’importe quel nombre (IEEE 754-2008). ¤ Boolean : valeur booléenne (true ou false). ¤ String : chaîne de caractères Unicode.
¤ Undefined : non initialisée (une seule valeur : undefined). ¤ Null : pas de valeur (une seule valeur : null). ¤ Object : collection de propriété ¨ Objets intrinsèques (well-knonw intrinsic objets): ¤ Array, Math, Date, RegExpr, Error ¤ Function, JSON EPAI, Jérôme Frossard (2019) Type Number 13 ¨ Un seul type : IEEE 754 (double précision) pour représenter : ¤ Des nombres entiers exacts jusqu’à 15 chiffres, ¤ Des nombres à virgule flottantes, ¤ Des valeurs spéciales : n Number.NaN : not a number, différent de tous les nombre y compris lui-même ⇒ utiliser la fonction window.POSITIVE_INFINITY : + ∞ n Number.NEGATIVE_INFINITY : – ∞ EPAI, Jérôme Frossard (2019) Type boolean 14 ¨ Représente une valeur booléenne : vrai ou faux. ¨ Valeurs équivalentes à faux (falsy values) : ¤ La constante false.
¤ Les valeurs undefined, null, 0, NaN. ¤ Une chaîne de caractère vide. ¨ Valeurs équivalentes à vrai (truthy values) : ¤ La constante true. ¤ Un nombre différent de 0.
¤ Une chaîne de caractère non vide. ¤ N’importe quelle référence à un objet. EPAI, Jérôme Frossard (2019) Littéral 15 DÉF. : Un littéral, ou valeur littérale, est une valeur écrite explicitement dans le code source d’un programme.
¨ En JavaScript, on dispose de notation littérale pour les types de valeurs suivantes : ¤ les nombres (2, -3, 2.3, 2e-10, …) ¤ les booléens (true, false) ¤ les chaînes de caractères ("une chaîne", ’une chaîne’) ¤ les tableau ([1, 2, 4, 8, 16, 32]) ¤ les objets ({firstname: "john", lastname: "Backus"}) EPAI, Jérôme Frossard (2019) Expression (définition) 16 DÉF. : Une expression est une combinaison de littéraux, de variables et d’appels de fonction évaluée selon les règles de priorité et d’associativité du langage pour produire une nouvelle valeur. ¨ Exemple : function isRightTiangle(a, b, c) { return c === Math.5 } 9 16 25 5 true const val = isRightTriangle(3, 4, 5); EPAI, Jérôme Frossard (2019) Opérateurs 17 … arithmétiques +, -, *, /, %, ++, -- … de chaîne + … de comparaison ===, !==, <, <=, >=, >, ==, != … booléens &&, ||, ! … logiques &, |, ^, ~, <<, >>, >>> … d’affectation =, +=, -=, *=, /=, &=, |=, ^=, <<=, >>=, >>>= … de condition ?: … d’invocation () appelle d’une fonction ou d’une méthode … d’indexation [] accès à une valeur indexée (tableaux, objets) … divers. , (), typeof, new, instanceof, delete, void, , EPAI, Jérôme Frossard (2019) 18 Instructions de déclaration EPAI, Jérôme Frossard (2019) Identificateur 19 ¨ Un identificateur est le nom d’une variable, d’une fonction, ou d’une propriété.
¨ Les minuscules et les majuscules ne sont pas équivalentes (sensible à la casse ou case sensitive). ¨ Doit respecter les contraintes suivantes : ¤ Ne contient pas d’espace. ¤ Commence par une lettre, _ ou $. ¤ N’est pas un mot réservé : break, do, instanceof, typeof, case, else, new, var, catch, finally, return, void, continue, for, switch, while, debugger, function, this, with, default, if, throw, delete, in, try, class, enum,extends, super, const, export, import, implements, let, private, public, yield, interface, package, protected, static EPAI, Jérôme Frossard (2019) Portée (scope) d’un identificateur 20 DÉF.
: La portée lexicale d’un identificateur est la portion de code dans laquelle cet identificateur est accessible. ¨ En JavaScript les différentes portées sont : ¤ La portée globale : tout le programme. ¤ La portée locale : le corps de la fonction où se trouve la déclaration, y compris les fonctions imbriquées. ¨ En JavaScript : ¤ Si un identificateur n’a pas été déclaré avant d’être utilisé, il a une portée globale.
¤ Un identificateur global est une propriété de l’objet Global. EPAI, Jérôme Frossard (2019) Déclaration de variable 21 ¨ Avec le mode strict activé (recommandé), la déclaration des variables est obligatoire. ¨ On déclare une variable à l’aide des mot clé let ou const suivi d’un identificateurs : // déclare une variable nommée uneChaine dont la valeur // ne peut pas être modifiée par une affectation. const uneChaine = "Hello World"; // déclare deux variables nommées element et altitude dont // la valeur peut être modifiée par une affectation.
let element, altitude; ¨ Le mot clé var ne devrait plus être utilisé et on utilise autant que possible le mot clé const. EPAI, Jérôme Frossard (2019) Notion de sous-programmes 22 ¨ En programmation, on distingue deux types de sous-programmes : les procédures et les fonctions ¨ Une procédure est un sous-programme qui : ¤ Ne doit jamais renvoyer une valeur. ¤ Doit avoir un effet (modification d’une variable globale ou d’une propriété d’un objet, requête Ajax avec la méthode POST, modification du document HTML, etc.) ¨ Une fonction est un sous-programme qui : ¤ Doit toujours renvoyer une valeur. ¤ Renvoie toujours la même valeur pour des paramètres donnés (transparence référentielle).
¤ Ne devrait pas avoir d’effet. EPAI, Jérôme Frossard (2019) Notion de sous-programme (suite) 23 ¨ En JavaScript (comme avec beaucoup d’autres langages), on utilise le même mot clé (function) pour les deux types de sous-programmes. ¨ Le langage ne fait pas de différence entre procédure et fonction, il n’y aura pas d’erreur si les règles ne sont pas respectées. EPAI, Jérôme Frossard (2019) Sous-programme (syntaxe simplifiée) 24 function <identificateur>(<paramètres formels>) { <instructions>; return <expression>; } ¨ Exemple : function computePosition(speed, time, initialPosition) { initialPosition = initialPosition || 0; //set default return initialPosition + speed * time; } ¨ Paramètres formels : ¤ Similaires à des variables locales.
¤ Liés aux paramètres effectif par position. EPAI, Jérôme Frossard (2019) Sous-programme (syntaxe générale) 25 ¨ A la syntaxe simplifiée, on préfère la syntaxe générale utilisable dans tous les cas et qui consiste à affecter une fonction anonyme (lambda expression) à une variable : const <identificateur> = function (<paramètres formels>) { <instructions>; return <expression>; } ¨ Exemple : const computePosition = function (speed, time, initialPosition) { initialPosition = initialPosition || 0; //set default return initialPosition + speed * time; } EPAI, Jérôme Frossard (2019) Fonction imbriquée 26 ¨ Déclaration d’une fonction à l’intérieur d’une fonction (impossible avec la syntaxe simplifiée) ¨ Une fonction imbriquée se trouve dans la portée locale de la fonctions englobantes ¨ Utile pour les IIFE (Immediately-invoked function expression) pour éviter de polluer la portée globale (global scope). ¨ Utile pour réaliser des fermetures (closure). EPAI, Jérôme Frossard (2019) Appel de fonction 27 <identificateur>(<paramètres effectifs>) ¨ Exemple : var result, ; result = computePosition(20, 60 * 60); ¨ Opérateur d’invocation ¤ parenthèses immédiatement à la suite d’un identificateur ¨ Paramètres effectifs ¤ valeurs initiales des paramètres formels ¤ chaque valeur est lié au paramètre formel correspondant à sa sa position (speed reçoit 20, time reçoit 60 * 60 et initialPosition ne reçoit rien) EPAI, Jérôme Frossard (2019) 28 Expression avec effet de bord EPAI, Jérôme Frossard (2019) Instruction et expression 29 ¨ Dans un langage impératif, une instruction n’est utile que si elle modifie l’état du programme, on dit qu’elle a un effet.
¨ En JavaScript, toute expression est une instruction, mais seuls trois types d’expression ont un effet de bord : ¤ L’affectation. ¤ L’appel d’une procédure.