INF2005– Programmation web– A. Obaid JavaScript. INF2005– Programmation web– A. Obaid JavaScript Langage de programmation du web du côté du client Exécuté.

Présentation au sujet: "INF2005– Programmation web– A. Obaid JavaScript. INF2005– Programmation web– A. Obaid JavaScript Langage de programmation du web du côté du client Exécuté."— Transcription de la présentation:

1 INF2005– Programmation web– A. Obaid JavaScript

2 INF2005– Programmation web– A. Obaid JavaScript Langage de programmation du web du côté du client Exécuté dans un navigateur et (non par un serveur web). C'est un langage basé Objets qui permet de gérer l'interaction entre l'usager et le document HTML Ajoute des fonctions dynamiques à HTML

3 INF2005– Programmation web– A. Obaid JavaScript Il est basé événements (Event-driven): – Permet de manipuler les événements de la souris, les menus déroulants, les messages d'alerte, les fenêtres, les cadres, les données des formulaires, et leur associer des actions ou des fonctions Peut être utilisé pour valider les données fournies par l'usager.

4 INF2005– Programmation web– A. Obaid JavaScript Un script JavaScript figure dans l'élément … Un script doit être déclaré avant d’être utilisé. alert("Bonjour la gang !") js1.html window.location = "http://www.uqam.ca" js2.html

5 INF2005– Programmation web– A. Obaid Placement du script On peut placer l'élément dans: – L'entête le script s'exécute lorsqu'il sera appelé explicitement. – Le corps du document BODY> : le script est exécuté automatiquement, dès la page est chargée. – Dans un fichier externe (.js) function alerter() { alert("Bonjour la gang !" ) }

6 INF2005– Programmation web– A. Obaid Conventions Ne pas utiliser des mots réservés de JavaScript Ne pas utiliser de noms de variables qui commencent par des chiffres Utiliser des noms qui commencent pas des lettres minuscules ou "_" Exemples: – monNomEst – mon_nom_est – _mon_nom_est JavaScript est sensible à la differnce majuscule-minuscule.

7 INF2005– Programmation web– A. Obaid Conventions Les commandes sont séparées par des ; ou des retours à la ligne Un suite de commandes est placée entre { et } Les lignes qui commencent par // sont des commentaires. Un commentaire de bloc est entre /* et */ On devrait mettre tout le script les entre – Les navigateurs qui exécutent JavaScript n'en tiendront pas compte.

8 INF2005– Programmation web– A. Obaid Variables Déclarées avec le mot–clevar Variable globale: accessible de partout dans les scripts dans la page. Variables locales: variables à l'intérieur d’une fonction. Un variable qui est déclaré à l'extérieur d'une fonction et avant la déclaration de celle-ci est considérée comme globale. 8

9 INF2005– Programmation web– A. Obaid Types Les variables et les tableaux ne sont pas typés. On peut savoir le type d’un objet avec la méthode: – typeofnomDeVariable var nouvelle_ligne = " " var fonte=" " var message = "Bonjour la gang !" document.write(message) document.write(nouvelle_ligne) message = "Mon premier exemple en JavaScript!" document.write(fonte) document.write(message) document.write(nouvelle_ligne) js4.html

10 INF2005– Programmation web– A. Obaid Fonctions Déclarées à l'aide du mot-clé function() : – functionmaFonction(par1, par2, …) { … code de la fonction … } On invoque la fonction avec son nom et sa liste d'arguments entre parenthèses: – Exemple: maFonction(x, y, …)

11 INF2005– Programmation web– A. Obaid Importer un programme JavaScript On peut importer un programme avec l'élément et l'attribut src. Le fichier JavaScript a l’ extension.js: – function alerte() { alert("Bonjour la gang !") } monJS.js

12 INF2005– Programmation web– A. Obaid Expressions JavaScript possède pratiquement les mêmes opérateurs que les langages classiques. Expressions arithmétiques: +, -, *, /, % (Modulo). Expressions logiques: ==, !=,, = Commandes abrégées à la C: +=, -=,.=, ++, --, etc.

13 INF2005– Programmation web– A. Obaid Commandes JavaScript Il y a plusieurs types d'instructions: – Les conditions – Les boucles – Manipulation d'objets – Gestion des exceptions – …

14 INF2005– Programmation web– A. Obaid Conditions JavaScript offre les conditions classiques avec les opérateurs ET (&&), OU (||) et la négation (!). Elles ramènent la valeur vrai (true) ou faux (false). Il existe aussi des opérateurs bit-à-bit (&, |).

15 INF2005– Programmation web– A. Obaid La commande if Elle a plusieurs formats: – if (condition) {commandes;} – if (condition) {commandes1;} else{commandes2;} – If (condition1) {commandes1;} elseif (condition2) {commandes2;} else if (condition3) {commandes3;} …. else{commandes3;}

16 INF2005– Programmation web– A. Obaid La commande switch Permet de sélectionner, selon le résultat de la condition, un bloc de commandes à exécuter var programme="…" switch (programme){ case "Bacc": alert("Je connais déjà tout !") break; case "Certificat": alert("Je connais ce qu'il faut !") break; case "Maitrise": alert("Je veux connaitre encore plus !" ) break; case "Doctorat": alert("Je cherche à mieux connaitre !") break; default : alert("Je ne suis plus ou j'en suis !"); } js5.html

17 INF2005– Programmation web– A. Obaid La commande if var nombre =..; var reference-..; if(nombre == reference){ document.write("Gagne !"); } var nombre =...; var reference =...; if(nombre == reference) { document.write("Gagne !"); } else { document.write("Perdu !"); } var nombre =...; var reference =...; if(nombre == reference) { document.write("Gagne !"); } else if (nombre < reference) { document.write("Tu geles !"); } else { document.write("Tu brules !"); }

18 INF2005– Programmation web– A. Obaid La boucle while Elle permet l'exécution en boucle de commandes tant qu'une condition est vérifiée: while(condition){ commandes } var i = 0; while(i < 10){ document.write("La valeur de i est: " + i); document.write(" "); i++; } js6.html

19 INF2005– Programmation web– A. Obaid La boucle for Exécute des commandes en boucle un certaine nombre de fois (tant qu'une condition est vraie): for(initialisation; condition d'arrêt; incrémentation) { Commandes } document.write(" Carres successifs: "); document.write(" "); document.write(" Valeur de i Carre "); for (i=0;i<=10;i++){ document.write(" "); document.write(" " + i+" ",i*i+" "); } document.write(" "); Js7.html

20 INF2005– Programmation web– A. Obaid La boucle for…in Permet de boucler sur un ensemble de données. – L'ensemble peut être les éléments d'un tableau (en particulier associatifs) for (variable in ensemble) { commandes } var Langages = new Array("C++", "Java", "JavaScript", "C#", "Perl"); for (i in Langages) { document.write(Langages[i] + " "); }

21 INF2005– Programmation web– A. Obaid Le commande break La commande break permet de sortir d'une boucle. – Si une condition est vérifiée var sortie=4; document.write(" Carres successifs: ");... for (i=0;i<=10;i++) { if (i==sortie) {break;} document.write(" "); document.write(" " + i+" ",i*i+" "); } …

22 INF2005– Programmation web– A. Obaid Programmation par événements Les événements sont activés par l'usager. JavaScript permet de leur attacher des actions (fonctions) appelées Eventhandlers. Il existe plusieurs types d'événements: – Clic de la souris – Chargement de la page – Souris passant au dessus d'un objet. – Modification du contenu d'un formulaire – Sélection d'un texte dans un formulaire – Soumission d'un formulaire – Etc.

23 INF2005– Programmation web– A. Obaid Programmation par événements function popup() {,,, code … } js3.html

24 INF2005– Programmation web– A. Obaid Les événements onClick: Clic de la souris onBlur : Un élément perd le focus onChange : Le contenu d'un champs modifié onDblclick: Double clic de la souris onError: Erreur de chargement onFocus: Focus sur un élément onKeydown: Touche de clavier pressée Onkeypress: Touche maintenue pressée

25 INF2005– Programmation web– A. Obaid Les événements onKeyup: Touche de clavier relâchée onMousedown : Souris pressée onMousemove : Souris se déplace onMouseout : Souris quitte une élément onMouseover : Souris par-dessus un objet onMouseout : Souris quitte un objet onResize: Fenêtre ou cadre réajusté onSelect: Texte sélectionné onUnload: Page quittée

26 INF2005– Programmation web– A. Obaid Utilisation des événements onLoad et onUnloadsont utilisés notamment pour: – vérifier le type de navigateur et afficher des informations. – générer des cookies pour identifier les visiteurs d'une page – activer des fonctions initialisantes. onFocus, onBlur et onChange sont utilisés pour: – valider les données soumises dans des champs des formulaires.

27 INF2005– Programmation web– A. Obaid Utilisation des événements onSubmitutilisé notamment pour – valider l'ensemble les données soumises dans un formulaire onMouseOveret onMouseOut sont utilisés notamment pour – animer des objets tels que les boutons de navigation function alarme1() { alert("Bonjour. Que me veux-tu ?") ; } function alarme2() { alert("Bye Bye. A la prochaine visite?") ; } … Passez par la ! … js9.html

28 INF2005– Programmation web– A. Obaid Les tableaux Un tableau est une variable composée de variables élémentaires. Chaque élément est spécifié par son indice dans le tableau. – Le premier élément possède l’indice 0. En JavaScript, les tableaux ne sont pas typés. – Le type de chaque élément est déterminé automatiquement dès son affectation.

29 INF2005– Programmation web– A. Obaid Les tableaux Les déclarations de font de plusieurs façons. Exemples: – var monTablo=new Array(): Taille non spécifiée. – varmonTablo=[v1,v2,…,…]: Tableau rempli de v1, v2, … On peut remplir les tableaux de données de différents types! var tabloNotes= new Array(1,2,3); function afficher(n) { document.write(tabloNotes[n]+""); } … … js10.html

30 INF2005– Programmation web– A. Obaid Les tableaux Exemples: – var Notes=[85,92,75,65]; – var Langages=new Array("C", "Java","JavaScript"); – var Mixte=new Array[1988, "Male", "jeune", 22]; On accède aux éléments grâce à leurs indices. – tabloNotes[6]=89; – document.write("Premier element: "+ tableauNotes[0]); – tabloMixte[0][1]= 21; – document.write("Ligne 3–colonne 2 :"+ tabloMixte[3][2]);

31 INF2005– Programmation web– A. Obaid Les tableaux var tabloNotes=new Array(85, 92, 75, 65); function note(n) { alert(tabloNotes[n] + ""); } Vas y var i; var Langages = new Array("C++", "Java", "JavaScript", "C#", "Perl", "Python"); for (i in Langages) { document.write(Langages[i] + " "); } js1_1.html js1_2.html

32 INF2005– Programmation web– A. Obaid Les tableaux var nom="Java"; var Langages = new Array("C++", "Java", "JavaScript", "C#", "Perl", "Python"); for (i=0; i<6; i++) { if (nom==Langages[i]) { document.write(i+" : " + Langages[i] + " "); } js1_3.html

33 INF2005– Programmation web– A. Obaid Tableaux associatifs Tableaux dont les éléments sont accessibles grâce à des noms utilisés comme clés (au lieu des indices). Utilisés pour faire des associations – Les déclarations et les accès se font en associant les clés aux éléments du tableau. Saison Ete Bleu Vendredi Bleu Couleur Jour Musique Clés Éléments

34 INF2005– Programmation web– A. Obaid Tableaux associatifs Exemples: – var Preferences = []; – Preferences["Saison"] = "Eté"; – Preferences["Couleur"] = "Bleu"; – Preferences["Jour"] = "Vendredi"; – Preferences["Musique"] = "Jazz"; – document.write("Cle:"+"Saison ", +" Valeur:"+Preferences["Saison"]);

35 INF2005– Programmation web– A. Obaid Tableaux associatifs var Preferences = []; Preferences["Saison"] ="Ete"; Preferences["Couleur"] = "Bleu"; Preferences["Jour"] = "Vendredi"; Preferences["Musique"] = "Jazz"; document.write(" "); document.write(" Cle Valeur"); for (i in Preferences ) { document.write(" "+i+ " "+Preferences[i]); } document.write(" "); js_1_4.html

36 INF2005– Programmation web– A. Obaid Les objets Java offre plusieurs objets: – Du langage: Date, Array, Boolean, Math, Number, Object, String – De programmation du client web (DOM, voir plus loin !): Anchor, Document, Event, Form, Frame, History, Image, Location, Navigator, window, etc. Chacun de ces objets offre des propriétés et des méthodes propres. – Ex: L'objet Window a les propriétés: close, history,... et les méthodes: close(), open(), alert(),…

37 INF2005– Programmation web– A. Obaid Objet Array En tant qu'objets les tableaux possèdent plusieurs propriétés et méthodes Propriété: – length : nombre d'éléments dans le tableau. Méthodes: – join(): liste des élément du tableau. – pop() : enlève et retourne le dernier élément du tableau. – shift() : enlève et retourne le premier élément du tableau. – slice(debut, fin) : sous-tableau débutant à debut et se terminant à fin.

38 INF2005– Programmation web– A. Obaid Objets tableaux Méthodes: – splice(debut, n): enlève n éléments à partir du début. – concat(): fait une jointure de deux tableaux. – join() : concatène les éléments du tableau et forme une chaine de caractères. – reverse(): renverse l'ordre des éléments. – sort() : trie les élément du tableau. – toString() : convertit un tableau en chaine. – unshift(): ajoute un élément au début d'un tableau.

39 INF2005– Programmation web– A. Obaid L'objet Date Utilisé pour les opérations de date et de temps. Méthodes: – getDate(): le jour du mois (1-31). – getDay() : le jour de la semaine (0-6). – getFullYear() : l'année. – getHours() : l'heure (0-23). – getSeconds() : les secondes (0-59). – getTime() : nombre de ms depuis 01/01/1970. varuneDate=new Date(); document.write("Date du jour: "+ uneDate + " "); document.write("Millisecondes: " + uneDate.getTime() + " "); document.write("Le jour: " + uneDate.getDay()+ " "); document.write("L\'annee: " +uneDate.getFullYear()+ " "); js_2_1.html

40 INF2005– Programmation web– A. Obaid L'objet String Propriété: – length : longueur de la chaine. Méthodes : – charAt() : caractère se trouvant à une position donnée. – concat() : concatène deux chaines. – indexOf() : indice de la première occurrence d'un sous- chaine. – replace() : remplace une sous-chaine par une autre – slice() : extrait une sous-chaine d'une chaine. – split() : divise une chaine en tableau de sous-chaines.

41 INF2005– Programmation web– A. Obaid L'objet String Méthodes : – substr() : extrait uns sous-chaine. – toLowerCase() : convertit une chaine a minuscules – toUpperCase() : convertit une chaine a majuscules – valueOf() : valeur numérique d'une chaine – … Méthodes de formatage : – big(), blink(), bold(), fontcolor(), fontsize(), italics(), sub(), sup(), …

42 INF2005– Programmation web– A. Obaid L'objet String var texte = "Lorem ipsum dolor sit amet !"; document.write(texte.length + " "); document.write(texte.big()+ " "); document.write(texte.strike()+ " "); document.write(texte.bold()+ " "); document.write(texte + texte.sub()); document.write(texte + texte.sup() + " "); document.write(texte.fontcolor("red") + " "); document.write(texte.replace("ipsum dolor","texte bidon")+ " "); document.write(texte.toLowerCase() + " "); document.write(texte.toUpperCase()+ " "); document.write(texte.slice(4,12)+" ") document.write(texte.split("m") + " "); js_2_2.html

43 INF2005– Programmation web– A. Obaid Les expressions régulières Un patron (pattern) qui exprime une combinaison de caractères construite avec des opérateurs spécifiques. Si r, r1 et r2 sont expressions regulieres, alors: – r* séquence (éventuellement vide) de répétitions de r. – r+ une séquence non vide de répétitions de r. – r? : avoir ou de ne pas avoir r. – r{n} : n répétitions de l'expression r. – r{n,} : au moins n répétitions de l'expression r. – r{n, m}: un nombre entre n et m d’occurrences de r. – r1 | r2 : le choix entre les deux expressions r1 et r2. 43

44 INF2005– Programmation web– A. Obaid Les expressions régulières. : n'importe quel caractère; $ : la fin d'un texte; ^ : début d'un texte; [abcd...] : un caractère parmi a, b, c, … ; [a-z] : un intervalle de lettres entre a et z. \c : représente n'importe quel caractère [^abcd…] : tout caractère différent de a, b, c,… \d : un chiffre (de 0 à 9 \D : un non chiffre \w : un mot (i.e. caractères se trouvant entre deux espaces). \s: un caractère d'espacement (i.e. espace, \t, \n, \r ou \f). \S : un non espacement 44

45 INF2005– Programmation web– A. Obaid Les expressions régulières /./ N'importe quel caractère. /.c/ Lettre c en deuxième position /abd[eu]l/: abdel ou abdul. /c[aoieu]p/: Mot qui commence par c et se termine par p avec une voyelle entre les deux : cap, cop, cip, cep, cup. /[a-z][0 -9]/: lettre minuscule suivie d'un chiffre. /[^0-9][a-zA-Z0-9]/ : Deux caractères dont le premier n'est pas un chiffre. /professeure?/: professeur ou professeure. /hola+/: hola, holaa, holaaa, holaaaa,…. /\d{3}/: excactement 3 chiffres /\d{3,5}/: excactement 3, 4 ou 5 chiffres /([Ee])nergie&\1lectrique/: EnergieElectrique ou energieelectrique. /$e.*e^/: Un texte qui commence et se termine avec la lettre e. \[[0-9]+\]: Toute suite de chiffres qui se trouvent entre [ et ]. \((\d{3})\)\s+(\d{3})-(\d{4}) : un numéro de téléphone. 45

46 INF2005– Programmation web– A. Obaid Utilisation des expressions régulières La méthode RegExp() déclare une ER: – var vExpression = new RegExp(patron, attributs); On peut également utiliser : – var vExpression = /patron/attributs; attributs: optionnel. Formé d'une combinaison d’une ou plusieurs des options suivantes: – g : Si plusieurs sous-chaines satisfont le patron, elles sont toutes retournées dans un tableau – i: ne pas tenir compte de la différence majuscule/minuscule; 46

47 INF2005– Programmation web– A. Obaid Utilisation des expressions régulières Chaine.match(ExpReg): – retourne une sous-chaine ou un ensemble de sous-chaines de Chaine qui satisfont le patron ExpReg. ExpReg.test(chaine) : – cherche si Chaine satisfait l' expression ExpReg. Elle retourne true si oui et false sinon. … 47

48 INF2005– Programmation web– A. Obaid Utilisation des expressions regulieres 48 var chaine="Un et un font deux et jamais deux sans trois "; varresultat; varexpReg = new RegExp("deux","g"); resultat = chaine.match(expReg); document.write("Resultat: "+ resultat+" "); expReg = new RegExp("un","g"); resultat = chaine.match(expReg); document.write("Resultat: "+ resultat+" "); expReg = new RegExp("un","gi"); resultat = chaine.match(expReg); document.write("Resultat: "+ resultat+" ");