JavascriptDepot
Transcription
JavascriptDepot
Troisième Partie JavaScript I Introduction 1 – Comment insérer un script a) Balise <script> ' </script> <html ..> <head> <title>Appels JavaScript multiples</title> <script type="text/javascript"> //<![CDATA[ .Instructions javascript //]]> </script> </head> b) Fichier externe < script type="text/javascript" src="MonFichier.js"> </script> <noscript> <p> Cette ligne s'affiche si le navigateur ne prend pas en charge JavaScript </p> </noscript > c) A l'aide d'événements <balise eventHandler="code Javascript à insérer"> <form> <p> <input type="button" value="Exemple" onclick="javascript:alert('Un mini script qui marche !');" /> </p> </form> 2 - Premier exemple <title>Premier JS</title> <script type="text/javascript"> //<![CDATA[ alert(unescape("Cette ligne 1 a %E9t\351 cr\351\351e \n avec du code JavaScript int%E9gr%E9.")); //]]> </script> </head> <body> <script type="text/javascript" src="JS1.js"></script> <noscript> <p> Cette ligne s'affiche si le navigateur ne prend pas en charge JavaScript </p> </noscript > </body> </html> Le fichier JS1.js contient : alert(unescape("Cette ligne 1 a %E9t\351 cr\351\351e \n avec du code JavaScript int%E9gr%E9.")); 3) Afficher le contenu d'une variable <head> <title> </title> <script type="text/javascript"> //<![CDATA[ alert('Vous avez le bonjour de JavaScript '); var Chaine = "Comment \347a marche?" alert(Chaine); //]]> </script> 4 – Les commentaires <script type="text/javascript"> /* Cette ligne fait partie du paragraphe de commentaire. Cette ligne fait également partie du paragraphe de commentaire. */ alert("Exemple de commentaire"); // Les lignes de commentaires //peuvent être placées à la suite des lignes de code // Cette ligne de commentaire remplit une ligne à elle seule. /* Voici une autre manière de créer un paragraphe de commentaire. */ </script> II – Utilisation des identificateurs xhtml 1 – lecture du contenu <body> <div id="id1"> bonjour</div> <script type="text/javascript" src="JS3.js"></script> <noscript> <p>cette ligne s´affiche si le navigateur ne prend pas en charge JavaScript </p> </noscript > JS3.js var choix; choix = document.getElementById("id1"); alert(choix.innerHTML); getElementById = obtenir l'élément de la page dont l'identificateur est innerHTML = accéder au contenu de l'élément 2 – Ecriture dans la page xhtml <body> <div id="id1"> bonjour</div> <script type="text/javaScript" src="JS4.js"></script> <noscript> <p>cette ligne s´affiche si le navigateur ne prend pas en charge JavaScript </p> </noscript > var choix; choix = document.getElementById("id1"); choix.innerHTML = "Salut, coucou"; III – Utilisation de prompt et des balises xhtml <div id="id1"> </div> <script type="text/javascript"> //<![CDATA[ var prenom, nom, titre; prenom = prompt("Votre pr\351nom"); nom = prompt('votre nom'); titre = prompt('titre de votre page'); document.getElementById("id1").innerHTML='<h1>'+titre+'<\/h1>'; document.getElementById("id1").innerHTML+='<h2>'+ 'par ' +prenom+' '+ nom+' '+'<\/h2>'; //]]> </script> Autre version avec fichier externe : <div id="id1"> </div> <script type="text/javascript" src="JS6.js"> </script> document.getElementById("id1").innerHTML='<h1>'+titre+'<\/h1>'; document.getElementById("id1").innerHTML= - "entre guillemets ou apostrophes du texte" - Sans guillemets ni apostrophes des variables - Entre du texte et une variable, entre deux variables ou entre une variable et du texte : le signe + Les balises xhtml en javascript : <balise>.<\/balise_fermante> Remarque : utilisation des codes ASCII ou Unicode prenom = prompt("Votre prénom"); prenom = prompt("Votre pr\351nom"); prenom = prompt(unescape('Votre pr%E9nom')); Exemple de lecture : %E9 = é Les caractères non traduits par escape ou unescape sont en italique grisé V - Les objets de Javascript 1 – Notion de hiérarchie Objet fenêtre Objet Document Objet Formulaire Objet radio Objet bouton Objet texte 2 – Déclaration d'un objet Pour les objets de type String, Math, mais pas document ni window nouvel_objet = new type_objet(paramètres) Exemple monNombre = new Number(8); A un objet sont associées des propriétés et des méthodes Exemple A un objet de type Math seront associées les méthodes cos, sin, A un objet de type String sera associée la propriété "nombre de caractères" VI - L'objet document 1 – Propriétés dépréciées • • • • • • • • • • • • alinkColor : couleur des liens lorsqu'ils sont cliqués bgColor couleur d'arrière plan charset jeu de caractères utilisés cookie chaîne de caractères pouvant être sauvegardée chez l'utilisateur defaultCharset jeu de caractères normal fgColor couleur pour le texte lastModified dernière modification du document linkColor couleur pour les liens referrer pages déjà visitées title titre du fichier URL adresse URL du fichier vlinkColor couleur pour les liens à des cibles visitées 2 – Utilisation a) Généralité document.propriété Exemple déprécié : document.bgcolor b) Modification de la valeur d'une propriété du document <body id="corps"> <h1>Bonjour tout le monde</h1> <form action=" "> <p> <input type="button" onclick=" var x=document.getElementById('corps'); x.style.backgroundColor ='#000000'; x.style.color = '#fff'; " /> </p> </form>> </body> ModifColor2.html VII - Les chaînes de caractères (l'objet String) 1 - Déclaration chaine1 = 'Ceci est une chaine de caracteres '; chaine2 = new String("ceci est une autre chaine de caracteres"); 2 – Une propriété length : propriété donnant le nombre de caractères Exemple : chaine1.length nous donnera 34 3 – Quelques méthodes • • • • toUpperCase(), toLowerCase() : mise en majuscules ou en minuscules substring(x, y) : extraction des caractères de x à y (y non compris) charAt(x) : recherche du caractère d'indice x indexOf(c), indexOf(chaine) : recherche de l'indice d'un caractère ou d'une chaîne de caractères • indexOf(c, x), indexOf(chaine,x) : recherche de l'indice d'un caractère ou d'une chaîne à partir de la position x • lastIndexOf(chaine) : indice de la dernière occurrence de la chaîne 4 - Exemples <div id="debut" ><h2>Phrase</h2></div> <div id="ici"><h2>Phrase en majuscule </h2></div> <div id="long"><h2>Nombre de caractères : </h2></div> <div id="alpha"><h2>extraction de sous chaines </h2></div> <script type="text/javascript"> //<![CDATA[ test1 = 'je vous souhaite le bonjour '; test2 = new String(unescape("j%27esp%E8re que vous allez bien")); phrase = test1+'<br />'+test2; document.getElementById("debut").innerHTML+='<h1>'+phrase+'<\/h1>'; document.getElementById("ici").innerHTML+=phrase.toUpperCase(); document.getElementById("long").innerHTML+=phrase.length; alpha=document.getElementById("alpha"); alpha.innerHTML+=phrase.substring(0,4); alpha.innerHTML+=phrase.charAt(10); alpha.innerHTML+=phrase.indexOf('k'); alpha.innerHTML+=phrase.indexOf("k",5); beta = new String('il fait beau et chaud'); alpha2=document.getElementById("alpha2"); alpha2.innerHTML+= '<h2>'+beta+'<\/h2>'; alpha2.innerHTML+= beta.indexOf('au'); alpha2.innerHTML+=beta.indexOf('au',12); alpha2.innerHTML+=beta.lastIndexOf('au'); alpha2.innerHTML+=beta.lastIndexOf('ra'); //]]> </script> VIII – Introduction des fonctions 1 – Exemple 1 <head> <script type="text/javascript"> function afficher_message (message) { alert(message); } </script> </head> <body> <script type="text/javascript"> //<![CDATA[ afficher_message(unescape("Ce texte a %E9t%E9 affich%E9 gr%E2ce %E0 une fonction")); //]]> </script> </body> </html> 2 – Exemple avec prompt <head> <title></title> <script type="text/javascript"> function afficher_message (message) { alert(message); } </script> </head> <body> <script type="text/javascript"> //<![CDATA[ message=prompt("tapez votre message"); afficher_message(message); //]]> </script > </body> IX – L'objet Math 1 – les opérateurs de base var nombre; var resultat; var res= document.getElementById("res"); nombre = prompt(); resultat = nombre / 4; res.innerHTML+=resultat; resultat = nombre - 25; res.innerHTML+=resultat; resultat = nombre * 2; res.innerHTML+=resultat; resultat = nombre+50; res.innerHTML+=resultat; resultat = 50+parseInt(nombre); res.innerHTML+=resultat; 2 – Autres opérateurs ++nombre; nombre = nombre +1; --nombre; nombre = nombre -1; resultat += nombre; resultat = resultat+nombre; resultat -= nombre; resultat = resultat – nombre; resultat /= nombre; resultat = resultat/nombre; resultat *= nombre; resultat = resultat * nombre 3 – Quelques méthodes Méthode description Exemple abs(x) Retourne la valeur absolue de x, il renvoie donc le nombre s'il est positif, son opposé (positif) s'il est négatif •x = Math.abs(3.26) donne x = 3.26 •x = Math.abs(-3.26) donne x = 3.26 ceil(x) Retourne l'entier supérieur ou égal à x •x = Math.ceil(6.01) donne x = 7 •x = Math.ceil(3.99) donne x = 4 floor(x) Retourne l'entier inférieur ou égal à x •x = Math.floor(6.01) donne x = 6 •x = Math.floor(3.99) donne x = 3 Retourne le plus grand des deux nombre donnés en paramètre •x = Math.max(6,7.25) donne x = 7.25 •x = Math.max(-8.21,-3.65) donne x = -3.65 •x = Math.max(5,5) donne x = 5 min(N1, N2) Retourne le plus petit des deux nombres donnés en paramètre •x = Math.min(6,7.25) donne x = 6 •x = Math.min(-8.21,-3.65) donne x = -8.21 •x = Math.min(5,5) donne x = 5 pow(N1, N2) Retourne le nombre 1 à la puissance 2 •x = Math.pow(3,3) donne x = 27 •x = Math.pow(9,0.5) donne x = 3 random() Retourne un nombre aléatoire compris entre 0 et 1 •x=Math.random() x=0.6489534931546957 round(x) Arrondit à l'entier le plus proche de x •x = Math.round(6.01) donne x = 6 •x = Math.round(3.8) donne x = 4 •x = Math.round(3.5) donne x = 4 sqrt(Valeur) Retourne la racine carrée du nombre passé en paramètre •x=Math.sqrt(9) donne 3 max(N1, N2) donne 4 - Exemples a) Quelques méthodes n= Math.random(); r= Math.floor(n*1000+1); //entier inférieur ou égal à n*1000+1 b) Opérateur with var res=document.getElementById("res"); res.innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 0 et 1 = ")+n; with (Math){ res.innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 1 et 1000 = ")+r; res.innerHTML+=unescape("<br />entier sup%E9rieur %E0a ")+n+' = '+ceil(n); res.innerHTML+=unescape("<br />entier inf%E9rieur %E0 ")+n+' = '+floor(n) res.innerHTML+=unescape("<br />entier le plus proche de ")+n+' = '+round(n); } Ou encore : var res=document.getElementById("res"); with (Math){ with (res){ innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 1 et 1000 = ")+r; innerHTML+=unescape("<br />entier sup%E9rieur %E0 ")+n+' = '+ceil(n); innerHTML+=unescape("<br />entier inf%E9rieur %E0 ")+n+' = '+floor(n); innerHTML+=unescape("<br />entier le plus proche de ")+n+' = '+round(n); } } X – L'objet Date 1 - Définition nombre de millisecondes depuis le 1 1 1970 2 – Déclaration permet de stocker la date et l'heure actuelle Nom_de_l_objet = new Date(); date1 = new Date(); Nom_de_l_objet = new Date("mois jour année heures:minutes:secondes") date2 = new Date("november 21 2008 00:45:00"); Nom_de_l_objet = new Date(year, month, day). Les paramètres omis sont mis à zéro par défaut date3 = new Date(2008,10,21); Nom_de_l_objet = new Date(year, month, day, hours, minutes, seconds) date4 = new Date(2008,10,21,8,0,0); date1.html 3 – Quelques méthodes a) Lecture de valeur de dates Permet de récupérer la valeur du jour du mois L'objet retourné est un entier (entre 1 et 31) qui correspond au jour du mois: getDay() Permet de récupérer la valeur du jour de la semaine pour la date spécifiée L'objet retourné est un entier qui correspond au jour de la semaine: •0: dimanche •1: lundi ... getHours() Permet de récupérer la valeur de l'heure L'objet retourné est un entier (entre 0 et 23) qui correspond à l'heure getMinutes() Permet de récupérer la valeur des minutes L'objet retourné est un entier (entre 0 et 59) qui correspond aux minutes getSeconds() Permet de récupérer la valeur des secondes L'objet retourné est un entier (entre 0 et 59) qui correspond aux seconds getTime() Permet de récupérer le nombre de secondes depuis le 1er janvier 1970 L'objet retourné est un entier. Cette méthode est très utile pour passer d'une date à une autre, soustraire ou ajouter deux dates, ... getMonth() Permet de récupérer le numéro du mois L'objet retourné est un entier (entre 0 et 11) qui correspond au mois: •0: janvier •1: février ... getYear() Permet de récupérer l'année À partir de 1900 getDate() b) création de dates setDate() Change la date d'un mois. Entre 1 et 31 setDay() Permet de récupérer la valeur du jour de la semaine pour la date spécifiée Change l'heure d'une date spécifique. setHours() Entre 0 et 23. setMinutes() Change les minutes d'une date spécifique. Entre 0 et 59. setSeconds Change les secondes setTime() Change la valeur de l'objet Date. setMonth() Change le mois d'une date spécifique. Entre 0 et 11. setYear() Change l'année d'une date spécifique. c) Exemples var naissance=new Date(); with (naissance ){ setDate(14); setMonth(10); setFullYear(2008); setYear(08); setHours(0); setMinutes(45); setSeconds(0); } alert('Date naissance = '+naissance); with (naissance ){ setYear(08+2000); . } alert('Date naissance = '+naissance); //jour du mois = naissance.setDate() //mois (0 = Janvier) //année //année //heure //heure mn //heure sc //année date3.htm var date=document.getElementById("date"); var aujourdhui=new Date(); with (aujourdhui ){ j=getDate(); m=getMonth(); d=getDay(); fy=getFullYear(); y=getYear(); h=getHours(); mm=getMinutes(); s=getSeconds(); } //jour du mois = aujourdhui.getDate() //mois (0 = Janvier) //jour de la semaine 0 = dimanche //année //année //heure //heure mn //heure sc date5.htm date.innerHTML="Nous sommes le = "+d+' '+j+' '+m+' '+fy; date.innerHTML+="<br />en plus clair "+aujourdhui.toLocaleString() date6.htm XI- Les structures de contrôle 1 - Les opérateurs a) Calcul arithmétique - autres Binaires - Binaires || Addition + && - Soustraction * Multiplication / Division % Modulo Unaire ! - Unaires : - Opposé ++ Incrémentation -- -monSolde i++ ; équivaut à i = i + 1 (Pratique) ++i ; l'incrémentation est faite avant d'utiliser la valeur de i k-- ; équivaut à k = k - 1 Décrémentation --k ; la décrémentation est faite avant d'utiliser la valeur de k b) Comparaison Inférieur strict x < 2 ; compteur < 101 'femme' < 'homme' > Supérieur strict x > 2 ; compteur > x 'chat' > 'chien' <= Inférieur large x <= 2 ; >= Supérieur large x >= 2 ; == Egal ( "identique à" ) x == 2 ; != Différent x != 2 ; Binaires < c) Affectation arithmétique Addition x += y signifie x = x + y -= Soustraction x -= y signifie x = x - y *= Multiplication x *= y signifie x = x * y /= Division x /= y signifie x = x / y %= Modulo x %= y signifie x = x % += 2 – Les alternatives a) Alternative à 1 branche if (condition) instruction; if (condition) { instructions; } b) Alternative à 2 branches if (condition) instruction; else instruction; if (condition) instruction; else{ instructions; } if (condition){ instructions; } else instruction; if (condition){ instructions; } else{ instructions; } c) Exemples scoreF = prompt("score de la France"); scoreU = prompt("score de l'Uruguay"); if (scoreF > scoreU) alert(unescape("La France a gagn%E9")); var scoreF, scoreU; scoreF = window.prompt(" score de la France "); scoreU = window.prompt(" score de l'Uruguay "); if (scoreF > scoreU) alert(unescape("La France a gagn%E9")); else alert(unescape("La France n'a pas gagn%E9")); var scoreF, scoreU; scoreF = prompt(" score de la France "); scoreU = prompt(" score de l'Uruguay "); if (scoreF > scoreU) alert(unescape("La France a gagn%E9")); else if (scoreF == scoreU) alert("match nul"); else alert("La France a perdu !"); If3.htm var aujourdhui = new Date(); var cejour = aujourdhui.getDay(); if (cejour == 0) jour = " dimanche "; else if (cejour == 1) jour = " lundi "; else if (cejour == 2) jour = " mardi "; else if (cejour == 3) jour = "mercredi"; else if (cejour == 4) jour = " jeudi"; else if (cejour == 5) jour = " vendredi"; else jour = " samedi "; alert(jour); calendrier.htm d) Alternative à n branches switch (variable){ case valeur1: instructions; break; case valeur2: instructions; break; .. case valeurn: instructions; break; default: instructions; } var cejour = aujourdhui.getDay(); switch (cejour){ case 1: jour = "lundi"; break; case 2: jour = "mardi"; break; case 4: jour = "jeudi"; break; case 3: jour = "mercredi"; break; case 5: jour = "vendredi"; break; case 0: jour = "dimanche"; break; case 6: jour = "samedi"; break; default: jour="erreur" } alert(jour); calendrier2.htm 3 – Les répétitions a) Boucle for for (initialisations ; condition d'arrêt ; instructions de fin) { instructions ; } for (compteur = 0; compteur < 5; ++compteur) { alert("bonjour"); } for(compteur = 1; compteur <=5; ++compteur) { if(compteur == 3) continue; alert("compteur = "+compteur); } b) Boucle while while (condition d'arrêt){ instructions ; } var compteur = 1; while (compteur <=5) { alert("compteur = "+compteur); ++compteur; } var compteur = 10; while (compteur > 0) { alert("compteur= " + compteur); --compteur; } var compteur = 1; while (compteur <= 100) { alert("compteur= " + compteur) compteur *=2; } c) Boucle do ' while do{ instructions ; }while (condition d'arrêt); var compteur = 1; do{ alert("compteur = "+compteur); ++compteur; while4.xhtml } while (compteur <=5) ; XII - Les tableaux 1 – Les déclarations var tab1 = new Array(4); var tab2 = new Array(1,2,3,4,5,6); var tab3 = [8,10,15,4,-4,78,-4]; var tab4 = new Array() 2 - Utilisation a) Entrer des valeurs dans un tableau tab1[0]=12; tab4[8]=20; tab2[i] = x + y; b) lire les valeurs dans un tableau x = tab1[0]; y = tab4[8] + tab2[10]; z = tab2[i] ; c) exemple var scores1 = new Array(4); var scores2 = new Array(1,2,3,4,5,6); var scores3 = [8,10,15,4,-4,78,-4]; var scores4 = new Array() //affichage contenu des tableaux var tab = document.getElementById("tab1") affichage = '<br />Scores 1 = '+scores1[0]+' '+scores1[1]+' '+scores1[2]+' '+scores1[3]; tab.innerHTML += affichage; affichage = '<br />Scores 2 = '+scores2[0]+' '+scores2[1]+' '+scores2[2]+' '+scores2[3]+' '+scores2[4]+' '+scores2[5]; tab.innerHTML+=affichage; affichage ='<br /> scores3 = '+scores3 +'<br />scores 4 = '+scores4; tab.innerHTML+=affichage; tab1.htm 3 – Une propriété length : nombre d'éléments d'un tableau Exemple : tab.length Exemple nb1 = scores1.length; tab = document.getElementById("tab2") affichage = '<br />taille de scores1 : '+nb1; affichage += '<br />taille de scores2 : '+ scores2.length; affichage += '<br />taille de scores3 : '+scores3.length; affichage += '<br />taille de scores4 : '+scores4.length; tab.innerHTML += affichage; tab2.htm Remarque : tableau à plusieurs dimensions var a = new Array(4) for (var i=0; i < a.length; ++i){ a[i] = new Array(i*2); for (j= 0; j <i*2; j++) a[i][j] = i*j; } var tab = document.getElementById("tab1"); tab.innerHTML = a; var message = ""; for (i=0; i < a.length; ++i){ for (j= 0; j < i*2; j++) message += a[i][j]+ " message += "<br />"; } tab.innerHTML += "<br />"+ message; "; tab2.htm 4 – Une application des tableaux maintenant = new Date(); j = maintenant.getDate(); d = maintenant.getDay(); mo = maintenant.getMonth(); y = maintenant.getYear(); h = maintenant.getHours(); m = maintenant.getMinutes(); s = maintenant.getSeconds(); //date courante //jour du mois //jour de la semaine Date.xhtml Mois=new Array ("Janvier", unescape("F%E9vrier"),"Mars"," Avril","Mai","Juin","Juillet",unescape("Ao%FBt"), "Septembre", "Octobre","Novembre",unescape("D%E9cembre")); Jour=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"); messageh="il est "+h+" heures "+m+" mn "+s+" secondes"; messaged = "nous sommes le "+Jour[d]+" "+j+" "+" "+Mois[mo]+" "+y; date = document.getElementById("date"); heure = document.getElementById("heure"); heure.innerHTML=messageh; date.innerHTML=messaged; 5 - les méthodes concat() Concatène les éléments de tableaux join(séparateur) concatène les cases du tableau avec le séparateur pop() dépile et retourne le dernier élément du tableau push(val,...) ajoute des éléments au tableau reverse() renverse le tableau shift() supprime et retourne le 1er élément slice(indicedeb, indicefin) retourne une portion du tableau sort() tri des éléments splice(indexdépart, nbel, val, ...) Ajoute un ou plusieurs nouveaux éléments dans un tableau. Écrase en le faisant des éléments existants toString() conversion du tableau en chaîne unshift(val,...) insère des éléments 6 - Exemples //différents types de déclaration des tableaux de chaines noms = new Array('Tariq Abdul-Wahad','Tony Parker','Scottie Pippen'); joueur = document.getElementById("joueur"); joueur.innerHTML=unescape("pr%E9nom du dernier joueur : ")+noms[2].substring(0,7); //scinder une chaine parties=noms[0].split(" "); joueur.innerHTML+=unescape("<br /> pr%E9nom obtenu apr%E8s split sur l espace")+parties[0]+"<br />nom obtenu avec split"+parties[1]: //fusion nomcomplet=parties.join(" "); joueur.innerHTML+="<br />nom complet :"+ nomcomplet; //tri d'un tableau nom_tri= noms.sort(); affichage = unescape('<br />tableau tri%E9')+ '<br />'+noms[0]+'<br />'+noms[1]+'<br />'+noms[2] ; joueur.innerHTML+=affichage; noms.push('Dennis Rodman'); noms.push('Michael Jordan','Jalen Rose'); affichage = 'Contenu du nouveau tableau avec push<br />'+noms; joueur.innerHTML+=affichage; noms.reverse(); affichage = 'Contenu du nouveau tableau avec reverse<br />'+noms; joueur.innerHTML+=affichage; jeu = noms.pop(); affichage = 'Contenu du nouveau tableau avec pop<br />'+noms; joueur.innerHTML+=affichage; joueur.innerHTML+='<br /><br />et joueur ='+jeu; jeu = noms.shift(); affichage = 'Contenu du nouveau tableau avec shift<br />'+noms; joueur.innerHTML+=affichage; joueur.innerHTML+='<br /><br />et joueur ='+jeu; noms.unshift("Jalen Rose"); affichage = 'Contenu du nouveau tableau avecunshift<br />'+noms; joueur.innerHTML+=affichage; jeu=noms.join("**"); affichage = 'Contenu du nouveau tableau avec join<br />'+jeu; joueur.innerHTML+=affichage; jeu=noms.slice(1,2); affichage = 'Contenu du nouveau tableau avec slice<br />'+jeu; joueur.innerHTML+=affichage; XIII - L'objet navigator 1 – Quelques propriétés de l'objet navigator Propriété Description Pour votre navigateur appCodeame retourne le code du navigateur. appame retourne le nom du navigateur (la plupart du temps la marque). Cette propriété est utile pour différencier les navigateurs de Netscape et de Microsoft. Netscape appVersion retourne la version du navigateur. Cette propriété prend la forme suivante: Numéro de version (plateforme (système d'exploitation), nationalité) 4.0 (compatible; MSIE 6.0; Windows NT 5.1) userAgent retourne la chaîne de caractères qui comprend toutes les informations. Les propriétés ci-dessus offrent un moyen pratique de récupérer une partie de cette information (cette chaîne étant de longueur variable, il ne serait pas évident d'en récupérer une portion sans les autres propriétés...) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Mozilla 2 - exemples var navi = document.getElementById("navi"); message="<ul>"; message+="<li>Nom de code : "+navigator.appCode@ame+"</li>"; message+="<li>Nom de l'application : "+navigator.app@ame+"</li>"; message+="<li>Version de l'application : "+navigator.appVersion+"</li>"; message+="<li>Agent utilisateur : "+navigator.userAgent+"<\/li>"; message+="</ul>"; navi.innerHTML = message; navi1.html • Ou encore var navi = document.getElementById("navi"); message="<ul>"; with (navigator){ message+="<li>Nom de code : "+appCodeName+"<\/li>"; message+="<li>Nom de l'application : "+appName+"<\/li>"; message+="<li>Version de l'application : "+appVersion+"<\/li>"; message+="<li>Agent utilisateur : "+userAgent+"<\/li>";} message+="</ul>"; navi.innerHTML = message; navi3.xhtml •Et enfin var navi = document.getElementById("navi"); for (prop in navigator) { navi.innerHTML += "<br />prop : " + navigator[prop]; } var navi = document.getElementById("navi"); for (i in document) { navi.innerHTML += "<br />i : " + document[i]; } navi4.xhtml XIV - L'objet window 1 - Exemple var fen=document.getElementById("fen"); fen.innerHTML=unescape('<h1>Ma fen%E8tre<\/h1>'); var message=""; window.status=unescape("exemple d'utilisation des propri%E9t%E9 de l'objet window"); for (i in window){ message += unescape("propri%E9t%E9 : ")+i+ unescape("%A0%A0%A0% A0 %A0%A0%A0%A0%A0%A0%A0Valeur : ")+window[i]+'<br />'; } fen.innerHTML += message; window1.html Activer la modification de la barre d'état sous FF Activer la modification de la barre d'état sous IE 2 - Quelques méthodes de l'objet window alert() prompt() confirm() open() close() moveTo() moveBy() resizeTo() back() : go() blur() : focus() : forward() : home() print() retour à la page précédente Avance ou recule du nombre de pages désiré dans l'historique sauvegardé enlève le "focus" donne le "focus" opposé de back ; permet d'avancer dans l'historique (Netscape) dirige le navigateur vers la première page imprime le contenu de la page 3 - Exemples function Retour(){ history.back(); } <input type="button" value="retour" onclick="Retour();" /> function Retour(i){ if (i==1) history.back(); else history.go(-history.length); } <input type="button" value="Précéeacute;dente" onclick="Retour(1);" /> <input type="button" value="Première" onclick="Retour(2);" /> 4 – Méthode open() a) description window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); directory = yes/no Affiche ou non les boutons de navigation location = yes/no Affiche ou non la barre d'adresse menubar = yes/no Affiche ou non la barre de menu (fichier, édition, ) resizable = yes/no Définit si la taille de la fenêtre est modifiable ou non scrollbars = yes/no Affiche ou non les ascenseurs (barres de défilement) screenX (N) screenY (N) ou left top(IE) Coordonnées en x et y de la fenêtre status = yes/no Affiche ou non la barre d'état toolbar = yes/no Affiche ou non la barre d'outils width = largeur (en pixels) height = hauteur (en pixels) Définit la largeur Définit la hauteur b) exemples var hauteur=screen.availHeight; var largeur=screen.availWidth; function ouvr_fen(){ obj=window.open("../exemples/DemoGenerale.xhtml",'Nellefen',"directory=1,lo cation=1,menubar=1,scrollbars=1,status=yes,resizable=yes,toolbar=1,width=40,height= 50,top=100,left=100"); } function ChangerTaille() { obj.moveTo(0,0); obj.resizeTo(largeur,hauteur); } window4.html <form action="mailto:[email protected]" id="form1"> <p> <input type="button" onclick="ouvr_fen()" value="Nouvelle fenêtre" /> <input type="button" onclick="ChangerTaille()" value="Modifer fenêtre" /> </p> </form> function ouvr_fen(){ obj=window.open("NelleFen.xhtml ",'Nellefen', "directory=1,location=1,menubar=1,scrollbars=1,status=yes,resizable=yes,toolbar=1,width=300,hei ght=150"); return obj; } function deplacer_fen(fen){ x=prompt("déplacement en x="); y=prompt("déplacement en y="); fen.moveBy(x,y); } function imprim_fen(fen){ fen.print(); } function fermer_fen(fen){ fen.close(); } <form action="mailto:[email protected]" id="form1"> window4.html <p> <input type="button" onclick="fen = ouvr_fen()" value="Nouvelle fenêtre" /> <input type="button" onclick="ChangerTaille(fen)" value="Modifer fenêtre" /> <input type="button" onclick="deplacer_fen(fen);" value="Deplacer nouvelle" /> <input type="button" onclick="imprim_fen(fen);" value="imprimer nouvelle fenetre" /> <input type="button" onclick="fermer_fen(fen);" value="Fermer nouvelle fenetre" /> <input type="button" onclick="self.print();" value="Imprimer cette fenetre" /> </p> </form> XV - Les minuteries 1 – Les méthodes setInterval() : exécution de code JS à intervalles réguliers clearInterval() : arrêt de la minuterie setTimeout() : exécution de code JS au bout d'un délai clearTimeout() : annule setTimeout 2 - Exemples a) clearInterval() et setInterval() <form id="form1" action=" "> <p> <input type="text" size="30" name="horloge" /> <input type="text" name="date" /> <input type="button" value="démarrer le chronomètre" name="depart" onclick="demarrer();" /> </p> </form> var depart=0; var m,h,y,j,mo,s,d; Mois=new Array ("Janvier", unescape("F%E9vrier"),"Mars"," Avril","Mai","Juin","Juillet",unescape("Ao%FBt"), "Septembre", "Octobre","Novembre",unescape("D%E9cembre")); Jour=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","samedi"); function demarrer() { if (depart == 1){ clearInterval(intervalle); document.forms["form1"].depart.value= unescape("d%E9marrer le chronom%E8tre"); depart=0; } else{ maintenant = new Date(); j = maintenant.getDate(); mo = maintenant.getMonth(); d = maintenant.getDay(); s=maintenant.getSeconds(); m=maintenant.getMinutes(); h=maintenant.getHours(); y=maintenant.getFullYear(); intervalle=setInterval('chronos()',1000); document.forms["form1"].depart.value= unescape("arr%EAter le chronom%E8tre"); depart=1; } } function chronos() { s++; if (s == 60){ s = 0; m++; } if (m == 60){ m = 0; h++; } if (h == 24) h = 0; message=Jour[d]+" "+j+" "+Mois[mo]+" "+y; document.forms["form1"].horloge.value=message; message=h+" h "+m+" mn "+s; document.forms["form1"].date.value=message; } chrono.html b) setTimeout() pos = 0; msg = "Alors c'est pas trop dur le Javascript ?"; msg ="... ..."+msg; defilement(msg); function defilement(message) { //affiche dans la barre d'état msg allant de pos à fin + msg de début à pos window.status = msg.substring(pos,msg.length)+msg.substring(0,pos); pos++; if (pos > msg.length) pos = 0; //l'exécution de la fonction est retardée de 0,1 secondes window.setTimeout("defilement()",100); } chrono2.html XVI – L'objet Image 1 - Propriétés border largeur du cadre complete false tant que le chargement n'est pas fini height hauteur hspace espace horizontal lowsrc URL de l'image basse résolution name nom de l'image src URL de l'image vspace espace vertical width largeur de l'image 2 - Exemple function Ordi() { document.images["envoi"].src='../ImagesVideo/femmeordi.jpg'; document.images["envoi"].height="550"; document.images["envoi"].width="600"; } function Balai() { document.images["envoi"].src='../ImagesVideo/fond-ecran.jpg'; document.images["envoi"].height="500"; document.images["envoi"].width="600"; } <p> <img src="../ImagesVideo/fond-ecran.jpg" alt="Fond d'écran" height="113" width="150" id="envoi" onmouseover="Ordi();" onmouseout="Balai();" /> Img1.html </p>