JAVASCRIPT VERSION « MODERNE » : POST ES6 1 - Bases du langage SOMMAIRE Sommaire. 1 JS - 1 : INTRODUCTION ET tour complet. 4 2 - Environnement de travail. 10 3 - Tester JavaScript en ligne : à éviter !.
11 3 - Tutoriels et ressources références. 15 6 - Organisation du cours. 17 JavaScript – Tour complet. 18 04 - variable, addition, concaténation, prompt() – A tester.
21 05 – premières fonctions – A tester. 22 06 – premières listes – A tester et exercices .write() et test – A tester. getElementById() et boucle for – A tester. 27 09 – Button : programmation événementielle – A tester.
28 10 – onclick, onmouseover, on mouseout – A tester. 29 11 – fonctions et paramètres en sortie – Point théorique (facultatif). 33 JS - 2 : Bases du code. 36 Les interpréteurs JavaScript.
37 Types et opérations de base. 40 Opérations de base .44 Principes et usages modernes : ES6+. 45 Variable globale : à éviter !. 45 Utilisation d’une variable.
46 Conversions de types. 47 Expression et évaluation d’une expression. 49 JavaScript – page 1/105 Affichage d’une fenêtre d’alerte, avec ou sans confirmation. 49 Affichage d’une fenêtre avec texte et champs de saisie.
49 textContent et innerHTML. 52 Fonctions mathématiques prédéfinies : Math. 53 Fonctions de manipulation de chaines prédéfinies : String. 54 Fonctions de manipulation de date prédéfinies : Date.
55 Paramètres en sortie des fonctions : exemple 11 .59 1 – Calculs sur des figures. 59 2 – Jour de la semaine. 59 3 – Table de multiplication. 60 4 : Compteur de clics.
60 JS - 3 : Tableaux et objets - JSON .61 Installation des fichiers de tests .61 Bases du code – 2 – tableaux et objets (ou structures). 62 2 - Objet ( = structure) en JS : exemple 2. 65 3 - Boucles spéciales : exemples 1 et 2. 67 4 – Tableau de d’objets ( = structures) : exemple 3.
71 6 – Objet (= structure) avec fonctions : exemple 4. 74 1 – Tableau de notes. 76 2 - Tableau d’élèves avec des notes – Tri d’un objet (= structure). 78 3 - Tableau d’élèves avec des notes – creerEleve.
79 4 – Jeu de grammaire. 81 JS - 4 : JS moderne : ES6/2015 .82 JS moderne : ES6/2015 - Standard ECMAScript.82 L’essentiel de ES6/2015. 83 Variables globales : rappels. 85 Exemple de classe.
87 Fonction fléchée : fat arrow : =>. 88 JavaScript – page 2/105 Fonction fléchée : fat arrow : =>. 90 Le mode strict. 92 Sur un objet.
92 Sur un tableau. 93 Exemples : un composant compteur .94 TP2-1 : création d’un composant compteur. 94 Présentation de 4 versions d’un petit compteur :. 94 TP2-1 : mise à jour du composant compteur.
94 JS - 5 : Anciennes versions de POO .95 Anciennes versions de POO - facultatif .95 Bases : objet (=structure) avec méthode – exemple 1 .95 Objet (=structure) avec méthode .97 POO - Version 2 : avec attribut prototype .98 ajout d’une fonction avec prototype en cours de code. 98 ajout d’une fonction avec prototype sur des classes natives .prototype – méthodes filter, every, some. 99 POO – Version 3 : avec un objet prototype et Object. 100 Création de Classe : notion de prototype – technique 1.
100 Création de Classe : fonction d’initialisation – technique 2. 101 Utilisation du new. 101 POO – Version 3 : Héritage - exemple 2. 102 Exercice 1 : une IHM pour l’exemple 2.
103 POO – tableau d’objets. 104 Exercice 2 : une IHM pour l’exemple 3. 105 Exercice 3 : tableau d’élèves avec notes et photos en POO. 105 Edition : octobre 2019 / ES6-2015 – MAJ fév 2024 JavaScript – page 3/105 JS - 1 : INTRODUCTION ET TOUR COMPLET Dans le cours : Les exemples sont présentés dans un chapitre en vert.
Les exercices à faire sont présentés dans un chapitre en jaune. Les phrases importantes sont en gras ou surlignés en bleu ciel JavaScript – Introduction 1 - Intro Qu’est-ce que c’est ? Le JavaScript (JS) est un langage de script (comme le HTML ou le PHP). Le code JS qui s’ajoute à la page HTML dans une balise <script>. Il est interprété par le navigateur.
Il permet de rendre plus dynamique et interactive la page HTML, sans passer par le serveur. Il peut aussi communiquer avec le serveur en utilisant les technologies AJAX. C’est un langage objet non typé, comme le python ! Rien à voir avec Java ! Historique Wiki : https://fr.org/wiki/JavaScript Inventé en 1995 par Brendan Eich pour Netscape premier navigateur Web populaire (l'ancêtre de Firefox). Aujourd’hui, tous les navigateurs comprennent le JavaScript aujourd’hui.
Standardisé par l'ECMA International sous le nom d'ECMAScript. ECMAScript 5, version standardisée sortie en 2009. ECMAScript 6 : dernière version standardisée, sortie en 2015. JavaScript – page 4/105 Désactiver JavaScript On peut sur chaque navigateur, désactiver JS.
Le JavaScript ne se substitue donc pas aux vérifications qu’il faut faire côté serveur. Beaucoup de sites ne pourront pas fonctionner sans JS. Bonnes pratiques JS a évolué depuis sa création. Les premiers usages peuvent être aujourd’hui considéré comme obsolètes et relevant de mauvaises pratiques.
Donc il faut faire attention à ne pas copier-coller n’importe quel exemple récupéré sur le web ! JavaScript – page 5/105 JS moderne : ES6/2015 - Standard ECMAScript • ES6 = ES2015 = ES6/2015 : une révolution pour JavaScript. • ES6/2015 : « sucre syntaxique » pour les Classes. JavaScript n’a pas de classes. La fonctionnalité des classes est reprise par les prototypes d'objet et le « sucre syntaxique pour les Classes » apparu avec ES6.
• Pour les prototypes, voir la fin de ce document. • Pour une introduction à l’objet, voir : http://bliaudet.php3?id_article=108 : on trouve un pdf et des exemples JavaScript ES6, Python et Java. • Les grands framework JS s’appuient sur ES6 (React, Angular, …) Quelques références • Historique : https://apprendre-a-coder.com/es6/ • Petite intro : https://www.fr/21-introduction-a-ecmascript-6-le-javascript-de-demain/ • W3schools : https://www.com/js/js_es6.asp • Différences 5 et 6 : http://es6-features.org/#StringInterpolation • Mozilla : https://developer.org/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_Ja vaScript/Support_ECMAScript_2015_par_Mozilla • Spécifications complètes : https://www.html JavaScript – page 6/105 Côté serveur : Node.js Apparition en 2009 de la plate-forme Node.js, qui permet d'écrire en JavaScript des applications Web très rapides.js exécute du JavaScript côté serveur pour générer du HTML dans lequel du JavaScript pourra toujours être exécuté côté client.com/courses/des-applications-ultra-rapides-avec-node-js/node-js-mais-a-quoi- ca-sert JavaScript – page 7/105 Développement front – Jquery – React – Vues.js Le JavaScript sert à améliorer le visuel de la page web. C’est un complément au CSS.
Il participe à la spécialisation du travail entre Frontend et Backend. Des bibliothèques existent pour faciliter le travail et découpler les usages (la logique métier) de la technique (le DOM). Jquery : la plus bibliothèque la plus populaire jusque vers 2015. Pour dynamiser les pages web => devenue obsolète en 2019 ! Mais ça reste utilisé par Bootstrap https://www.com/jquery/ React et Vues.js sont des bibliothèques Node.js pour du développement front.
React : facebook – 2013 : le plus utilisé https://www.com/react/default.asp VueJS : 2014 : en progrès React et/ou Vue.js sont un bon choix, quoiqu'il arrive. • Leur architecture et philosophie sont proches. Découvrir l'un permet de prendre la main plus rapidement avec l'autre. • La syntaxe de templating en quasi-HTML de VueJS est plus "naturelle" que le JSX de React JavaScript – page 8/105 Développement d’application : Framework JavaScript Avec du HTML et du JavaScript on peut développer des applications côté client.
Des bibliothèques et/ou frameworks permettent de faciliter le travail.js : google-chrome – 2009 : la base des framework avec le npm (node package manager). Angular : google – 2010-2012 : beaucoup de gens pas intéressé Express : pour la réalisation d’API. • Les méthodes d'écriture de code JavaScript "modernes" seront nécessaires pour les apprivoiser (POO, structuré, MVC, EcmaScript, etc.) ➢ AngularJS C’est une autre bibliothèque-framework JavaScript créé en 2009 chez Google. Pour développer des applications côté client.com/angular/angular_intro.asp ➢ JointJS C’est un site qui propose des bibliothèques payantes permettant de développer des applications comme par exemple un modeleur UML : http://resources.com/demos/kitchensink L’intérêt ici est d’avoir un outil en ligne.
On peut tester le modeleur UML. Il y a là un champ de développement commercial ou libre considérable ! https://www.com/opensource ➢ draw.io Application JS en ligne : modeleur UML et autres syntaxes. Gratuit ! https://www.io JavaScript – page 9/105 2 - Environnement de travail Editeur orienté front-end ➢ VS Code ou Sublime Text (ou Notepad ++ ou Bracket ou autre) Navigateur ➢ Chrome ou Firefox Inutile : environnement WAMP On peut installer les fichiers de test dans un environnement WAMP (dans le répertoire www du serveur local). Ce n’est pas obligatoire puisqu’on fonctionne, dans un premier temps (sans AJAX), uniquement côté client.
JavaScript – page 10/105 3 - Tester JavaScript en ligne : à éviter ! « Bac à sable » (coder en ligne) : à l’occasion pour tester ses codes Pour faire des tests éventuellement. Il faut aussi bien prendre le contrôle sur les fichiers.io/ : « start coding » https://jsfiddle.net/ http://jsbin.com/ Exemple • https://codepen.io/wlabarron/pen/yYrPRQ?editors=0011 Dans la zone « your code » de JS, écrivez : let output = "hello world" console.log(output) Dans la zone HTML, écrivez : <h1Test</h1> Ensuite, cliquez sur « run » JavaScript – page 11/105 3 - Tutoriels et ressources références Mozilla Les bases : https://developer.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript Intro et tutos : https://developer.org/fr/docs/Web/JavaScript Syntaxe : https://developer.org/fr/docs/Web/JavaScript/Reference#Les_instructions w3school JS de base : https://www.com/js/ ES6 : https://www.com/js/js_es6.asp Eloquent JavaScript Le site est moins à jour par rapport à l’ES2015 *** sommaire : http://fr.html En anglais : http://eloquentjavascript.net En français : http://fr.net JavaScript – page 12/105 4 - Balise <script> Le code JS se place entre les balises <script> et </script> Où mettre la balise <script> ? On peut placer des balises <script> dans le <head> ou dans le <body>. De préférence on ne met qu’une balise <script> par fichier HTML. Aujourd’hui, on préfère placer la balise <script> à la fin du <body>, juste avant le </body> : en effet pour bien s’exécuter, le JS doit d’abord avoir chargé la page HTML (mais l’affichage se fait après le chargement complet, donc après l’exécution du code JavaScript).
Ce qu’il faut faire : code JS avant le </body> <body> code de la page HTML <script> code JS </script> </body> JavaScript – page 13/105 Bonne pratique ultime : inclusion d’un fichier externe, avant le </body> <body> code de la page HTML <script src="script.js"></script> </body> On peut inclure un fichier contenant du code JS avec l’attribut « src » dans la balise <script>. On fera ça dans tous nos exemples. Si on met la balise <script> dans le <head> : On utilise le « window.onload » pour dire que le code JS sera exécuté après que la page ait été chargée. On met le code dans la fonction, entre les accolades.onload=fonction(){ code JS } </script> JavaScript – page 14/105 5 – Exemples : 01 – 02 - 03 Chargez les fichiers Les exemples du cours sont dans un fichier zip fournis avec l’article du cours.
• JavaScript_01_exemples_01_bases_et_tour.zip Téléchargez le zip et désippez-le. On obtient un répertoire : tour JavaScript_01_exemples_01_bases_et_tour Mettez ce répertoire : dans un dossier « Partie_1 » que vous aurez mis dans un dossier JavaScript. Ce dossier JavaScript peut être mis où vous voulez sur votre machine. Vous pouvez le mettre dans le répertoire web « www » du serveur WAMP mais ce n’est pas utile.
Les fichiers HTML contenant du JavaScript peuvent être exécutés sans environnement serveur. Ce dossier contient les codes des exemples de 01 à 11. JavaScript – page 15/105 01 - Hello world !