Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Centre : HEMI Adresse : Ucad2 Tel : (+221) 33 868 46 42 Formateur : Mr. Karl Be

Centre : HEMI Adresse : Ucad2 Tel : (+221) 33 868 46 42 Formateur : Mr. Karl Becker Profession : Développeur web Téléphone : (+221) 77 455 64 74 Email : karl.alexandre.becker@gmail.com Sujet : Cours JavaScript Objectifs : Apprendre les bases Durée : 40 heures Support : Cours de JavaScript JavaScript est le langage de programmation de HTML et du Web. JavaScript est facile à apprendre. Pourquoi étudier le JavaScript? JavaScript est l’un des 3 langages que tous les développeurs Web doivent apprendre: 1. HTML pour définir le contenu des pages Web 2. CSS pour spécifier la mise en page des pages Web 3. JavaScript pour programmer le comportement des pages Web Les pages Web ne sont pas le seul endroit où JavaScript est utilisé. De nombreux programmes de bureau et de serveur utilisent JavaScript. Node.js est le plus connu. Certaines bases de données, telles que MongoDB et CouchDB, utilisent également JavaScript comme langage de programmation. Le saviez-vous? JavaScript et Java sont des langages complètement différents, à la fois en concept et en design. JavaScript a été inventé par Brendan Eich en 1995 et est devenu un standard ECMA en 1997. ECMA-262 est le nom officiel de la norme. ECMAScript est le nom officiel du langage. Versions JavaScript JavaScript a été inventé par Brendan Eich en 1995 et est devenu un standard ECMA en 1997. ECMAScript est le nom officiel du langage. À partir de 2015, ECMAScript est nommé par année (ECMAScript 2015). Editions ECMAScript Ver Nom officiel La description 1 ECMAScript 1 (1997) Première édition. 2 ECMAScript 2 (1998) Modifications rédactionnelles uniquement. 3 ECMAScript 3 (1999) Ajout d'expressions régulières. Ajouté try / catch. 4 ECMAScript 4 Jamais publié. 5 ECMAScript 5 (2009) Ajout du "mode strict". Ajout du support JSON. Ajouté String.trim (). Ajouté Array.isArray (). Méthodes ajoutées d'itération de tableau. 5.1 ECMAScript 5.1 (2011) Changements éditoriaux. 6 ECMAScript 2015 Ajout de let et const. Ajout de valeurs de paramètres par défaut. Ajout de Array.find (). Ajout de Array.findIndex (). 7 ECMAScript 2016 Opérateur exponentiel ajouté (**). Array.prototype.includes a été ajouté. 8 ECMAScript 2017 Ajout de rembourrage de chaîne. Ajout de nouvelles propriétés d'objet. Ajout de fonctions asynchrones. Ajout de mémoire partagée. 9 ECMAScript 2018 Ajout de propriétés de repos / propagation. Ajout de l'itération asynchrone. Ajouté Promise.finally (). Ajouts à RegExp. ECMAScript est souvent abrégé en ES. Support du navigateur ECMAScript 3 est entièrement pris en charge par tous les navigateurs. ECMAScript 5 est entièrement pris en charge par tous les navigateurs modernes. Prise en charge du navigateur pour ES5 (2009) Navigateur Version Partir de la date Chrome 23 Septembre 2012 Firefox 21 Avril 2013 C'EST À DIRE 9 * Mars 2011 IE / Edge Dix Septembre 2012 Safari 6 Juil 2012 Opéra 15 Juil 2013 * Internet Explorer 9 ne prend pas en charge ECMAScript 5 "use strict". Prise en charge du navigateur pour ES6 (ECMAScript 2015) Navigateur Version Rendez-vous amoureux Chrome 51 Mai 2016 Firefox 54 Juin 2017 Bord 14 Août 2016 Safari dix Septembre 2016 Opéra 38 Juin 2016 Internet Explorer ne prend pas en charge ECMAScript 2015. Prise en charge du navigateur pour ES7 (ECMAScript 2016) Navigateur Version Rendez-vous amoureux Chrome 68 Mai 2018 Opéra 55 Août 2018 JavaScript / ECMAScript JavaScript a été développé pour Netscape. Netscape 2 a été le premier navigateur à utiliser JavaScript. Après Netscape, la fondation Mozilla a poursuivi le développement de JavaScript pour le navigateur Firefox. La dernière version de JavaScript était la 1.8.5. (Identique à ECMAScript 5). ECMAScript a été développé par ECMA International après l’adoption de JavaScript par l’organisation. La première édition de ECMAScript a été publiée en 1997. Cette liste compare les numéros de version des différents produits: An JavaScript ECMA Navigateur 1996 1,0 Netscape 2 1997 ECMAScript 1 IE 4 1998 1.3 Netscape 4 1999 ECMAScript 2 IE 5 2000 ECMAScript 3 IE 5.5 2000 1,5 Netscape 6 2000 1,5 Firefox 1 2011 ECMAScript 5 IE 9 (sauf "use strict") 2011 1.8.5 Firefox 4 (sauf les zéros au début de parseInt) 2012 IE 10 2012 Chrome 23 2012 Safari 6 2013 Firefox 21 2013 Opéra 15 2015 ECMAScript 2015 Partiellement supporté dans tous les navigateurs IE 4 a été le premier navigateur à prendre en charge ECMAScript 1 (1997). IE 5 a été le premier navigateur à prendre en charge ECMAScript 2 (1999). IE 5.5 a été le premier navigateur à prendre en charge ECMAScript 3 (2000). IE 9 * a été le premier navigateur à prendre en charge ECMAScript 5 (2011). Internet Explorer 9 ne prend pas en charge ECMAScript 5 "use strict". Chrome 23, IE 10 et Safari 6 ont été les premiers navigateurs à prendre pleinement en charge ECMAScript 5: Chrome 23 IE10 / Edge Firefox 21 Safari 6 Opera 15 Sep 2012 Sep 2012 Apr 2013 Jul 2012 Jul 2013 Introduction à JavaScript Cette page contient quelques exemples de ce que JavaScript peut faire. JavaScript peut modifier le contenu HTML Une des nombreuses méthodes HTML JavaScript est getElementById() . Cet exemple utilise la méthode pour "trouver" un balise HTML (avec id = "demo") et remplace le contenu de l'élément ( innerHTML ) par "Hello JavaScript": Exemple document.getElementById("demo").innerHTML = "Hello JavaScript"; JavaScript accepte les guillemets simples et doubles: Exemple document.getElementById('demo').innerHTML = 'Hello JavaScript'; JavaScript peut modifier les valeurs d'attribut HTML Dans cet exemple, JavaScript change la valeur de l'attribut src (source) d'une <img> : L'ampoule Turn on the light Turn off the light Exemple document.getElementById('myImage').src='pic_bulbon.gif' ; JavaScript peut changer les styles CSS d’un document HTML La modification du style d'une balise HTML est une variante de la modification d'un attribut HTML: Exemple document.getElementById("demo").style.fontSize = "35px"; JavaScript peut masquer des balises HTML Le masquage de balise HTML peut être effectué en modifiant la propriété de style display : Exemple document.getElementById("demo").style.display = "none"; JavaScript peut afficher des balises HTML L'affichage de balises HTML masqués peut également être effectué en modifiant le style d' display : Exemple document.getElementById("demo").style.display = "block"; JavaScript Où l’insérer La balise <script> En HTML, le code JavaScript doit être inséré entre les balises <script> et </script> . Exemple <script> document.getElementById("demo").innerHTML = "Mon premier JavaScript"; </script> Les anciens exemples JavaScript peuvent utiliser un attribut type: <script type = "text / javascript">. L'attribut type n'est pas requis. JavaScript est le langage de script par défaut en HTML. Fonctions et événements JavaScript Une fonction JavaScript est un bloc de code JavaScript, qui peut être exécuté lorsqu’il est "appelé". Par exemple, une fonction peut être appelée lorsqu'un événement se produit, comme lorsque l'utilisateur clique sur un bouton. Vous en apprendrez beaucoup plus sur les fonctions et les événements dans les chapitres suivants. JavaScript dans <head> ou <body> Vous pouvez placer un nombre illimité de scripts dans un document HTML. Les scripts peuvent être placés dans le <body> , ou dans la section <head> d'une page HTML, ou dans les deux. JavaScript dans <head> Dans cet exemple, une fonction JavaScript est placée dans la section <head> d'une page HTML. La fonction est appelée (appelée) quand un bouton est cliqué: Exemple <!DOCTYPE html> <html> <head> <script> function maFonction() { document.getElementById("demo").innerHTML = "Le Paragraphe a changé."; } </script> </head> <body> <h1>A Page Web</h1> <p id="demo">A Paragraphe</p> <button type="button" onclick="maFonction()">Exécuter</button> </body> </html> JavaScript dans <body> Dans cet exemple, une function JavaScript est placée dans la section <body> d'une page HTML. La fonction est appelée (appelée) quand un bouton est cliqué: Exemple <!DOCTYPE html> <html> <body> <h1>Page web</h1> <p id="demo"> Paragraphee de départ</p> <button type="button" onclick="maFonction()">Modifier</button> <script> function maFonction() { document.getElementById("demo").innerHTML = "Paragraphee a changé."; } </script> </body> </html> Placer des scripts au bas de l'élément <body> améliore la vitesse d'affichage, car l'interprétation des scripts ralentit l'affichage. JavaScript externe Les scripts peuvent également être placés dans des fichiers externes: Fichier externe: monScript.js function maFonction() { document.getElementById("demo").innerHTML = "Le Paragraphee a changé."; } Les scripts externes sont pratiques lorsque le même code est utilisé dans de nombreuses pages Web différentes. Les fichiers JavaScript ont l'extension de fichier .js . Pour utiliser un script externe, indiquez le nom du fichier de script dans l'attribut src (source) d'une <script> : Exemple <script src="monScript.js"></script> Vous pouvez placer une référence de script externe dans <head> ou <body> à votre guise. Le script se comportera comme s'il se trouvait exactement à l'emplacement de la <script>. Les scripts externes ne peuvent pas contenir de balises <script>. Avantages JavaScript externes Le placement de scripts dans des fichiers externes présente certains avantages:  Il sépare HTML et le code javascript  Cela rend HTML et JavaScript plus faciles à lire et à maintenir  Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages Pour ajouter plusieurs fichiers de script sur une page, utilisez plusieurs balises de script: Exemple <script src="monScript1.js"></script> <script src="monScript2.js"></script> Références externes Les scripts externes peuvent être référencés avec une URL complète ou avec un chemin relatif à la page Web actuelle. Cet exemple utilise une URL complète pour créer un lien vers un script: Exemple <script src="https://www.hemi.com/js/monScript1.js"></script> Cet exemple utilise un script situé dans un dossier spécifié du site Web actuel: Exemple uploads/Litterature/ cours-de-javascript.pdf