Remerciez-le!

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

Technologies du web Partie 3 : JavaScript 2 Introduction à JavaScript Core Java

Technologies du web Partie 3 : JavaScript 2 Introduction à JavaScript Core JavaScript Les Objets dans JavaScript Client-side JavaScript Plan de la présentation Plan 3 4 Introduction Introduction Manipuler les événements Interagir avec les éléments HTML Valider les formulaires web côté client Drag & Drop Faire un peu de dessin et des animations, et bien d'autres choses ! 5 Introduction Introduction Un système de chat, comme celui de Facebook Une suggestion lors de la frappe dans un champ de texte, comme lors d'une recherche avec Google ; Un lecteur de vidéos ou de musiques grâce aux balises <video> et <audio> Des jeux exploitants la balise <canvas> : Torus; Tetris en 3D ; modélisation 3D d’une Lamborghini affichée grâce à l'API WebGL et à la bibliothèque Three.js 6 Introduction à JavaScript Introduction à JavaScript JavaScript C’est quoi ???!! Compilé vs Interprété L’usage de JavaScript Les particularités de JavaScript Historique de JavaScript Introduction à JavaScript Un peu d’histoire… Netscape Communications a eu besoin d’un langage coller au HTML afin de rendre les pages un peu plus dynamique Ce langage doit être: Facile utiliser par les designers et les programmeurs Capable d’assembler les composants (images, plugins,..) Brendan Eich, a développé le premier prototype en 10 jours Introduction à JavaScript Un peu d’histoire… Le premier nom de ce langage a été Mocha Ensuite LiveScript Il a été renommé « JavaScript » lorsque sa version Beta 3 a été déployé Aucun lien avec JAVA Choix de Marketing Normalisé par Ecma International en 1996 il a été batisé ECMAScript Introduction à JavaScript JavaScript C’est quoi ???!! JavaScript est un langage de programmation qui sert principalement à dynamiser et à rendre interactifs les pages WEB. Exécuté sur vos machine donc côté Client. L’un des langages WEB les plus utiles et membre du fameux triplet : HTML pour le contenu CSS pour la présentation JS pour le comportement JavaScript est: Haut niveau Dynamique Non typé Interprété Introduction à JavaScript Compilé vs Interprété Compilation Un compilateur va traduire le programme dans un code spécifique à la machine cible (l’exécutable). Etapes : Le code source est analysé et parsé : C’est la ou on détecte les erreurs. Un générateur de code produit l’exécutable. Le code est ensuite exécuté Introduction à JavaScript Compilé vs Interprété Interprétation Le code source n’est pas directement exécuté par la machine cible. Un autre programme (i.e. l’interpréteur) lit et exécute le code source. Dans l’interprétation le code source est traduit en un code intermédiaire qui est ensuite traduit en en un code machine. Core JavaScript Plan Core JS Les bases du JavaScript Les variables Les types de données Operateurs et Expressions Structures conditionnelles et itératives Les Fonctions Les Tableaux Les Objets Core JavaScript La structure lexicale de JavaScript JS est sensible à la casse Les tags html et ces attributs doivent être représenté en minuscule coté JS. JS ignore les espaces et les retours à la ligne. Cependant formater votre code c’est UN DEVOIR Les commentaires // : commente le texte jusqu’à la fin de la ligne /* text */ : Commente un bloc Core JavaScript La structure lexicale de JavaScript Identifiants Doit commencer par une lettre, par (_) ou par le signe dollar ($) Le reste des lettres, chiffres, (_), ou $ Mots clé réservés Certain identifiants sont réservés comme mot clé Certains sont moins utilisés mais peuvent l’être plus dans les futurs versions break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try class const enum export extends import super class const enum export extends import super Core JavaScript Dates et Times Dans JS l’heure et le temps sont gérés par l’objet Date. Stocké sous forme de timestamp (nombre de millisecondes écoulées depuis le 1er Janvier1970). var maDate = new Date(2010, 0, 1); // Premier jour du premier mois // de 2010 var apres = new Date(2010, 0, 1, // Même jour, à 5:10:30pm, heure 17, 10, 30); locale var mnt = new Date(); // Date et heure actuelles var elapsed = now - then; // La valeur de retour représente la différence en millisecondes apres.getFullYear() // => 2010 apres.getMonth() // => 0: (0:11) apres.getDate() // => Jour du mois 1: (1:31) apres.getDay() // => Jour de la semaine (0:6) 5: zero-based jour 0 représente dimanche. apres.getHours() // => Heure (0:23) 17 apres.getMinutes() // (0:59) apres.getSecondes() // (0:59) apres.getMilliseconds() // (0:999) apres.getTime() // retourne le timestamp de l’objet apres.setTime(timestamp) // modifie l’objet selon letimestamp var maDate = new Date(2010, 0, 1); // Premier jour du premier mois // de 2010 var apres = new Date(2010, 0, 1, // Même jour, à 5:10:30pm, heure 17, 10, 30); locale var mnt = new Date(); // Date et heure actuelles var elapsed = now - then; // La valeur de retour représente la différence en millisecondes apres.getFullYear() // => 2010 apres.getMonth() // => 0: (0:11) apres.getDate() // => Jour du mois 1: (1:31) apres.getDay() // => Jour de la semaine (0:6) 5: zero-based jour 0 représente dimanche. apres.getHours() // => Heure (0:23) 17 apres.getMinutes() // (0:59) apres.getSecondes() // (0:59) apres.getMilliseconds() // (0:999) apres.getTime() // retourne le timestamp de l’objet apres.setTime(timestamp) // modifie l’objet selon letimestamp Core JavaScript Dates et Times setTimout( execFunction, waitingTime, param1,param2,…,paramN) est une fonction qui permet d’exécuter la fonction execFunction après waitingTime milliseconde de son appel. Les paramètres param1, paramN sont les paramètres que nous voulons passer à execFunction (ne marche pas dans les internet explorer <10). Cette fonction retourne un id qui identifie la fonction pour pouvoir l’annuler avec la fonction clearTimout. setInterval( execFunction, intervalTime, param1,param2,…,paramN) est une fonction qui permet d’exécuter la fonction execFunction tout les intervalTime milliseconde à partir de son appel. Les paramètres param1, paramN sont les paramètres que nous voulons passer à execFunction (ne marche pas dans les internet explorer <10). Si La version est inférieur à explorer 10 il suffit d’utiliser une fonction anonyme et dans laquelle on appellera la fonction execFunction. Cette fonction retourne un id qui identifie la fonction pour pouvoir l’annuler avec la fonction clearInterval. Core JavaScript Dates et Times function testTimout() { setTimeout(function () { console.log('Je test le Timout'); },2000); } testTimout();var i=0; testInterval(); function testInterval() { var code =setInterval(function () { if(i<22) { console.log(i); i++ } else{ clearInterval(code); } },100,code); } Core JavaScript Chaines Les chaines en JS peuvent être mises entre ’ ou « Il y a deux types de chaines de caractère, le type primitif et les strings var primitifChaine = « bjr »; var varString = new String(« bjr »); En ECMAScript 5, les chaines peuvent être représentées sur plusieurs lignes en terminant chaque ligne par \ Pour échapper un caractère spécial on utilise \ \n, \’, \t, \\,… La concatenation se fait avec + Pour avoir le nombre de caractère on utilise l’attribut length.  chaine.length Core JavaScript Chaines var s = "hello, world" on déclare une chaine s.charAt(0) "h": premier caractère s.charAt(s.length-1) "d": le dernier caractère s.substring(1,4) "ell": les 2éme 3éme et 4éme caractère. s.slice(1,4) "ell": même résultat s.slice(-3) "rld": le deuxième paramètre peut être négatif ce qui indique qu’on commence par la fin. s.indexOf("l") 2: position de la première occurrence de l, -1 si la chaine ou le caractère n’existe pas. s.lastIndexOf("l") 10: position du dernier caractère ou chaine. s.indexOf("l", 3) 3: position of first "l" at or after 3 s[0] "h" s[s.length-1] "d" s.trim() supprime les blanc à gauche et à droite Core JavaScript Les booléens Deux valeurs true et false Les valeurs évaluées à false sont : undefined, null, 0, -0, NaN, "" Tous le reste est évalué à true Pour convertir un booléen vers un string on peut utiliser le toString() Les opérations sur les booléens && : et || : ou ! : NOT Core JavaScript La conversion de type Deux types de conversion : implicite et explicite Conversion implicite Lorsque JS s’attend à avoir un type particulier, il le convertit automatiquement Pour les numériques, si la conversion n’est pas possible, la variable est convertit en NaN.  Conversion explicite Utilisation de : Boolean(), Number(), String(), Object() Utilisation de + 10 + " objets" // => "10 objets". 10 est converti en une chaine "7" * "4" // => 28: Les chaines sont convertis en un entier var n = 1 - "x"; // => NaN: x ne peut pas être convertit en un entier n + " objets" // => "NaN objets": NaN est convertit en la chaine"NaN" 10 + " objets" // => "10 objets". 10 est converti en une chaine "7" * "4" // => 28: Les chaines sont convertis en un entier var n = 1 - "x"; // => NaN: x ne peut pas être convertit en un entier n + " objets" // => "NaN objets": NaN est convertit en la chaine"NaN" Number("3") // => 3 String(false) // => uploads/s3/ chap3-js.pdf