docJavaScript - LabUnix
download 
Plainte Transcription
JavaScript - LabUnix
2/11/16 JavaScript INF2005– Programma2on web– A. Obaid JavaScript • Langage de programma2on 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'interac2on entre l'usager et le document HTML • Ajoute des fonc2ons dynamiques à HTML INF2005– Programma2on web– A. Obaid 1 2/11/16 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 ac2ons ou des fonc2ons • Peut être u2lisé pour valider les données fournies par l'usager. INF2005– Programma2on web– A. Obaid JavaScript • Un script JavaScript figure dans l'élément <SCRIPT>…</SCRIPT> • Un script doit être déclaré avant d’être u2lisé. js1.html <html> <body> <script type="text/JavaScript"> alert("Bonjour la gang !") </script> </body> </html> js2.html <html> <body> <script type="text/JavaScript"> window.loca2on = "hep://www.uqam.ca" </script> </body> </html> INF2005– Programma2on web– A. Obaid 2 2/11/16 Placement du script • On peut placer l'élément <SCRIPT> dans: – L'entête < HEAD >: le script s'exécute lorsqu'appelé. – Le corps du document BODY> : le script s'exécuté automa2quement dès que la page est chargée. – Dans un fichier externe (.js) <script src="myscripts.js"> </script> INF2005– Programma2on web– A. Obaid <html> <head> <script > func2on alerter() { alert("Bonjour la gang !" ) } </script> </head> <body> <input type="bueon" onclick="alerter()" value="popup"> </body> </html> Conven2ons • Ne pas u2liser des mots réservés de JavaScript • Ne pas u2liser de noms de variables qui commencent par des chiffres • U2liser des noms qui commencent pas des leeres minuscules ou "_" • Exemples: – monNomEst – mon_nom_est – _mon_nom_est • JavaScript est sensible à la differnce majuscule-‐minuscule. INF2005– Programma2on web– A. Obaid 3 2/11/16 Conven2ons • 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 meere tout le script les entre <!-‐-‐ et -‐-‐> – Les navigateurs qui exécutent JavaScript n'en 2endront pas compte. INF2005– Programma2on web– A. Obaid Variables • Déclarées avec le mot–clé var • Variable globale: accessible de partout dans les scripts dans la page. • Variables locales: variables à l'intérieur d’une fonc2on. • Un variable qui est déclaré à l'extérieur d'une fonc2on et avant la déclara2on de celle-‐ci est considérée comme globale. INF2005– Programma2on web– A. Obaid 8 4 2/11/16 Types • Les variables et les tableaux ne sont pas typés. • On peut savoir le type d’un objet avec la méthode: – typeof nomDeVariable js4.html <script type="text/JavaScript"> var nouvelle_ligne = "<br />" var fonte="<font color\=red>" 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) </script> INF2005– Programma2on web– A. Obaid Fonc2ons • Déclarées à l'aide du mot-‐clé func6on() : – func6onmaFonc6on(par1, par2, …) { … code de la fonc6on … } • On invoque la fonc2on avec son nom et sa liste d'arguments entre parenthèses: – Exemple: maFonc6on(x, y, …) INF2005– Programma2on web– A. Obaid 5 2/11/16 Importer un programme JavaScript • On peut importer un programme avec l'élément <SCRIPT> et l'aeribut src. • Le fichier JavaScript a l’ extension .js: – <SCRIPT src="monProg.js"></SCRPIT> <html> <head> <script src="monJS.js"></script></head> <body> <input type="bueon" onclick="alerte()" value="Executer!"> </body> </html> monJS.js func2on alerte() { alert("Bonjour la gang !") } INF2005– Programma2on web– A. Obaid Expressions • JavaScript possède pra2quement les mêmes opérateurs que les langages classiques. • Expressions arithmé2ques: • +, -‐, *, /, % (Modulo). • Expressions logiques: • ==, != , < , >, <= , >= • Commandes abrégées à la C: • +=, -‐=, .=, ++, -‐-‐, etc. INF2005– Programma2on web– A. Obaid 6 2/11/16 Commandes JavaScript • Il y a plusieurs types d'instruc2ons: – Les condi2ons – Les boucles – Manipula2on d'objets – Ges2on des excep2ons – … INF2005– Programma2on web– A. Obaid Condi2ons • JavaScript offre les condi2ons classiques avec les opérateurs ET (&&), OU (||) et la néga2on (!). • Elles ramènent la valeur vrai (true) ou faux (false). • Il existe aussi des opérateurs bit-‐à-‐bit (&, |). INF2005– Programma2on web– A. Obaid 7 2/11/16 La commande if • Elle a plusieurs formats: – if (condi2on) {commandes;} – if (condi2on) {commandes1;} else{commandes2;} – If (condi2on1) {commandes1;} elseif (condi2on2) {commandes2;} else if (condi2on3) {commandes3;} …. else{commandes3;} INF2005– Programma2on web– A. Obaid La commande switch • Permet de sélec2onner, selon le résultat de la condi2on, un bloc de commandes à exécuter var programme="…" switch (programme){ case "Bacc": alert("Je connais déjà tout !") break; case "Cer2ficat": alert("Je connais ce qu'il faut !") break; case "Maitrise": alert("Je veux connaitre encore plus !" ) break; js5.html case "Doctorat": alert("Je cherche à mieux connaitre !") break; default : alert("Je ne suis plus ou j'en suis !"); } INF2005– Programma2on web– A. Obaid 8 2/11/16 La commande if <script type="text/javascript"> var nombre = ..; var reference-‐..; if(nombre == reference){ document.write("Gagne !"); } </script> <script type="text/javascript"> var nombre = ...; var reference = ...; if(nombre == reference) { document.write("Gagne !"); } else if (nombre < reference) { document.write("Tu geles !"); } else { document.write("Tu brules !"); } </script> <script type="text/javascript"> var nombre = ...; var reference = ...; if(nombre == reference) { document.write("Gagne !"); } else { document.write("Perdu !"); } </script> INF2005– Programma2on web– A. Obaid La boucle while • Elle permet l'exécu2on en boucle de commandes tant qu'une condi2on est vérifiée: while(condi6on){ commandes } <script type="text/javascript"> var i = 0; while(i < 10){ document.write("La valeur de i est: " + i); document.write("<br />"); i++; } </script> js6.html INF2005– Programma2on web– A. Obaid 9 2/11/16 La boucle for • Exécute des commandes en boucle un certaine nombre de fois (tant qu'une condi2on est vraie): for(ini6alisa6on; condi6on d'arrêt; incrémenta6on) { Commandes <script type="text/javascript"> } document.write("<b> Carres successifs: </b>"); document.write("<table border=1>"); document.write("<th> Valeur de i</th><th> Carre</th>"); for (i=0;i<=10;i++){ document.write("<tr>"); document.write("<td>" + i+"</td><td>",i*i+"</td>"); } document.write("</table>"); </script> Js7.html INF2005– Programma2on 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 par2culier associa2fs) for (variable in ensemble) { commandes } var Langages = new Array("C++", "Java", "JavaScript", "C#", "Perl"); for (i in Langages) { document.write(Langages[i] + "<hr />"); } INF2005– Programma2on web– A. Obaid 10 2/11/16 Le commande break • La commande break permet de sor2r d'une boucle. – Si une condi2on est vérifiée <script type="text/javascript"> var sor2e=4; document.write("<b> Carres successifs: </b>"); ... for (i=0;i<=10;i++) { if (i==sor2e) {break;} document.write("<tr>"); document.write("<td>" + i+"</td><td>",i*i+"</td>"); } … </script> INF2005– Programma2on web– A. Obaid Programma2on par événements • Les événements sont ac2vés par l'usager. • JavaScript permet de leur aeacher des ac2ons (fonc2ons) 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. Modifica2on du contenu d'un formulaire Sélec2on d'un texte dans un formulaire Soumission d'un formulaire Etc. INF2005– Programma2on web– A. Obaid 11 2/11/16 Programma2on par événements <html> <head> <script language=“javascript”> func2on popup() { ,,, code … } </script> </head> <body> <img src=“pic.gif” onClick=“popup();”></body> </html> js3.html INF2005– Programma2on web– A. Obaid Les événements •
•
•
•
•
•
•
•
onClick: onBlur : onChange : onDblclick : onError: onFocus: onKeydown: Onkeypress: Clic de la souris Un élément perd le focus Le contenu d'un champs modifié Double clic de la souris Erreur de chargement Focus sur un élément Touche de clavier pressée Touche maintenue pressée INF2005– Programma2on web– A. Obaid 12 2/11/16 Les événements •
•
•
•
•
•
•
•
•
onKeyup : Touche de clavier relâchée onMousedown : Souris pressée onMousemove : Souris se déplace onMouseout : Souris quiee une élément onMouseover : Souris par-‐dessus un objet onMouseout : Souris quiee un objet onResize : Fenêtre ou cadre réajusté onSelect : Texte sélec2onné onUnload : Page quieée INF2005– Programma2on web– A. Obaid U2lisa2on des événements • onLoad et onUnloadsont u2lisés notamment pour: – vérifier le type de navigateur et afficher des informa2ons. – générer des cookies pour iden2fier les visiteurs d'une page – ac2ver des fonc2ons ini2alisantes. • onFocus, onBlur et onChange sont u2lisés pour: – valider les données soumises dans des champs des formulaires. INF2005– Programma2on web– A. Obaid 13 2/11/16 U2lisa2on des événements • onSubmitu2lisé notamment pour – valider l'ensemble les données soumises dans un formulaire • onMouseOveret onMouseOut sont u2lisés notamment pour – animer des objets tels que les boutons de naviga2on <script type="text/javascript"> func2on alarme1() { alert("Bonjour. Que me veux-‐tu ?") ; } func2on alarme2() { alert("Bye Bye. A la prochaine visite?") ; } </script> … <form> <input type="bueon" value="Appuyez ici" onClick="alarme1()"><br/> <a href="#" onmouseover="" onMouseout="alarme2()" > Passez par la ! </a> </form> … js9.html INF2005– Programma2on 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é automa2quement dès son affecta2on. INF2005– Programma2on web– A. Obaid 14 2/11/16 Les tableaux • Les déclara2ons 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! js10.html var tabloNotes= new Array(1,2,3); func2on afficher(n) { document.write(tabloNotes[n]+""); } … <input type="bueon" value="Appuyez ici" onClick="afficher(3)"><br/> … INF2005– Programma2on 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]); INF2005– Programma2on web– A. Obaid 15 2/11/16 Les tableaux <html> <head> <script type="text/javascript"> var tabloNotes=new Array(85, 92, 75, 65); func2on note(n) { alert(tabloNotes[n] + ""); } </script> </head> <body> <a href="" onclick="note(2);"> Vas y </a> </body> </html> js1_1.html <html> <body> <script type="text/javascript"> var i; var Langages = new Array("C++", "Java", "JavaScript", "C#", "Perl", "Python"); for (i in Langages) { document.write(Langages[i] + "<hr />"); } </script> </body> </html> js1_2.html INF2005– Programma2on web– A. Obaid Les tableaux <html> <body> <script type="text/javascript"> 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] + "<hr />"); } } </script> </body> </html> js1_3.html INF2005– Programma2on web– A. Obaid 16 2/11/16 Tableaux associa2fs • Tableaux dont les éléments sont accessibles grâce à des noms u2lisés comme clés (au lieu des indices). • U2lisés pour faire des associa2ons – Les déclara2ons et les accès se font en associant les clés aux éléments du tableau. Saison Couleur Clés Ete Bleu Jour Vendredi Musique Bleu Éléments INF2005– Programma2on web– A. Obaid Tableaux associa2fs •
Exemples: –
–
–
–
–
–
var Preferences = []; Preferences["Saison"] = "Eté"; Preferences["Couleur"] = "Bleu"; Preferences["Jour"] = "Vendredi"; Preferences["Musique"] = "Jazz"; document.write("Cle:"+"Saison ", +" Valeur:"+Preferences["Saison"]); INF2005– Programma2on web– A. Obaid 17 2/11/16 Tableaux associa2fs <body> <script type="text/javascript"> var Preferences = []; Preferences["Saison"] ="Ete"; Preferences["Couleur"] = "Bleu"; Preferences["Jour"] = "Vendredi"; Preferences["Musique"] = "Jazz"; document.write("<table border=1>"); document.write("<th> Cle <th> Valeur"); for (i in Preferences ) { document.write("<tr><td>"+i+ "<td>"+Preferences[i]); } document.write("</table>"); js_1_4.html </script> </body> INF2005– Programma2on web– A. Obaid Les objets • Java offre plusieurs objets: – Du langage: • Date, Array, Boolean, Math, Number, Object, String – De programma2on du client web (DOM, voir plus loin !): • Anchor, Document, Event, Form, Frame, History, Image, Loca2on, 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(),… INF2005– Programma2on web– A. Obaid 18 2/11/16 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. – shi`() : enlève et retourne le premier élément du tableau. – slice(debut, fin) : sous-‐tableau débutant à debut et se terminant à fin. INF2005– Programma2on web– A. Obaid Objets tableaux • Méthodes: – splice(debut, n): enlève n éléments à par2r 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() : conver2t un tableau en chaine. – unshiŠ(): ajoute un élément au début d'un tableau. INF2005– Programma2on web– A. Obaid 19 2/11/16 L'objet Date • U2lisé pour les opéra2ons 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. js_2_1.html INF2005– Programma2on web– A. Obaid <script> var uneDate=new Date(); document.write("Date du jour: "+ uneDate + "<br />"); document.write("Millisecondes: " + uneDate.getTime() + "<br />"); document.write("Le jour: " + uneDate.getDay()+ "<br />"); document.write("L\'annee: " +uneDate.getFullYear()+ "<br />"); </script> L'objet String • Propriété: – length : longueur de la chaine. • Méthodes : – charAt() : caractère se trouvant à une posi2on 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. INF2005– Programma2on web– A. Obaid 20 2/11/16 L'objet String • Méthodes : – substr() : extrait uns sous-‐chaine. – toLowerCase() : conver2t une chaine a minuscules – toUpperCase() : conver2t une chaine a majuscules – valueOf() : valeur numérique d'une chaine – … • Méthodes de formatage : – big(), blink(), bold(), fontcolor(), fontsize(), italics(), sub
(), sup(), … INF2005– Programma2on web– A. Obaid L'objet String <html> <body> <script type="text/javascript"> var texte = "Lorem ipsum dolor sit amet !"; js_2_2.html document.write(texte.length + "<br />"); document.write(texte.big()+ "<br />"); document.write(texte.strike()+ "<br />"); document.write(texte.bold()+ "<br />"); document.write(texte + texte.sub()); document.write(texte + texte.sup() + "<br />"); document.write(texte.fontcolor("red") + "<br />"); document.write(texte.replace("ipsum dolor","texte bidon")+ "<br />"); document.write(texte.toLowerCase() + "<br />"); document.write(texte.toUpperCase()+ "<br />"); document.write(texte.slice(4,12)+"<br />") document.write(texte.split("m") + "<br />"); </script> </body> </html> INF2005– Programma2on web– A. Obaid 21 2/11/16 Les expressions régulières • Un patron (paeern) 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é22ons de r. r+ une séquence non vide de répé22ons de r. r? : avoir ou de ne pas avoir r. r{n} : n répé22ons de l'expression r. r{n,} : au moins n répé22ons 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. INF2005– Programma2on web– A. Obaid 43 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 leeres 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 INF2005– Programma2on web– A. Obaid 44 22 2/11/16 Les expressions régulières •
•
•
•
•
•
•
•
•
•
•
•
•
•
/./ N'importe quel caractère. /.c/ Leere c en deuxième posi2on /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]/: leere 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 leere 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. INF2005– Programma2on web– A. Obaid 45 U2lisa2on des expressions régulières • La méthode RegExp() déclare une ER: – var vExpression = new RegExp(patron, aeributs); • On peut également u2liser : – var vExpression = /patron/aeributs; • aeributs: op2onnel. Formé d'une combinaison d’une ou plusieurs des op2ons suivantes: – g : Si plusieurs sous-‐chaines sa2sfont le patron, elles sont toutes retournées dans un tableau – i: ne pas tenir compte de la différence majuscule/
minuscule; INF2005– Programma2on web– A. Obaid 46 23 2/11/16 U2lisa2on des expressions régulières • Chaine.match(ExpReg): – retourne une sous-‐chaine ou un ensemble de sous-‐chaines de Chaine qui sa2sfont le patron ExpReg. • ExpReg.test(chaine) : – cherche si Chaine sa2sfait l' expression ExpReg. Elle retourne true si oui et false sinon. • … INF2005– Programma2on web– A. Obaid 47 U2lisa2on des expressions regulieres <body>
<script type="text/javascript">
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+"<br>");
expReg = new RegExp("un","g");
resultat = chaine.match(expReg);
document.write("Resultat: "+ resultat+"<br>");
expReg = new RegExp("un","gi");
resultat = chaine.match(expReg);
document.write("Resultat: "+ resultat+"<br>");
</script>
</body>
INF2005– Programma2on web– A. Obaid 48 24 2/11/16 L'objet Math • Objet qui offre des fonc2ons et des constantes mathéma2ques. • Exemples: – var nombre=Math.rand(); Génère un nombre aléatoire entre 0 et 1. – var angle=Math.PI /2 – var s=Math.sin(angle) – var x= Math.E : constante népérienne ( 2.718). – var y= Math.LN2 : log de 2 (0.693). – Math.ceil(x) : plafond – Math.floor(x) : plancher. INF2005– Programma2on web– A. Obaid 49 L'objet window • Objet de manipula2on des fenêtres du navigateur. • Méthodes: – alert() : ouvre une fenêtre de message. – close() : fermeture de la fenêtre courante. – confirm() : ouvre une fenêtre de confirma2on avec boutons OK et Cancel. – prompt() : permet d'enter des données. – focus() : met le focus sur la fenêtre (i.e. la met à l'avant). INF2005– Programma2on web– A. Obaid 25 2/11/16 L'objet window • Méthodes – moveBy() : déplace la fenêtre par rapport à sa posi2on courante. – moveTo() : déplace la fenêtre à une posi2on donnée. – open() : ouvre une nouvelle fenêtre. – resizeBy() : change la taille de la fenêtre. – resizeTo() : change la taille de la fenêtre – print() : imprime le contenu de la fenêtre. js2_3.html <body> <script type="text/javascript"> document.write("<h2> Exemple de referencement de fenetre </h2>"); document.write("Je suis la fenetre originale "); var fenetre1 = window.open("hep://www.google.com"); fenetre1.opener=self; </script> </body> INF2005– Programma2on web– A. Obaid L'objet window <html> <head> <script type="text/javascript"> func2on ouvrirFenetre(){ fenetre=window.open('','','width=400,height=200'); fenetre.document.write("<h3>Unenouvelelfenetreestcreee</h3>"); fenetre.document.write("<a href=''>Un lien estcree</a>"); fenetre.focus(); } func2on fermerFenetre() {fenetre.close(); } func2on deplacerFenetre() {fenetre.moveBy(-‐100,-‐200); fenetre.focus();} </script> </head> <body> <input type="bueon" value="Ouvrir" onclick="ouvrirFenetre()" /> <input type="bueon" value="Fermer" onclick="fermerFenetre()" /> <input type="bueon" value="Deplacer" onclick="deplacerFenetre()" /> </body> <script type="text/javascript"> </html> func2on ouvrirFenetre(){ js2_4.html fenetre=window.open('hep://www.google.com','','width=400,height=200'); } func2on fermerFenetre() { fenetre.close() } </script> … <input type="bueon" value="Ouvrir" onclick="ouvrirFenetre()" /> <input type="bueon" value="Fermer" onclick="fermerFenetre()" /> … INF2005– Programma2on web– A. Obaid 26 2/11/16 Ouverture d'une fenêtre • Pour l'ouverture, on u2lise la méthode open(): – window.open(URL,nom,specs) • URL: indique l'URL du contenu de la fenêtre créée. Si l'URL est vide, une fenêtre vide est créée. • nom : nom donné à la fenêtre ou son target _blank, _parent, _self, _top) • specs: combinaison de plusieurs op2ons d'affichage. • On peut ouvrir plusieurs fenêtres dans un script – Ne pas en abuser ! INF2005– Programma2on web– A. Obaid Op2ons d'affichage • Spécifica2ons des affichages: – fullscreen=yes|no – height=n : hauteur en pixels – leŠ=n: posi2on gauche de la fenêtre – loca2on=yes|no: affichage de l'URL – menubar=yes|no: affichage du menu – resizable=yes|no: op2on de redimensionnement de la fenêtre. • Dépendent des navigateurs !!! INF2005– Programma2on web– A. Obaid 27 2/11/16 Op2ons d'affichage • Spécifica2ons des affichages: – scrollbars=yes|no: affichage de la barre de défilement. – status=yes|no: barre d'état en bas de la fenêtre – 2tlebar=yes|no|1|0: affichage de la barre du 2tre – toolbar=yes|no|1|0: Affichage de la barre des ou2ls – width=n : Largeur en pixels … func2on ouvrirFenetre(){ fenetre=window.open('hep://www.google.com',"_blank", "resizable=no,status=yes,menubar=no,width=200,height=200"); fenetre.focus(); } … INF2005– Programma2on web– A. Obaid Les alertes • Une pe2te fenêtre contenant un message. • U2lisée pour envoyer un message d'aver2ssement. • Créé avec la fonc2on alert(): – alert('Vous devez entrer votre nom!'); js_m_1.html <html> <head> <script language=“javascript”> func2on messageCookies(message) { window.alert(message); } </script> </head> <body onload=“messageCookies(‘Vous devez ac2ver les cookies!');”> … INF2005– Programma2on web– A. Obaid 28 2/11/16 Propriétés de Window •
•
•
•
•
•
•
•
•
•
•
•
Closed: Indique si la fenêtre est fermée. Document: document de la fenêtre Frames: Tableau des cadre (frames) dans le document. History: Historique de la fenêtre Loca2on: Emplacement (URL) de la fenêtre Name: Nom de la fenêtre Navigator: Type de navigateur. Opener: Fenêtre qui a créé la fenêtre courante Parent: Parent de la fenêtre Self: La fenêtre elle -‐même Status: Barre d'état de la fenêtre Top: Fenêtre de plus haut niveau. INF2005– Programma2on web– A. Obaid Propriétés de window <script type="text/javascript"> … func2on fermerFenetre() { if (!fenetre.closed) { fenetre.close(); } } parent.html </script> </head> <body> <input type="bueon" value="Ouvrir" onclick="ouvrirFenetre()" /> <input type="bueon" value="Fermer" onclick="fermerFenetre()" /> js2_7.html </body> <script type="text/javascript"> </html> func2onouvrireFenetre(){ fenetre=window.open('','','width=300,height=200'); fenetre.document.write("<h2> La fenetre nouvellement creee</h2>"); fenetre.focus(); fenetre.opener.document.write("<h2>Je suis le perent</h2>");} </script> </head> … <input type="bueon" value="Ouvrir" onclick="ouvrireFenetre()" /> INF2005– Programma2on web– A. Obaid 29 2/11/16 Propriétés de window <html> reference.html <body> <script type="text/JavaScript"> func2on hello() { document.write("<h2> Hello de l'enfant ! </h2>"); } document.write("<h2> Je suis reference.html ! </h2>"); document.write("<h2> Je suis le document original ! </
h2>"); var fenetre1=window.open("enfant.html", "fenete1"); fenetre1.creator=self; </script> </script> </body> </html> INF2005– Programma2on web– A. Obaid L'objet Browser • Con2ent les informa2ons concernant le navigateur u2lisé. • Possède les propriétés suivantes: –
–
–
–
AppName: nom du navigateur (ex. Netcape) AppVersion: sa version UserAgent: nom du logiciel de navigateur envoyé dans l'en-‐tête HTTP AppCodeName : Nom de code du navigateur (ex. Mozilla) <script type="text/javascript"> document.write("CodeName: " + navigator.appCodeName +"<br />"); document.write("appName: " + navigator.appName+"<br />"); document.write("appVersion: " + navigator.appVersion+"<br />"); document.write("cookieEnabled: " + navigator.cookieEnabled+"<br />"); document.write("pla‘orm: " + navigator.pla‘orm+"<br />"); document.write("userAgent: " + navigator.userAgent+"<br />"); </script> browser.html INF2005– Programma2on web– A. Obaid 30 2/11/16 L'objet Browser <html> <body> <script type="text/javascript"> nom=navigator.appName; version=navigator.appVersion; if(version.indexOf("Windows") > 0) {os = "Winodws";} else if(version.indexOf("Unix") > 0) {os = "Unix";} else if(version.indexOf("Linux") > 0) {os = "Linux";} else if(version.indexOf("MAc") > 0) {os = "Mac";} else {os = "Inconnu";} with (document) { write("Nom du navigateur: " + nom+"<br />"); write("Version: " + version+"<br />"); write("Os: " + os+"<br />"); } </script> </body> </html> testdebrowser.html INF2005– Programma2on web– A. Obaid Objet Loca2on • Con2ent les informa2on sur l'adresse URL d'une page. • Accessible à travers l'objet window: – Exemples: • window.loca2on="URL"; • Plusieurs propriétés permeeent d'accéder aux différentes par2es de l' URL: • href(URL au complet), host (hostname et port), hostname, port , protocol, … INF2005– Programma2on web– A. Obaid 31 2/11/16 Créer du contenu • On peut générer du HTML avec JavaScript : – document.writeln(“Texte HTML”); • Il faudra fermer ceee page avec – document.close();. • On u2lise un backslash pour protéger certains caractères. document.writeln(“<a href=\”doc.html\”>”); INF2005– Programma2on web– A. Obaid Créer du contenu <html> <head> <script type="text/javascript"> func2on ecrireHTML() { document.writeln("<html><body>"); document.writeln("<h1>Ceci est une nouvelle page generee dynamiquement </h1>"); document.writeln("<p> Un nouveau paragraphe </p>"); document.writeln("</body></html>"); document.close(); js_m_3.html <script type="text/javascript"> } func2on ecrireHTML() { </script> var nom = window.document.monFormulaire.nom.value; </head> document.writeln("<html><body>"); <body> document.writeln("<h1>Bonjour " + nom + " ! </h1>"); <p> Bienvenue. Ici le contenu ini2al </p> document.writeln("</body></html>"); <a href="vide.html" onClick="ecrireHTML();"> document.close();} Essayez ! </a> </script> </body> </head> </html> js_m_2.html <body> <form name="monFormulaire" onSubmit="ecrireHTML();"> Votre nom: <input type="text" name="nom"> <input type="submit" value="Go !"> </form> </body> </html> INF2005– Programma2on web– A. Obaid 32 2/11/16 Naviga2on • On peut u2liser la propriété loca6on pour changer le fichier qui est affiché sur la fenêtre: – loca6on="URL". Pour la fenêtre courante. – maFenetre.loca6on= "URL". Pour une fenêtre créée. … <script type="text/javascript">func2on goPage() { var p = document.monFormulaire.unePage.value; loca2on = "page" + p + ".html"; } </script> </head> js_m_4.html .. <form name="monFormulaire"> <select name="unePage" onChange="goPage();"> <op2on selected>Choissezune page</op2on> <op2on value="1">Page 1</op2on> <op2on value="2">Page 2</op2on> <op2on value="3">Page 3</op2on> </select> <input type="reset"> </form> … INF2005– Programma2on web– A. Obaid Changement d'images • Technique u2lisée pour animer des hyperliens. • On u2lise le nom et la propriété src de l'image. • On remplace une image suite à un événements (ex. onMouseOver) <A HREF="page.html" onMouseOver="Bouton.src = Second.src" onMouseOut="Bouton.src = Premier.src"> <IMG SRC=Premier.gif" NAME="Bouton" ></A> js_m_5.html func2on echange(fichier) { document.bouton.src=fichier; } . . . <img name="bouton" src="Transport.jpg" onMouseOver="echange('TransportN.jpg');" onMouseOut="echange ('Transport.jpg');"> INF2005– Programma2on web– A. Obaid 33 2/11/16 Valida2on des données • On peut valider les données soumises par usager • Valida2on du coté client. • Avantages: – Le traitement est fait selon les exigences du client – On minimise les échanges client/serveur . – L'applica2on serveur ob2ent les données valides. • On peut vérifier: – Les champs vides. – Le format des données • Format des numéro de téléphone, adresse courriel, etc. INF2005– Programma2on web– A. Obaid Valida2on des données • On u2lise l'événement onSubmit et la commande return d'une fonc2on. • L'événement onSubmit est ac2vé par le bouton submit du formulaire. • La commande return est u2lisée pour indiquer si les données sont valides: – return false: Le serveur n'est pas appelé. L'usager doit corriger les données. – return true: données valides, elles sont envoyées au serveur. INF2005– Programma2on web– A. Obaid 34 2/11/16 Valida2on des données func2on valider() { if (document.monFormulaire.c1.value == "") { alert("Entrez le nom, SVP !"); js_m_6_1.html return false; } if (document.monFormulaire.c2.value == "") { alert("Entrez le courriel, SVP !"); return false; <body> } <form name="monFormulaire" method="get" return true; ac2on="hep://www.info2.uqam.ca/~obaid/cgi-‐bin/test-‐cgi.cgi" } onsubmit="javascript: return valider();"> <p>Nom : <input type="text" name="c1"> <br>Courriel: <input type="text" name="c2"> </p> <input type="reset"> <input type="submit" value="Go"> </form INF2005– Programma2on web– A. Obaid Valida2on des données <!-‐-‐ Fichier: filtrage.html -‐-‐> <html> <head> <script type="text/javascript"> func2on filtrer(element) { var vSaisie=document.getElementById(element); var regexp=/[^0-‐9]/g; vSaisie.value=vSaisie.value.replace(regexp,""); } </script> </head> <body> <input type="text" id="saisie" onKeyUp="filtrer('saisie')" /> </body> </html> INF2005– Programma2on web– A. Obaid 70 35 2/11/16 Les cookies • Ce sont des données persistantes stockées dans un fichier texte sous la forme: – nom=valeur; expires=Date; path=Chemin; domaine=URL • Elles sont passées du serveur au fureteur dans une réponse HTTP • Lorsque le fureteur envoie une requête vers ce serveur, il y inclut tous les cookies non expirés reçus du même serveur • Exemple: – ID=Client123456; expires=Sat, 31-‐Dec-‐2011 23:59:59 GMT; path=/; domain=picsou.com INF2005– Programma2on web– A. Obaid Les cookies INF2005– Programma2on web– A. Obaid 36 2/11/16 Les cookies • Une cookie peut avoir les parametres: – expires: date d'expira2on – domain: indique le serveur qui peut la lire. – path : indique les pages qui peuvent la lire. • Note: – Les cookies sont limitées (ex. 300 cookies par navigateur et 20 par serveur, 4 Ko par cookie ). INF2005– Programma2on web– A. Obaid Manipula2on des cookies func2on getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-‐1) { c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexOf(";",c_start); if (c_end==-‐1) c_end=document.cookie.length return document.cookie.substring(c_start,c_end); } func2on setCookie(c_name,value,expiredays){ } var exdate=new Date(); return "" exdate.setDate(exdate.getDate()+expiredays); <body onLoad="checkCookie()"> } </body> document.cookie=c_name+ "=" +value
+";expires="+exdate.toUTCString(); func2on checkCookie() { } username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else { username=prompt('Please enter your name:',""); if (username!=null && username!="") { setCookie('username',username,365); } } } Source: hep://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username Aussi: js_m_7.html (pas de moi !) INF2005– Programma2on web– A. Obaid 37 2/11/16 Les cadres • Les cadres (frames) sont des objets window. • Les cadres d'un document (frameset) sont stockés dans un tableau appelé frames[] ; • Les rela2ons d'emboitement entre cadres sont accessibles par des propriétés de window: – name, opener, parent, self, top, etc. INF2005– Programma2on web– A. Obaid Communica2on entre cadres Désuets dans HTML5 • Ce mécanisme permet aux cadres de communiquer: <frameset rows="40%,40%, *"> <frame src="page1.html" name="frame1"> <frame src="page2.html" name="frame2"> <frame src="page3.html" name="frame3"> </frameset> parent (et aussi top dans ce cas) window cadres.html frame1 frame2 frame2 frames[0] frames[1] frames[2] page2.html page3.html page1.html INF2005– Programma2on web– A. Obaid 38 2/11/16 Communica2on entre cadres <html> <body> <script type="text/JavaScript"> document.write("<h2> Je suis page1.html </h2>"); document.write("le nom du cadre 1 est :"+name +"<br />"); document.write("le nom du cadre 2 est :"+parent.frames[1].name +"<br />"); document.write("le nom du cadre 3 est :"+parent.frames[2].name +"<br />"); </script> </body> <html> </html> <body> page3.html <script type="text/JavaScript"> document.write("<h2> Je suis page3.html </h2>"); document.write("<h2> Mon cadre est : "+self.name+"</h2>"); </script> <html> </body> <body> </html> <script type="text/JavaScript"> page1.html page2.html document.write("<h2> Je suis page1.html</h2>"); document.write("<h2> Mon cadre est : "+self.name+"</h2>"); </script> </body> </html> INF2005– Programma2on web– A. Obaid Les collec2ons d'objets • L'objet documents possède des sous-‐ objets sous stockés sous forme de tableaux: – anchors[] : Tableau des ancrages dans le document. – forms[] : Tableau des formulaires dans le document – images[]: Tableau des images du document. – links[] : Tableau des liens du document. INF2005– Programma2on web– A. Obaid 39 2/11/16 Le DOM • Arbre Document Object Model • Le contenu d’un document HTML est représenté par cet arbre. • Hiérarchie des objets qui forment le code HTML. • JavaScript peut accéder au code HTML directement grâce à ce modèle. • Deux versions compa2bles: DOM et DOM w3C INF2005– Programma2on web– A. Obaid Hiérarchie DOM window Fenêtre du navigateur loca2on document URL La page anchors <a> body <body> images <img> forms <form> elements <input> <textarea> <select> frames <frame> tables 2tle … <table> rows <tr> cells <th> <td> INF2005– Programma2on web– A. Obaid 40 2/11/16 Références aux éléments DOM • Les références peuvent être cons2tués de: – Noms séparés par un point (".") – Noms d'un objet considéré comme élément d'un tableau d'objets DOM. – Noms spécifiés par l' aeribut name • Exemples: – window.document.images[0]: – Première image du docuement – window.document.forms[1].elements[4]: – 5e élément du 2eformulaire – window.document.monImage – <imgsrc=“file.gif” name=“monImage”> – window.document.monFormulaire.monChamp – <formname=“monFormulaire” . . .> <input name=“monChamp” . . .>… </form> INF2005– Programma2on web– A. Obaid L'arbre DOM • Avec le modèle DOM (w3c) , on peut aeeindre tous les éléments de la page, leurs contenus, leurs aeributs,… • Exemple: – <p 2tle="un paragraphe texte" id="p1">Un pe2t exemple de paragraphe <b>HTML qu'on pourrait <br>avoir </b> dans un document </p> P aeributes[] childnodes[] Un pe2t exemple de paragraphe b dans un document 2tle= un paragraphe id=p1 childnodes[] HTML qu'on pourrait br avoir INF2005– Programma2on web– A. Obaid 41 2/11/16 L'accès aux éléments • Un élément HTML est idn2fie par – Une balise – Un nom décrit par l'aeribut name – Un iden2ficateur décrit avec l'aeribut id. • getElementById("iden2ficateur"): – Retourne l'élément ayant id="iden2ficateur" • getElementsByTagName("nom") – Retourne la liste des éléments ayant la balise <nom> • getElementsByName("nom") : – Retourne la liste des éléments ayantname="nom" INF2005– Programma2on web– A. Obaid L'accès aux éléments <html> <head> <2tle>PreeyPreey</2tle> <script type="text/javascript"> document.onclick=changeElement; func2onchangeElement() { var el = document.getElementById("div1"); el.style.backgroundColor="#0000ff"; el.style.width="100px"; el.style.color="#ffffff"; el.style.height="200px"; … el.style.posi2on="absolute"; el.style.leŠ="200px"; el.style.top="100px"; </script> </head> <body> <div id="div1"> Loremipsumdolorsitamet, consecteturadipiscingelit. Integer sitamet nunc … </div> </body> </html> Js_css.html INF2005– Programma2on web– A. Obaid 42 2/11/16 L'objet Document • Représente le contenu de la fenêtre • Possède plusieurs collec2ons d'objets: – anchors[] : tableau des ancrages dans le document – forms[] : tableau des formulaire dans le document. – images[] : tableau des images dans le document. – links[] : tableau des liens dans le document. • Possède plusieurs propriétés: – Cookie, domain, lastModified, 6tle, URL • On peut les interroger ou les modifier INF2005– Programma2on web– A. Obaid L'objet Document … <body> <a href="document1.html"> Premir lien </a> <br> <a href="document2.html"> Deuxieme lien </a> <table> <td><img src="brad.gif"><td><img src="bill.gif"><td><img src="mae.gif"> </table> <br> <script type="text/javascript"> with (document) { for(i=0 ; i < links.length ; i++) { write("Lien:", i, ":", links[i] , "<br>"); } } with (document) { for(i=0 ; i < images.length ; i++) { write("Image :", i, ":", images[i].src , "<br>"); } } </script> … js_m_8.html INF2005– Programma2on web– A. Obaid 43 2/11/16 L'objet Document • Possède plusieurs méthodes: – write() et writeln() pour modifier le contenu d'un document – close() : ferme la communica2on avec le document – getElementById() – getElementsByName() – getElementsByTagName() INF2005– Programma2on web– A. Obaid L'objetImage • On créer une image avec l'objet Image • On peut accéder aux image d'un document en parcourant le tableau Images[]. • On peut modifier les aeributs d'une mage : src, width,… js_1_12.html smile = new Image(); nosmile = new Image(); smile.src = "smily1.jpg"; nosmile.src = "smily2.jpg"; func2on echange(ceeeImage,nouvImage) {
document[ceeeImage].src = eval(nouvImage+".src"); } </script> </head> <body> <a href="#" onMouseOver="echange('photo','smile');" onMouseOut ="echange('photo','nosmile');" > <imgsrc="smily2.jpg" width="100" border=0 name="photo"></a> </body> INF2005– Programma2on web– A. Obaid 44 2/11/16 La méthodesetTimeout() • Permet de spécifier un temps après lequel une certaine ac2on doit s'exécuter. – setTimeout(maFonc6on, duree, parm1, param2, …) <script type="text/javascript"> setTimeout("alert
('Trentesecondessontpassees !" );",30000); <!-‐-‐ Fichier: 2mer3.html -‐-‐> </script> <script type="text/javascript"> var valeur=0; func2on compteur() { document.f1.affichage.value=valeur; valeur++; setTimeout(compteur,1000); } </script> <form name="f1"> <input type="text" name="affichage"> <input type="bueon" value="Commencer" onClick="compteur()"> </form> INF2005– Programma2on web– A. Obaid La méthodeclearTimout() • Pour arrêter setTimeout(): – on doit l'affecter à une variable : • var vTimeout = setTimeout(mafonc6on,durre); – on appelle la méthode clearTimeout() sur ceee variable: • clearTimeout(vTimeout); INF2005– Programma2on web– A. Obaid 90 45 2/11/16 La méthodeclearTimout() <!-- Fichier: timer3.1.html -->
<html>
<body>
<script type="text/javascript">
var valeur=0;
var vTimeout;
function compteur() {
document.f1.affichage.value=valeur;
valeur++;
vTimeout=setTimeout(compteur,1000);
}
</script>
<form name="f1">
<input type="text" name="affichage">
<input type="button" value="Commencer" onClick="compteur()">
<input type="button" value="Arreter" onClick="clearTimeout(vTimeout)" >;
</form>
</body>
</html>
INF2005– Programma2on web– A. Obaid 91 Simula2on d'unehorloge js_m_10.html <html> <head> … <script type="text/javascript"> func2on startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); m=checkTime(m); s=checkTime(s); document.getElementById('txt').innerHTML=h+":"+m+":"+s; t=setTimeout('startTime()',500); } func2on checkTime(i) { if (i<10) { i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <div id="txt"></div> </body> </html> Source: hep://www.w3schools.com/js/tryit.asp?filename=tryjs_2ming_clock INF2005– Programma2on web– A. Obaid 46 2/11/16 La methodesetInterval() • Appelle une fonc2on toutes les n millisecondes. – setInterval("maFonc6on", n , param1, param2,… ) • Pour arrêter ceee méthode – On l'affecte à une variable: • var vTimeout = setInterval("func2on", duree, param1, param2,… ) – On appelle la méthode clearTimeout() • clearTimeout(vTimeout) 93 INF2005– Programma2on web– A. Obaid Accès aux éléments de style • On peut acceder à un élément avec getElementById() et changer ses aeributs. • Par exemple on peut changer la valeur d'un propriété de style: – document.getElementById(<Id>).style.<propriété> = <valeur>; func2on nouvelleCouleur() { var ancienneCouleur = "white"; var nouvelleCouleur = "red"; with (document.getElementById('monDiv')) { if(style.backgroundColor == 'white') { style.backgroundColor = nouvelleCouleur; } else { style.backgroundColor = ancienneCouleur; } } } js_m_13_1.html <body> <div id="monDiv" style="background-‐color: yellow;" > Un exemple de contenu de l'element. </div> <a href="javascript:nouvelleCouleur(); "> Changer le Style</a></td> </body> INF2005– Programma2on web– A. Obaid 47 2/11/16 Modifica2on d'éléments de style <script type="text/javascript"> var vTimer; var pos=100; func2on tomber() { var vImage = document.getElementById('image1'); pos += 10; vImage.style.top = pos; if (pos > 400 ){ clearInterval(vTimer); } } func2on animer() { vTimer = setInterval("tomber()", 50) ; } </script> </head> <body onlOAd="animer();"> <img id="image1" src="a.png" style="posi2on:absolute;top:100;width:100;" /> 95 INF2005– Programma2on web– A. Obaid La propriété innerHTML • Elle représente le contenu HTML d'un élément spécifique. • On peut le consulter ou le modifier. js_m_14.html <head> <script type="text/JavaScript"> func2on changerdeContenu(id) { monElement= document.getElementById(id) monElement.innerHTML="<h1>Voici le nouveau Contenu</h1>"; } </script> </head> <body> <div id="monDiv" > Un exemple de contenu de l'element. </div> <a href="javascript:changerdeContenu('monDiv');"> Changer le contenu</a></td> </body> INF2005– Programma2on web– A. Obaid 48 2/11/16 L'objet Form • Forms est le tableau des formulaires du document. • Le tableau associa2f elements con2ent tous les éléments qui composent un formulaire donné INF2005– Programma2on web– A. Obaid Autres exemples • Pour plusieurs autres exemples – Voir le livre !! INF2005– Programma2on web– A. Obaid 49
