Chapitre 5 Javascript 2024-2025 PDF

introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibl...

introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Chapitre V: Javascript Professeure Manal ZETTAM Ecole Nationale des Sciences Appliquées de Safi Université Cadi Ayyad - Marrakech Année Universitaire : 2024-2025 Professeure Manal ZETTAM Chapitre V: Javascript 1 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Plan 1 introduction 2 Inclusion du code JavaScript 3 Manipulez des données avec JavaScript Déclarer et afficher une variable Déclarer et afficher une constante Les types de données et les opérations Professeure Manal ZETTAM Chapitre V: Javascript 2 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Plan 4 Les objets en JavaScript Déclarer un objet en JavaScript Accédez à une propriété d’un objet JavaScript Modifier la valeur des propriétés d’un objet JavaScript 5 Les tableaux en JavaScript Déclarer un tableau en JavaScript Accéder aux éléments du tableau La propriété length et les méthodes push() ,pop() et splice() Professeure Manal ZETTAM Chapitre V: Javascript 3 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Plan 6 Les conditions et les boucles Instruction if... else Instruction switch Opérateur ternaire Boucle for Instruction while 7 Les fonctions Professeure Manal ZETTAM Chapitre V: Javascript 4 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Plan 8 Elements HTML et javascript Récupérer un élément d’une page web Modifiez un élément d’une page web Ajouter un nouvel élément dans une page web Evénements et intéractions 9 Bibliographie & Webographie Professeure Manal ZETTAM Chapitre V: Javascript 5 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Introduction JavaScript né en 1995, est un langage de script côté client, ce qui signifie qu’il s’exécute côté client, dans un navigateur Web. Professeure Manal ZETTAM Chapitre V: Javascript 6 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript Le code javascript peut être écrit: 1 dans un fichier.js (recommandé) ; 2 dans l’en-tête ou le corps du fichier HTML ; 3 directement dans les balises du fichier HTML via des pseudo-URL(href) ou des attributs d’événements tels que onload (déconseillé). Professeure Manal ZETTAM Chapitre V: Javascript 7 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript Code javascript dans l’en-tête ou le corps du fichier HTML window.alert("Welcome to JavaScript!"); Professeure Manal ZETTAM Chapitre V: Javascript 8 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript Code javascript directement dans les balises du fichier HTML click here Professeure Manal ZETTAM Chapitre V: Javascript 9 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript Code javascript directement dans les balises du fichier HTML click here for a surprise Professeure Manal ZETTAM Chapitre V: Javascript 10 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript Code javascript dans un fichier.js window.alert("Welcome to JavaScript!"); Professeure Manal ZETTAM Chapitre V: Javascript 11 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Inclusion du code JavaScript les attributs d’événements https://html.spec.whatwg.org/multipage/indices.html# event-pageshow Professeure Manal ZETTAM Chapitre V: Javascript 12 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable L’instruction let: l’instruction let permet de déclarer une variable. let mavariable = 42 L’instruction console.log(): permet d’afficher le contenu de la variable mavariable dans la console. let mavariable = 42 console.log(mavariable) Professeure Manal ZETTAM Chapitre V: Javascript 13 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable Créer un fichier javascript avec l’extension.js: let mavariable = 42 console.log(mavariable) Professeure Manal ZETTAM Chapitre V: Javascript 14 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable Créer un fichier html et ajouter le code suivant Professeure Manal ZETTAM Chapitre V: Javascript 15 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable ouvrir la page html avec un navigateur web. faire un clic droit puis choisir inspecter et chercher l’onglet console Professeure Manal ZETTAM Chapitre V: Javascript 16 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable L’instruction var: l’instruction var permet de déclarer une variable. var mavariable = 42 L’instruction console.log(): permet d’afficher le contenu de la variable mavariable dans la console. var mavariable = 42 console.log(mavariable) Professeure Manal ZETTAM Chapitre V: Javascript 17 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable let vs var La portée d’une variable déclarée via let est celle du bloc courant contrairement à une variable décalarée via var. Professeure Manal ZETTAM Chapitre V: Javascript 18 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable Exemple let x = 1; if (x === 1) { let x = 2; console.log(x); // Expected output: 2 } console.log(x); // Expected output: 1 Professeure Manal ZETTAM Chapitre V: Javascript 19 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une variable Exemple var x = 1; if (x === 1) { var x = 2; console.log(x); // Expected output: 2 } console.log(x); // Expected output: 2 Professeure Manal ZETTAM Chapitre V: Javascript 20 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une constante L’instruction const: l’instruction const permet de déclarer une constante. const monPrenom = "Manal" L’instruction console.log(): permet d’afficher le contenu de la constante monPrenom dans la console. const monPrenom = "Manal" console.log(monPrenom) Professeure Manal ZETTAM Chapitre V: Javascript 21 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une constante Modifier le contenu du fichier javascript comme suit et rafraı̂chir la page web. const monPrenom = "Manal" console.log(monPrenom) ou const monPrenom = "Manal" ; console.log(monPrenom); Professeure Manal ZETTAM Chapitre V: Javascript 22 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer et afficher une constante Affichage du contenu de la constante monPrenom dans la console Professeure Manal ZETTAM Chapitre V: Javascript 23 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations En javascript, il existe sept types primitifs dont les trois suivants: string : correspond à une chaı̂ne de caractères. number : correspond à un chiffre. boolean : correspond à un booléen. https: //developer.mozilla.org/en-US/docs/Glossary/Primitive Professeure Manal ZETTAM Chapitre V: Javascript 24 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations Le type number Pour le type number on a les opérateurs suivants: L’addition +, la soustraction - , la multiplications *, la division /, Professeure Manal ZETTAM Chapitre V: Javascript 25 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations Addition (+) Syntaxe L’addition de deux nombre x et y est notée comme suit sous javascript: x + y; // addition de x et y Professeure Manal ZETTAM Chapitre V: Javascript 26 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations Exemple // Number + Number -> addition 1 + 2; // 3 // Boolean + Number -> addition true + 1; // 2 // Boolean + Boolean -> addition false + false; // 0 Professeure Manal ZETTAM Chapitre V: Javascript 27 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations La concaténation: la concaténation de deux chaines de caractères est effectuée via l’opérateur +. Exemple let premierePartie = "Mon nom est Olivia" let deuxiemePartie = ", Olivia Gazalée." let punchline = premierePartie + deuxiemePartie // punchline vaut \Mon nom est Olivia, Olivia Gazalée." Professeure Manal ZETTAM Chapitre V: Javascript 28 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations Soustraction (-) Syntaxe La soustraction de deux nombre x et y est notée comme suit sous javascript: x - y; // soustraction de x et y Professeure Manal ZETTAM Chapitre V: Javascript 29 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations Exemple 5 - 3; // 2 3 - 5; // -2 Professeure Manal ZETTAM Chapitre V: Javascript 30 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer et afficher une variable Les tableaux en JavaScript Déclarer et afficher une constante Les conditions et les boucles Les types de données et les opérations Les fonctions Elements HTML et javascript Bibliographie & Webographie Les types de données et les opérations documentation La syntaxe et les exemples sur les autres opérateurs sont disponible sur la page web https://developer.mozilla.org/fr/docs/ Web/JavaScript/Reference/Operators. Professeure Manal ZETTAM Chapitre V: Javascript 31 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Les objets en JavaScript Objet Un objet en JavaScript est un conteneur. Il est composé de propriétés/attributs qui ont chacune une valeur. Professeure Manal ZETTAM Chapitre V: Javascript 32 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer un objet en JavaScript En Javascript, on déclare un objet comme suit: let nom_objet = { propriete_1: valeur_1, propriete_2: valeur_2, propriete_1: valeur_3, } Professeure Manal ZETTAM Chapitre V: Javascript 33 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer un objet en JavaScript Exemple let Client = { nom: "Benis", prenom: "Meryem", tel: 21266666666, ville: "safi" } Professeure Manal ZETTAM Chapitre V: Javascript 34 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Accédez à une propriété d’un objet JavaScript Pour accéder à la valeur d’une propriété, il suffit d’utiliser le point. console.log(nom_objet.propriete_1); Professeure Manal ZETTAM Chapitre V: Javascript 35 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Accédez à une propriété d’un objet JavaScript Exemple console.log(Client.nom); Professeure Manal ZETTAM Chapitre V: Javascript 36 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Modifier la valeur des propriétés d’un objet JavaScript Pour modifier la valeur d’une propriété il suffit d’utiliser le point. pour accéder à la propriété et puis l’opérateur d’affectation = comme suit: nom_objet.propriete_1=valeur_k; Professeure Manal ZETTAM Chapitre V: Javascript 37 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un objet en JavaScript Les tableaux en JavaScript Accédez à une propriété d’un objet JavaScript Les conditions et les boucles Modifier la valeur des propriétés d’un objet JavaScript Les fonctions Elements HTML et javascript Bibliographie & Webographie Modifier la valeur des propriétés d’un objet JavaScript Exemple console.log(Client.nom); Client.nom = "Obaa"; console.log("le nouveau nom est "+Client.nom); Professeure Manal ZETTAM Chapitre V: Javascript 38 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie Les tableaux en JavaScript Les tableaux sont généralement décrits comme des ”objets de type liste” ; un tableau est un objet contenant plusieurs valeurs. Professeure Manal ZETTAM Chapitre V: Javascript 39 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie Déclarer un tableau en JavaScript Pour déclarer un tableau en JavaScript, il suffit d’utiliser les crochets [ ]. Chaque valeur contenue dans le tableau est séparée par une virgule , : let nom_tableau = [valeur_0, valeur_1,..., valeur_n-1]; Professeure Manal ZETTAM Chapitre V: Javascript 40 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie Les tableaux en JavaScript Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ["arbre", 795, [0, 1, 2]]; console.log(shopping); console.log(sequence); console.log(random); Professeure Manal ZETTAM Chapitre V: Javascript 41 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie Accéder aux éléments du tableau Pour accéder à un élément du tableau, il suffit d’écrire le nom du tableau suivi l’index de l’élément souhaité entre crochets comme suit: let nom_tableau = [valeur_0, valeur_1,..., valeur_n-1]; let kiemeelement = nom_tableau[k] Professeure Manal ZETTAM Chapitre V: Javascript 42 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie Accéder aux éléments du tableau Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; let premierelement = shopping; console.log(premierelement); shopping="modifie"; console.log(shopping); Professeure Manal ZETTAM Chapitre V: Javascript 43 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie La propriété length et les méthodes push() ,pop() et splice() length La propriété length permet de connaı̂tre le nombre d’éléments que contient un tableau. Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; const nombreDeShopping = shopping.length console.log(nombreDeShopping ) // nombreDeShopping vaut 5 Professeure Manal ZETTAM Chapitre V: Javascript 44 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie La propriété length et les méthodes push() ,pop() et splice() push() Pour ajouter des données à un tableau, il suffit d’utiliser la méthode push qui prend en paramètre la valeur à ajouter. Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; shopping.push("poisson") console.log(shopping) // shopping vaut ["pain", "lait", "fromage", "houmous", "nouilles", //"poisson"] Professeure Manal ZETTAM Chapitre V: Javascript 45 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie La propriété length et les méthodes push() ,pop() et splice() pop() Pour supprimer le dernier élément du tableau, il suffit d’utiliser la méthode pop. Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; shopping.pop() console.log(shopping) // shopping vaut ["pain", "lait", "fromage", "houmous"] Professeure Manal ZETTAM Chapitre V: Javascript 46 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie La propriété length et les méthodes push() ,pop() et splice() splice() La méthode splice() modifie le contenu d’un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments. Exemple let shopping = ["pain", "lait", "fromage", "houmous", "nouilles"]; shopping.(1, 0, 'poisson'); console.log(shopping) // shopping vaut ["pain", "poisson", "lait", "fromage", "houmous"] Professeure Manal ZETTAM Chapitre V: Javascript 47 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Déclarer un tableau en JavaScript Les tableaux en JavaScript Accéder aux éléments du tableau Les conditions et les boucles La propriété length et les méthodes push() ,pop() et splice() Les fonctions Elements HTML et javascript Bibliographie & Webographie La propriété length et les méthodes push() ,pop() et splice() Documentation Array https://developer.mozilla.org/fr/docs/Web/JavaScript/ Reference/Global_Objects/Array L’opérateur d’affectation permet seulement de faire des - copies par références et non pas des copies par valeurs dans le cas d’un objet tel un tableau. Professeure Manal ZETTAM Chapitre V: Javascript 48 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction if... else Syntaxe if (condition) { code à exécuter si la condition est true } else { sinon exécuter cet autre code à la place } Professeure Manal ZETTAM Chapitre V: Javascript 49 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction if... else Exemple let coursesFaites = false; if (coursesFaites === true) { let argentDePoche = 10; } else { let argentDePoche = 5; } console.log(argentDePoche) // argentDePoche vaut 5 Professeure Manal ZETTAM Chapitre V: Javascript 50 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction if... else Opérateurs logiques AND, OR et NOT Pour tester plusieurs conditions sans imbriquer des instructions if...else , il suffit d’utiliser les opérateurs logiques tels que: && — AND : permet d’enchaı̂ner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à true pour que l’enemble de l’expression retourne true. | | — OR : permet d’enchaı̂ner deux ou plusieurs expressions ensemble de sorte qu’il suffit qu’une au plus soit évaluée comme étant true pour que l’ensemble de l’expression renvoie true. Professeure Manal ZETTAM Chapitre V: Javascript 51 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction if... else Exemple let camionDeGlaces = true let etatDeLaMaison ="on fire" if (!(camionDeGlaces || etatDeLaMaison === "on fire")) { console.log("Vous pouvez probablement rester dedans."); } else { console.log("Vous devriez sortir de la maison rapidement."); } Professeure Manal ZETTAM Chapitre V: Javascript 52 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction switch Syntaxe switch (expression) { case choix1: exécuter ce code break; case choix2: exécuter ce code à la place break; // incorporez autant de case que vous le souhaitez default: sinon, exécutez juste ce code } Professeure Manal ZETTAM Chapitre V: Javascript 53 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction switch Exemple Select the weather type today: --Make a choice-- Sunny Rainy Professeure Manal ZETTAM Chapitre V: Javascript 54 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction switch Exemple const select = document.querySelector("select"); const para = document.querySelector("p"); select.addEventListener("change", setWeather); function setWeather() { let choice = select.value; switch (choice) { case "sunny": para.textContent = "It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream."; break; Professeure Manal ZETTAM Chapitre V: Javascript 55 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction switch Exemple case "rainy": para.textContent = "Rain is falling outside; take a rain coat and a brolly, and don't stay out for too long."; break; default: para.textContent = ""; } } Professeure Manal ZETTAM Chapitre V: Javascript 56 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Opérateur ternaire L’opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false. Syntaxe ( condition ) ? exécuter ce code : exécuter celui-ci à la place Professeure Manal ZETTAM Chapitre V: Javascript 57 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Opérateur ternaire Exemple let formuleDePolitesse = est_anniversaire ? "Bon anniversaire Mme Smith &nbsp;!" : "Bonjour Mme Smith."; Professeure Manal ZETTAM Chapitre V: Javascript 58 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Boucle for Syntaxe for (let compteur = 0; compteur < nbr; compteur = compteur + 1) { } Professeure Manal ZETTAM Chapitre V: Javascript 59 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Boucle for Exemple for (let compteur = 0; compteur < 3; compteur = compteur + 1) { console.log(compteur) } Professeure Manal ZETTAM Chapitre V: Javascript 60 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction while Syntaxe let i = 0 while (i < nbr) { i++ } Professeure Manal ZETTAM Chapitre V: Javascript 61 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Instruction if... else Les objets en JavaScript Instruction switch Les tableaux en JavaScript Opérateur ternaire Les conditions et les boucles Boucle for Les fonctions Instruction while Elements HTML et javascript Bibliographie & Webographie Instruction while Exemple let i = 0 while (i < 3) { console.log(i) i++ } https://developer.mozilla.org/fr/docs/Learn/ JavaScript/Building_blocks/Looping_code Professeure Manal ZETTAM Chapitre V: Javascript 62 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Les fonctions Syntaxe function nom_de_la_fonction(paramètre1,paramètre2,....) { return s; } //Appel de la fonction let nouvel_variable = nom_de_la_fonction(paramètre1,paramètre2,....) Professeure Manal ZETTAM Chapitre V: Javascript 63 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Les fonctions Exemple function retournerMessageNote(note, nombreQuestions) { let message = 'Votre note est de ' + note + ' sur ' + nombreQuestions return message } let nouveauMessage = retournerMessageNote(7, 10) console.log(nouveauMessage) Professeure Manal ZETTAM Chapitre V: Javascript 64 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web JavaScript a défini plusieurs méthodes de l’objet document (DOM) pour récupérer les éléments de html telles que : getElementById; getElementsByClassName; getElementsByName; querySelector; querySelectorAll. https://developer.mozilla.org/en-US/docs/Web/API/ Document_Object_Model Professeure Manal ZETTAM Chapitre V: Javascript 65 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web Exemple: getElementById getElementById example Some text here blue red Professeure Manal ZETTAM Chapitre V: Javascript 66 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web Exemple: getElementById function changeColor(newColor) { const elem = document.getElementById("para"); elem.style.color = newColor; } https://developer.mozilla.org/en-US/docs/Web/API/ Document/getElementById Professeure Manal ZETTAM Chapitre V: Javascript 67 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web Exemple: QuerySelectorAll Mots Phrases Entrez le mot : Cachalot Professeure Manal ZETTAM Chapitre V: Javascript 68 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web Exemple: QuerySelectorAll let listeInputRadio = document.querySelectorAll(".zoneChoix input"); console.log(listeInputRadio); Professeure Manal ZETTAM Chapitre V: Javascript 69 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Modifiez un élément d’une page web setAttribute: permet de modifier les attributs. le code javascript suivant permet de modifier la valeur de l’attribut alt let baliseImage = document.getElementById("premiereImage"); baliseImage.setAttribute("alt", "Ceci est la nouvelle valeur de alt"); Professeure Manal ZETTAM Chapitre V: Javascript 70 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Modifiez un élément d’une page web classList: permet de modifier les classes. let baliseImage = document.getElementById("premiereImage"); baliseImage.classList.add("nouvelleClasse") baliseImage.classList.remove("photo") Professeure Manal ZETTAM Chapitre V: Javascript 71 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Ajouter un nouvel élément dans une page web CreateElement: permet de créer une balise html. let nouvelElement = document.createElement("div"); appendChild: permet d’insérer un élément dans la page html. // Récupérer un élément parent existant let parentElement = document.getElementById("conteneur"); // Ajouter le nouvel élément au parent parentElement.appendChild(nouvelElement); Professeure Manal ZETTAM Chapitre V: Javascript 72 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Evénements et intéractions addEventListener: permet d’ajouter un écouteur. let monBouton = document.getElementById("monBouton"); monBouton.addEventListener("click", function () { console.log("Vous avez cliqué sur le bouton") }); Professeure Manal ZETTAM Chapitre V: Javascript 73 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Récupérer un élément d’une page web Les objets en JavaScript Modifiez un élément d’une page web Les tableaux en JavaScript Ajouter un nouvel élément dans une page web Les conditions et les boucles Evénements et intéractions Les fonctions Elements HTML et javascript Bibliographie & Webographie Récupérer un élément d’une page web addEventListener avec une fonction fléchée monBouton.addEventListener("click", () => { console.log("Vous avez cliqué sur le bouton") }); Professeure Manal ZETTAM Chapitre V: Javascript 74 / 75  introduction Inclusion du code JavaScript Manipulez des données avec JavaScript Les objets en JavaScript Les tableaux en JavaScript Les conditions et les boucles Les fonctions Elements HTML et javascript Bibliographie & Webographie Bibliographie & Webographie JavaScript. L’ESSENTIEL DU CODE ET DES COMMANDES, PEARSON. https://github.com/solygambas/ html-css-javascript-projects/tree/main Openclassroom. Professeure Manal ZETTAM Chapitre V: Javascript 75 / 75