JavaScript Cours PDF

JavaScript est un langage compilé par le navigateur. Native Javascript & DOM Il est exécuté coté client lorsque la page Web est chargée (depuis le serveur Web) M...

JavaScript est un langage compilé par le navigateur. Native Javascript & DOM Il est exécuté coté client lorsque la page Web est chargée (depuis le serveur Web) Mohammed Reda CHBIHI Il ne faut pas confondre avec le langage JAVA [email protected] 2 Année Universitaire : 2024-2025 Histoire Javascript est basé sur la norme internationale ECMAScript Le langage a été créé en 1995 par Brendan Eich pour le compte de la Netscape Communications Corporation, Ensemble de normes concernant les langages de programmation de type script Il a été inspiré de nombreux langages, notamment de Java, mais en simplifiant la syntaxe pour les débutants Langage de programmation orienté prototype 3 4 Ce langage a certaines limites : Javascript est un langage Objet Il est difficilement compatible entre les différents navigateurs, Il n’est pas supporté par certains navigateurs (ou peut être désactivé), Il n’est pas sécurisé : il faut toujours revérifier les informations Toute chose du monde réel possédant : envoyées depuis le client, Des propriétés (ou attributs), Des fonctions (ou méthodes) 5 6 Primitif Exemple : Un script JAVASCRIPT est inséré au sein d’une page HTML Objet à travers l’utilisation de la balise Propriétés : Marque Couleur Modèle Script Interne : // code du script Fonctions : Démarrer( ) Avancer( ) Reculer( ) Script externe : 7 8  Déclaration de variables Syntaxe Syntaxe Les variables en Javascript sont non typées Deux instructions sont utilisées pour déclarer des variables Il n’est pas nécessaire de spécifier un type pour une variable var let Après sa déclaration, une variable peut prendre plusieurs valeurs différentes (numériques, chaine de caractères, …) 9 10 Déclaration de variables Déclaration de variables Syntaxe Syntaxe var let Les déclarations de variables sont traitées avant que le code Instruction permettant de déclarer des variables dont la portée soit exécuté, quel que soit leur emplacement dans le code est limitée à celle du bloc dans lequel elles sont déclarées La portée d'une variable déclarée avec var Elle permet de définir des variables au sein d'un bloc est le contexte d'exécution courant et des blocs qu'il contient # La fonction qui contient la déclaration La différence avec l’instruction var est que cette dernière Le contexte global si la variable est déclarée permet de définir une variable dont la portée en dehors de toute fonction 11 est celle de la fonction englobante 12  Déclaration de variables Déclaration de variables Syntaxe Syntaxe let # var let # var let x = 1; var x = 1; let x = 1; var x = 1; if (x === 1){ if (x === 1){ function test(){ function test(){ let x = 2; var x = 2; let x = 2; var x = 2; console.log(x); console.log(x); console.log(x); console.log(x); } } } } console.log(x); console.log(x); test(); test(); console.log(x); console.log(x); > 2 > 2 > 2 > 2 > 1 > 2 13 > 1 > 1 14 Déclaration de variables Déclaration de constantes Syntaxe Syntaxe let # var La déclaration de constantes se fait en utilisant le mot clé console.log(x); console.log(x); const let x = 1; var x = 1; console.log(x); console.log(x); const pi = 22/7; console.log(pi); > Uncaught ReferenceError: x > undefinded is not defined > 1 15 16  Les tableaux Syntaxe Syntaxe Javascript propose plusieurs types d’opérateurs Opérateurs Opérateurs Opérateurs Opérateurs Opérateurs de Création d’un tableau arithmétiques logiques binaires d’assignement comparaison + && & = &= == > var tableau = [1, 2, "texte", [‘a’, ‘b’]]; - || | += |= === >= var tableau = new Array(1, 2, "texte", new Array(‘a’, ‘b’)); * ! ^ -= ^= != < / ~ *= %= >>>= ?? var z = tableau; // b var tab = tableau; // [‘a’, ‘b’] -- instanceof >>> 17 18 Les tableaux Les tableaux Syntaxe Syntaxe Ajout d’un élément en fin Suppression du premier élément tableau.push("autre texte"); tableau.pop(); Méthodes retournant la Méthodes retournant nouvelle taille du tableau l’élément supprimé Ajout d’un élément au début Suppression du dernier élément tableau.unshift("autre texte"); tableau.shift(); 19 20  Les tableaux Les tableaux Syntaxe Syntaxe Ajout / Suppression d’éléments Concaténer deux ou plusieurs tableaux var tableau = tab_0.concat(tab_1, tab_2, …, tab_N); tableau.splice(position, nombre, elt_1, elt_2, …, elt_N); Tri des éléments (strings) Inverser les éléments Position du tableau à partir de laquelle la méthode fait son traitement tableau.sort(); tableau.reverse(); Nombre d’éléments à supprimer à partir Nombre des éléments de la position spécifiée Éléments à insérer à partir de la tableau.lenght position spécifiée 21 22 Les Tableaux Syntaxe Les tableaux Méthode Description Syntaxe includes() teste si une valeur existe dans le tableau (retourne true ou Méthode Description false) every() teste si toutes les valeurs d’un tableau vérifient une condition indexOf() retourne l’indice de la première valeur correspondante à la passée sous forme d’une fonction (retourne true ou false) valeur passée en paramètre filter() crée un nouveau tableau à partir des éléments d’un autre map() construit un nouveau tableau à partir d’un autre en appliquant tableau en filtrant les éléments de ce dernier et qui vérifient une fonction passée en paramètre sur chaque élément du une condition passée sous forme d’une fonction tableau initial find() retourne la première valeur qui vérifie une condition passée join() construit une chaine de caractères en concaténant les élément sous forme d’une fonction. Si aucune valeur ne vérifie la du tableau à l’aide d’une autre chaine de caractères condition alors cela retourne undifined (séparateur) passée en paramètre. Si aucun séparateur n’est findIndex() retourne l’indice de la première valeur qui vérifie une condition spécifié, alors la méthode utilisera le caractère « , » passée sous forme d’une fonction. Si aucune valeur ne vérifie la some() teste si au moins une valeurs dans un tableau vérifient une condition alors cela retourne -1 condition passée sous forme d’une fonction (retourne true ou findLastIndex() retourne l’indice de la dernière valeur qui vérifie une condition false) passée sous forme d’une fonction. Si aucune valeur ne vérifie la forEach() applique les traitements d’une fonction passée en paramètre 23 condition alors cela retourne -1 sur chaque élément du tableau  Les chaines de caractères Les chaines de caractères Syntaxe Syntaxe L’utilisation des chaines de caractères entourées par ` … ` permet de faire évaluer des variables en les enveloppant // Déclaration dans des Littéraux de gabarits var ch1 = "C'est une chaine de caractères"; var ch2 = 'C\'est une chaine de caractères'; ${ variable } var ch3 = `C'est une chaine de caractères`; let nom = "mohammed"; let chaine = `Bonjour ${nom}`; " … " ' … ' ` … ` 25 console.log(chaine); 26 28 Les chaines de caractères Les chaines de caractères Syntaxe Syntaxe En JavaScript, une chaine de caractère est aussi considérée Méthode Description charAt() Récupère un caractère à une position donnée comme une instance de la classe String charCodeAt() Récupère le code Unicode (UTF-8) d’un caractère à une position donnée concat() Combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée let nom = "mohammed"; endsWith() Renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument ⇔ startsWith() Renvoie un booléen indiquant si la chaine de caractères commence par la chaine de caractères fournie en argument includes() Détermine si une chaîne de caractères est contenue dans une autre et renvoie true ou false selon le cas de figure let nom = new String("mohammed"); indexOf() Renvoie l'indice de la première occurrence de la valeur cherchée au sein de la chaîne courante (à partir de l’indice passé en paramètre). Elle 27 renvoie -1 si la valeur cherchée n'est pas trouvée lastIndexOf() Renvoie l'indice, dans la chaîne courante, de la dernière occurrence de replaceAll() Retourne une nouvelle chaîne de caractères dans laquelle toutes les la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la occurrences d'un motif donné ont été remplacées par une chaîne de méthode renvoie -1. La recherche s'effectue de la fin vers le début de la remplacement chaîne, à partir de l’indice passé en paramètre. slice() Extrait une section d'une chaine de caractères et la retourne comme une match() Permet d'obtenir le tableau des correspondances entre la chaîne nouvelle chaine de caractères. La chaîne de caractères courante n'est pas courante et une expression rationnelle. modifiée. matchAll() Renvoie un itérateur contenant l'ensemble des correspondances entre split() Divise une chaîne de caractères en une liste ordonnée de sous-chaînes, une chaîne de caractères d'une part et une expression rationnelle place ces sous-chaînes dans un tableau et retourne le tableau. La division est d'autre part effectuée en recherchant un motif ; où le motif est fourni comme premier padEnd() Permet de compléter la chaîne courante avec une chaîne de caractères paramètre dans l'appel de la méthode donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre substring() Retourne une sous-chaîne de la chaîne courante, entre un indice de début et cette longueur, la chaîne complémentaire peut être répétée. La chaîne un indice de fin courante est complétée depuis la fin. toLowerCase() Retourne la chaîne de caractères courante en minuscules padStart() permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre toUpperCase() Retourne la valeur de la chaîne courante, convertie en majuscules cette longueur, la chaîne complémentaire peut être répétée. La chaîne trim() Permet de retirer les blancs en début et fin de chaîne. Les blancs considérés courante est complétée depuis le début. sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) replace() Renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie ainsi que les caractères de fin de ligne (LF, CR, etc.). des correspondances à un modèle sont remplacées par trimEnd() Permet de retirer les blancs situés à la fin d'une chaîne de caractères un remplacement. Le modèle utilisé peut être une expression trimStart() Permet de retirer les blancs au début de la chaîne de caractères 30 régulière et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si modèle est une chaîne de String. 29 Renvoie une chaîne de caractères créée à partir de points de code Unicode caractères, seule la première correspondance sera remplacée. fromCharCode() Les chaines de caractères Exemples Syntaxe // le caractère à la position 2 let ch1 = "ABCDE"; Les structures conditionnelles sont des instructions qui let c1 = ch.charAt(2); permettent de tester si une condition est vraie ou non ! let c2 = ch; // mettre la chaine en majuscule if (expression 1) { let ch = "salam".toUpperCase(); // instructions à exécuter si expression 1 est réalisée } // remplacer la sous chaine "ca" par "CA" else if (expression 2){ let ch = 'casablanca'.replaceAll('ca', "CA"); // instructions à exécuter si expression 2 est réalisée // extraction d'une sous-chaine } let ch = "salam casablanca".slice(4, 7); else { 31 32 let ch = String.fromCharCode(77, 65, 82, 79, 67); }  Syntaxe Syntaxe Les structures conditionnelles sont des instructions qui Les boucles sont des instructions qui permettent d’exécuter un permettent de tester si une condition est vraie ou non ! ensemble d’instruction plusieurs fois avec une condition d’arrêt ! switch (variable) { case val1 : for (compteur; condition; modification du compteur) { // instructions à exécuter si variable = val1 // instructions à exécuter case val2 : } case val3 : // instructions à exécuter si variable = val2 ou val3 default : 33 34 } Syntaxe Syntaxe Les boucles sont des instructions qui permettent d’exécuter un Les boucles sont des instructions qui permettent d’exécuter un ensemble d’instruction plusieurs fois avec une condition d’arrêt ! ensemble d’instruction plusieurs fois avec une condition d’arrêt ! while (condition) { do { // instructions à exécuter // instructions à exécuter } } while (condition); 35 36  Syntaxe Syntaxe Les boucles sont des instructions qui permettent d’exécuter un ensemble d’instruction plusieurs fois avec une condition d’arrêt ! Les fonctions permettent d’exécuter un traitement qui peut se répété plusieurs fois do { // instructions à exécuter break; function nomFonction(param1, param2, …, paramN){ } while (condition); // instructions à exécuter } 37 Instruction permettant de sortir de la boucle 38 avant qu’elle ne finisse toutes ces itérations Notation orientée objet Notation orientée objet Syntaxe Syntaxe Une classe peut hériter d’une autre en utilisant le mot clé JavaScript permet aussi de créer et utiliser des classes extends class NomClasse{ class NomClasse extends ClasseMère { // composantes de la classe // composantes de la classe } } 39 40  Notation orientée objet Notation orientée objet Syntaxe Syntaxe Le constructeur de la classe est une fonction appelée Il est possible d’appeler le constructeur de la classe mère constructor avec la méthode super() class NomClasse{ class NomClasse extends ClasseMère { constructor(){ // initialisation des attributs constructor(){ } super(); } } 41 42 } Notation orientée objet Notation orientée objet Syntaxe Syntaxe La pseudo variable this permet d’accéder aux membres Il est possible d’expliciter la déclaration des attributs de l’objet courant publiques de la classe class Personne{ class Personne{ L’utilisation du this dans nom; constructor(n, p){ le constructeur permet aussi prenom; this.nom = n; de déclarer implicitement this.prenom = p; des attributs publiques constructor(n, p){ } pour la classe this.nom = n; } this.prenom = p; let p = new Personne("ABBASSI", "Abbass"); } console.log(p.nom); 43 } 44  Notation orientée objet Notation orientée objet Syntaxe Syntaxe Les méthodes de la classe sont de simples fonction Il est possible d’expliciter la déclaration des attributs qu’on déclare à l’intérieur de la classe sans utiliser le mot clé privés de la classe function class Personne{ class Personne{ #nom; constructor(n, p){ #prenom; this.nom = n; this.prenom = p; constructor(n, p){ } this.nom = n; nomComplet(){ this.prenom = p; return this.nom + " " + this.prenom; } } } 45 } 46 Notation orientée objet Notation orientée objet Syntaxe Syntaxe class Personne{ #_nom; #_prenom; L’appel des Getters et Setters se fait à l’aide comme un simple constructor(n, p){ this._nom = n; La définition des Getters et accès à un attribut this._prenom = p; Setters d’une classe } se fait en utilisant les mots-clés get nom(){ get et set let p = new Personne("ABBASSI", "Abbass"); return this._nom; } console.log(p.nom); // affiche le nom p.nom = "KAMALI"; // change le nom set nom(n){ this._nom = n; } 47 48 }  Notation orientée objet Notation orientée objet Syntaxe Syntaxe class Personne{ #nom; #prenom; La déclaration des Pour un objet donné, l’accès à un attribut ou une méthode constructor(n, p){ attributs et méthodes en javascript se fait en utilisant un point «. » this.nom = n; de classes se fait à l’aide this.prenom = p; } du mot clé static objet.attribut = valeur; static salam(){ variable = object.méthode(); console.log("Salam"); } } 49 50 BOM : Browser Object Model BOM : Browser Object Model Le BOM permet au javascript de communiquer avec le navigateur Principaux composants de l’objet window Aucun standard n’est existant pour le moment, mais il est supporté par la majorité des navigateurs existants Objets Autre propriétés Méthodes document scrollX alert() L’objet window est considéré comme étant l’objet de base en location scrollY confirm() Javascript implémentant le BOM history innerWidth prompt() navigator innerHeight close() Tous les objets, variables et fonctions globales de javascript screen print() sont des membres de l’objet window 51 stop() 52  HTML DOM HTML DOM Document Object Model Technologies du WEB Lors du chargement d’une page HTML, le navigateur crée un DOM, Un DOM est structuré sous forme d’un arbre d’objets, Grâce au modèle Objet, Javascript à le pouvoir de tout faire sur une Cours Javascript Hello world !! page HTML : o Ajouter / Supprimer un élément ou un attribut, o Modifier un élément, un attribut ou un style CSS, o Créer et gérer un évènement, 53 54 HTML DOM HTML DOM Document Élément racine firstChild Élément racine HTML HTML Élément Élément Élément lastChild HEAD BODY HEAD parentNode nextSibling Élément Élément Attribut Élément Élément previousSibling BODY TITLE id = ‘p_id’ P H1 Élément Élément Texte Texte Texte P H1 ‘Technologies du WEB’ 55 ‘Hello …’ ‘Cours …’ 56 HTML DOM Un arbre DOM est composé de plusieurs nœuds types Racine Attribut Commentaire Élément Texte 57 58 HTML DOM HTML DOM L’objet document permet d’accéder aux différents éléments L’objet document permet d’accéder aux différents éléments du DOM afin d’effectuer les opérations escomptées du DOM afin d’effectuer les opérations escomptées L’objet document possède plusieurs méthodes pour : L’objet document possède plusieurs méthodes pour : 1. Accéder à des éléments HTML, 1. Accéder à des éléments HTML, 2. Modifier le contenu et les propriétés d’éléments HTML, 2. Modifier le contenu et les propriétés d’éléments HTML, 3. Ajouter et supprimer des éléments HTML, 3. Ajouter et supprimer des éléments HTML, 4. Ajouter des gestionnaires d’événements, 4. Ajouter des gestionnaires d’événements, 5. Changer le style CSS d’un élément 5. Changer le style CSS d’un élément 6. … 59 6. … 60 HTML DOM HTML DOM Les principaux composants Document Document Objet construit automatiquement par le navigateur lors Element du chargement d’une page Attribute Il correspond à l’élément racine de l’arbre DOM à travers lequel il est possible d’accéder au reste des éléments du document Event Il fournit un ensemble de propriétés et méthodes permettant Style 61 de manipuler tous les nœuds de l’arbre DOM 62 HTML DOM HTML DOM Element Attribute Objet représentant un attribut d’un élément du document HTML Objet représentant un élément du document HTML Un attribut ne peut exister sans être affecté à un élément HTML Un élément peut avoir des nœuds fils (autre élément, commentaire, texte, …) Dans la norme initiale de DOM, les objets Attribute héritaient de la classe Node 63 Dans la norme DOM4, ce n’est plus le cas !! 64 HTML DOM HTML DOM Attribute Propriétés Méthodes Event Aucune méthode n’a été définie pour les objets de type DOM Event permet à Javascript d’enregistrer différents « Attribute » dans la norme DOM 4 du W3C gestionnaires d’événements sur les éléments HTML d’un document Les événement sont associés à des fonctions La manipulation d’attributs se fait à travers des objets Document ou Element Le traitement d’une fonction ne s’exécute que quand 65 un événement est déclenché 66 HTML DOM HTML DOM Event Événements L’objet gérés style Objet permettant l’accès direct au style CSS d’un élément Lors du déclenchement d’un événement, du document un objet est automatiquement créé Il possède des propriétés qui correspondent à toutes les propriétés CSS existantes Cet objet peut être envoyé à la fonction associée à l’événement Il fournit une syntaxe similaire au CSS 67 68  Propriété CSS en CamelCase element.style.propriété HTML DOM Élément du document style Style CSS de l’élément Comme en CSS, certaines propriétés ont besoin d’être précédées par des Vendor Prefixes #monDiv {border-left-color : blue} Webkit var elt = document.getElementById("monDiv"); elt.style.borderLeftColor = ‘blue’; 70 69 Moz HTML DOM L’objet history style Exemple var elt = document.getElementById("elt"); Cet objet permet de naviguer dans l’historique du navigateur elt.style.WebkitAnimationPlayState = "paused"; elt.style.MozAnimationPlayState = "paused"; history Valable uniquement elt.style.animationPlayState = "paused"; Propriétés lenght pour la page ouverte back() Méthodes forward() go() 71 72  L’objet location L’objet location Cet objet contient des informations sur l’URL courante Propriété Description hash Retourne ou affecte la partie de l’ancre (#) Cet objet contient des informations sur l’URL courante host Retourne ou affecte le nom du hôte et le numéro de port hostname Retourne ou affecte le nom du hôte Méthode Description href Retourne ou affecte l’URL en entier assign() Charge un nouveau document origin Retourne ou affecte le nom du hôte, le numéro de port et le protocole reload() Recharge le document en cours pathname Retourne ou affecte le chemin du document ouvert replace() Remplace le document en cours par un autre protocol Retourne ou affecte le protocole utilisé port Retourne ou affecte le numéro de port 73 74 search Retourne ou affecte la partie contenant les variables envoyées sur l’URL L’objet navigator Cet objet contient des informations sur le navigateur L’objet screen Propriété Description appCodeName Renvoie le code du navigateur Cet objet contient des informations sur l’écran du visiteur appName Renvoie le nom du navigateur appVersion Renvoie la version du navigateur Propriété Description cookieEnabled Détermine si les cookies sont activé ou non availHeight Retourne la hauteur de l’écran (en excluant la barre des taches) geolocation Renvoie la localisation de l’utilisateur availWidth Retourne la largeur de l’écran (en excluant la barre des taches) language Renvoie la langue utilisée dans le navigateur height Retourne la hauteur de l’écran onLine Détermine si le navigateur est en ligne ou pas width Retourne la largeur de l’écran Une seule méthode : javaEnabled() colorDepth Retourne la profondeur des couleurs système (bits / pixel) 75 76 permet de déterminer si JAVA est activé ou pas pixelDepth Retourne la résolution de l’écran