JavaScript
Transcription
JavaScript
JavaScript Mourad Oudghiri FSO - Département Math-Info [email protected] Avril 2010 Oudghiri JavaScript Généralités JavaScript C’est un langage interprété, structuré et Orienté Objet. Inspiré du langage C. Il permet de résoudre les problèmes que HTML ne sait pas résoudre. Il s’écrit directement dans la Page HTML. Il sait gérer les évènements principaux de la souris : déplacements, clicks, ... Il sait gérer les temporisations. Oudghiri JavaScript Généralités Insertion de code JavaScript Le code JavaScript doit être placé toujours à l’intérieur de script <script language="JavaScript"> ............ </script> D’habitude, on place la balise script à l’intérieur de la balise head. Cependant, il est possible de la mettre n’importe où, même dans la balise body. Dans cet exemple, le navigateur affiche : Bonjour tout le monde <html> <head><title>premier script</title> <script language="JavaScript"> document.write("Bonjour ") </script> </head> <script language="JavaScript"> document.write("tout le monde") </script> </body> </HTML> Dans un fichier html, on peut appeler un fichier contenant du code JavaScript. <script src="NomFichier.js" > </script> Oudghiri JavaScript Généralités Règles générales Exécution directe Un code qui est destiné à s’exécuter automatiquement lors du chargement de la page, on le met dans la balise body <body> <script language="JavaScript"> document.write("Bonjour"); </script> Exécution différée Le code qui s’exécute lors d’un événement généré par intervention de l’utilisateur est placé dans la balise head. Dans ce cas, le code est lu par le navigateur, stocké en mémoire, pour ne s’exécuter que sur demande expresse. <head> <title>Exécution différée</title> <script language="JavaScript"> function auRevoir (){ alert("Au revoir"); } </script> </head> <body onUnload=auRevoir();> </body> Oudghiri JavaScript Généralités Règles générales L’insertion des espaces peut s’effectué n’importe où dans le script. Donc n’hésitons pas à éclaircir nos écritures. Pour rendre plus clair et plus compréhensible notre programme, on peut placer des commentaires : En utilisant le double slash // : tout ce qui se trouve à droite est commentaire. Un commentaire sur plusieurs lignes doit être placé entre /* et */ Chaque commande doit être terminée par un point-virgule (;). Un nombre à virgule est séparé par un point (.) et non par une virgule (0.5 et non 0,5) Javascript est sensible à la casse Oudghiri JavaScript Les variables Déclaration et affectation Les variables sont des contenants qui permettent de manipuler facilement des valeurs numériques ou autres. Le mot-clé var permet de déclarer une ou plusieurs variables. Après la déclaration de la variable, il est possible de lui affecter une valeur. Déclaration et affectation en même temps : var nom, age; nom="toto"; age=35; var prenom="tati"; La lecture d’une variable non déclarée provoque une erreur. Une variable correctement déclarée mais dont aucune valeur n’est affectée, est indéfinie. Oudghiri JavaScript Les variables Types de variables le Javascript n’autorise la manipulation que des quatre types de données suivant : Nombres: entiers ou à virgules Chaînes de caractères booléens: true : si le résultat est vrai false : si le résultat faux null: possède une seule valeur, null, et indique que la variable ne contient aucune donnée. undefined : possède une seule valeur, undefined, et indique que la variable non initialisée (ou non existante) Le type de la variable est déterminée par la valeur que l’on lui affecte. Oudghiri JavaScript Les variables Contraintes sur les noms de variables Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractère de _ : Mon_Prenom est un nom valide. Les noms de variables ne doivent pas commencer par un chiffre. Les caractères spéciaux et accentués sont interdits : Mon_Prénom n’est pas un nom valide. Les majuscules et les minuscules ont leur importance : MonPrenom et Monprenom sont deux variables différentes. Un nom de variable ne peut contenir d’espaces : Mon Prenom n’est pas un nom de variable correct. Les mots réservés JavaScript ne peuvent être utilisés comme noms de variable : var ne peut être un nom de variable par exemple. Oudghiri JavaScript Les variables Conseils il est intéressant de choisir un nom de variable qui rappelle sa fonction dans le programme. Et si cette fonction fait intervenir plusieurs mots, on essaie de choisir un nom utilisant une contraction de ces mots en faisant précéder chacun d’eux par une Majuscule ou _. Exemple : MonPrenom ou mon_prenom Oudghiri JavaScript Les variables Opérations sur les chaînes Concaténation + permet de concaténer plusieurs chaines. nom="Toto"; document.write("Bonjour " + nom) //Navigateur affiche //Bonjour Toto longueur d’une chaîne length retourne la longueur d’une chaîne. document.write("toto".length); //Navigateur affiche 4 Caractère charAt(n) retourne le caractère situé à la n position. document.write("toto".charAt(1)); //Navigateur affiche o Extraction substring(n, m) retourne la sous-chaîne comprise entre les positions n et m. document.write( "abcdef".substring(2,4)); //Navigateur affiche cd Oudghiri JavaScript Les variables 0pérations sur les chaînes big() : augmente la taille de la police bold() : met le texte en gras fontcolor(#cccccc) : modifie la couleur du texte fontsize("20px") : modifie la taille de la police sub() : transforme le texte en indice sup() : Transforme le texte en exposant toLowerCase() : convertit tous les caractères d’une chaîne en minuscule. toUpperCase() : Convertit tous les caractères d’une chaîne en majuscule. Oudghiri JavaScript Les variables Opérations arithmétiques Opérateurs de calcul (x = 7) : + : addition (x + 3 donne 10) - : soustraction (x − 3 donne 4) * : multiplication (x ∗ 3 donne 21) / : division (x/3 donne 2.3333333) = : affectation (x = 3 affecte la valeur 3 à la variable x) % : reste de la division (x%3 donne 1) Opérateurs d’affectation (x = 7): x+=2 : ajoute 2 à x et stocke le résultat 9 dans x x-=2 : soustrait 2 à x et stocke le résultat 5 dans x x*=2 : multiplie 2 et x et stocke le résultat 14 dans x x/=2 : divise x par 2 et stocke le résultat 3.5 dans x x%=2 : stocke le reste 1 de la divise de x par 2 dans x Opérateurs d’incrémentation et décrémentation (résultat x = 7) x++ : incrémentation (résultat x = 8) x– : décrémentation (résultat x = 6) Oudghiri JavaScript Les variables Autres opérateurs Opérateurs de comparaison : Ces opérateurs retournent une des valeurs : True ou False == : opérateur d’égalité != : opérateur de différence < : opérateur d’infériorité stricte <= : opérateur d’infériorité > : opérateur de supériorité stricte >= : opérateur de supériorité opérateurs logiques (booléens) || : OU logique. Syntaxe ((expression1)||(expression2)) && : ET logique. Syntaxe ((expression1)&&(expression2)) ! : NON logique. Syntaxe (!expression) Oudghiri JavaScript Quelques instructions Structure : if if Structure conditionnelle de test orientant l’exécution d’une portion de script du genre : si ... alors ... function parite(x){ x = Number(x); if(x%2==1){ document.write(x+" est impair"); } else{ document.write(x+" est pair"); } } parite(15); //Navigateur affiche : // 15 est impair Syntaxe : if(condition){ instruction1 } else{ instruction2 } Oudghiri JavaScript Quelques instructions Structure : for La boucle for Déclare une boucle incrémentale sur un compteur en assurant la gestion de l’incrément et de la sortie de la boucle. Syntaxe : for ( i=0 ; i<10; i++) { ... } Le premier paramètre initialise la variable compteur. Le second paramètre indique le critère qui permet de poursuivre la boucle. Dès que le critère est false la boucle est interrompue. Le dernier argument indique comment le compteur évolue à chaque tour de boucle. for(i=0; i<10; i=i+2) { document.write(i + " ; "); } Navigateur affiche : 0;2;4;6;8; Oudghiri JavaScript Quelques instructions Structure : while La boucle while Déclare une boucle qui se poursuit tant qu’une expression est vraie. La boucle while est à utiliser quand on ne connaît pas à l’avance le nombre d’incréments qui seront nécessaires au traitement. La boucle peut aussi être interrompue à tout moment par l’appel à break. var i = 500; while (i>5) { document.write(i + ";"); i = i / 2; } Navigateur affiche : 400;200;100;50;25;12.5;6.25; Oudghiri JavaScript Quelques instructions do ... while La boucle do while Cette boucle exécute un groupe d’instructions jusqu’à ce que la condition renvoie false. document.write("boucle 1 :"); var x = 10; do { document.write("x * x = " + (x * x)); x = x + 1; } while(x < 10); document.write("<br>boucle 2 :"); var x = 10; while(x < 10) { document.write("x * x = " + (x * x)); x = x + 1; } Navigateur affiche : boucle 1 : x * x = 100 boucle 2 : Oudghiri JavaScript Quelques instructions Structure : Switch switch Elle permet de mettre en oeuvre des traitements en fonction de la valeur d’une variable. Syntaxe : switch(variable) { case valeur1 : instruction1; break; case valeur2 : instruction2; break; . . case valeurN : instructionN; break; default : instruction_par_défaut } x=prompt("entrer un nom",""); switch(x) { case "tayra" : document.write(x+" est un chat"); break; case "goumi" : document.write(x+" est un chien"); break; default : document.write(x+" n’est ni chat ni chien"); } Oudghiri JavaScript Les fonctions Ecriture des fonctions En JavaScript, une fonction aura la forme suivante : function Nom_de_la_fonction (paramètre_1, paramètre_2, ...) { Liste d’instructions; } function Bonjour(nom,prenom){ document.write("Bonjour<br> votre nom est "+nom.toUpperCase()+"<br> votre prenom est "+prenom); } Le navigateur affiche Bonjour votre nom est YOUSSEFI votre prenom est Khalid Bonjour("Youssefi","Khalid"); Oudghiri JavaScript Les fonctions Fonctions récursives une fonction qui faire appel à elle-même, est dite récursive. function fact(n) { if (n==0) return 1 else return (n*fact(n-1)) } n=prompt("Entrer un entier positive","0"); document.write(n+"!="+fact(n)); Oudghiri JavaScript Les fonctions Fonctions prédéfinies Fonction eval() Evalue et exécute le code javascript contenu dans chaine. Fonction isFinite() Retourne true si le paramètre est un nombre fini, sinon retourne false. Fonction isNaN() Retourne true si le paramètre n’est pas un nombre, sinon retourne false. Oudghiri var a=1; chaine="a = a + 10"; eval(chaine); document.write("Valeur de a = "+a); //Résultat : Valeur de a = 11 document.write(isFinite("10")+"<br>"); document.write(isFinite("aa10")); //Résultat : //true //false document.write(isNaN("10")+"<br>"); document.write(isNaN("aa10")); //Résultat : //false //true JavaScript Les fonctions Fonctions prédéfinies Fonction parseFloat() Convertit le paramètre en un nombre décimal. Retourne le nombre si la conversion est possible et NaN si la conversion est impossible. document.write(parseFloat("100.5") +"<br>"); document.write(parseFloat("aa10")); //Résultat : //100.5 //NaN Fonction parseInt() Convertit le paramètre en un nombre entier. Retourne le nombre si la conversion est possible et NaN si la conversion est impossible. Oudghiri document.write(parseInt("100.5") +"<br>"); document.write(parseInt("aa10")); //Résultat : //100 //NaN JavaScript Les fonctions Fonctions prédéfinies Fonction escape() Encode les caractères spéciaux d’une chaîne de caractères en les remplaçant par leur code équivalent du type %xx. La fonction unescape() permet de réaliser l’opération inverse. document.write(escape("chaîne de caractères !")); //Résultat : cha%EEne%20de%20caract%E8res%20%21 Fonction Number() Convertit l’objet spécifié en valeur numérique. Fonction String() Convertit l’objet spécifié en chaîne de caractères. Oudghiri var jour = new Date("Jun 21, 2010 20:03:35"); //converit la date en millisecondes document.write(Number(jour)); //Résultat : 1277147015000 jour = new Date(1277147015000); //Convertit le nombre en date Mois jour, Annéee etc. document.write(String(jour)); //Résultat : Mon Jun 21 2010 20:03:35 GMT+0100 JavaScript Les objets Généralités Les objets de JavaScript, sont des entités appartenant au monde des navigateurs et du langage. Objets prédéfinis : Le navigateur qu’on utilise pour voir une page, est un objet qui s’appelle navigator. La fenêtre du navigateur est un objet nommé window. La page HTML est un objet que l’on appelle document. Un formulaire à l’intérieur d’un document, est aussi un objet appelé form. Un lien hypertexte dans une page HTML, est encore un autre objet appelé link. Nouveau objet Pour définir un objet en JavaScript : var obj1 = new Object ( );. Oudghiri JavaScript Les objets Propriétés et méthodes Propriétés Chaque objet JavaScript possède des propriétés, valeurs associées à l’objet. Si l’ordinateur était un objet au sens JavaScript, ses propriétés pourraient être par exemple : Système d’exploitation, mémoire vive, Capacité de stockage, ... Méthodes Chaque objet JavaScript possède des méthodes. Revenons à notre exemple d’ordinateur. Les méthodes d’utilisation varient entre : programmer, jouer, regarder des films, msn... Oudghiri JavaScript Les objets Hiérarchie des objets du navigateur Oudghiri JavaScript Les objets Objet Navigator Quelques propriétés appCodeName : renvoie le nom du navigateur : Ex. Netscape, Mozilla. appVersion : renvoie la version du navigateur. platform : renvoie le système d’exploitation de l’ordinateur de l’internaute. plugins : Table contenant les plugins supportés par le navigateur language : renvoie la langue du navigateur. mimeTypes : Table contenant les types mime supportés par le navigateur. document.write(navigator.appCodeName); //Résultat : Mozilla Méthode javaEnabled() permet de vérifier si le navigateur est configuré pour exécuter des applets Java. Oudghiri JavaScript Les objets Objet window La propriété closed permet de détecter si la fenêtre est ouverte ou a été fermée. Méthode alert() Affiche le paramètre dans une boîte d’alerte ou d’information. Pour un retour à la ligne en utilise \n. window.alert() et alert() : les deux sont valides. alert("Cette page contient ...\n du JavaScript ! ") Oudghiri JavaScript Les objets Objet window Méthode prompt() Elle invite l’utilisateur à saisir un texte qui sera retourné en cliquant sur Valider. Si l’utilisateur clique sur Annuer, la méthode retourne null. window.prompt() et prompt() : les deux sont valides. var numero=Number(prompt("Tapez un numéro",5)); //5 est la valeur par défaut var rest=numero%3; document.write("reste de la division de "+numero+" par 3 est "+rest); Oudghiri JavaScript Les objets Objet window Méthode confirm() Affiche le paramètre texte dans un message d’alerte avec 2 boutons de confirmation. Retourne true si le visiteur clique sur Ok. Retourne false si le visiteur clique sur Annuler ou appuye sur la touche Echap. window.confirm() et confirm() : les deux sont valides. popup=window.open("pub.html", "pub","width=200, height=200"); //On ouvre une fenêtre if(confirm("Voulez-vous fermer cette fenêtre ?")) { // On propose au visiteur de fermer la fenêtre popup.close(); } Oudghiri JavaScript Les objets Objet window Quelques méthodes open("url","name","option") : ouvre une nouvelle fenêtre dont le nom est name et qui affiche la page déterminée par url. Option permet préciser entre autres : width et height. focus() : place le focus sur la fenêtre. blur() : enlève le focus de la fenêtre. print() : Imprime la page en cours. resizeBy(x,y ) : grandit ou réduit la taille d’une fenêtre de x pixels en largeur et de y pixels en hauteur. resizeTo(x,y ) : Redimensionne une fenêtre à la taille x ∗ y pixels. Oudghiri JavaScript Les objets Objet window Quelques méthodes (Suite) setInterval(code,delai) : Lance un traitement javascript code répété à intervalle régulier de delai millisecondes. clearInterval() : Arrête l’exécution d’un traitement précédemment défini avec setInterval(). setTimeout(code,delai) : Déclenche une minuterie et appelle le code javascript fonc dans delai millisecondes. clearTimeout() : Suspend la minuterie déclarée par la méthode setTimeout(). Oudghiri JavaScript Les objets Objet document Propriété : bgColor Elle contient la couleur de fond de page. Elle permet de changer dynamiquement la couleur de fond. Exemple : <a href="javascript:void(document.bgColor=’#339999’)">Fond bleu</a> <a href="javascript:void(document.bgColor=’#66FF99’)">Fond vert</a> Ces deux liens permettant de modifier la couleur de fond après un clic. Propriété : fileSize Retourne la taille en octets de la page. Elle fonctionne uniquement sous Internet Explorer. Exemple : document.write("Taille de la page : "+document.fileSize+" octets") Oudghiri JavaScript Les objets Objet document Autres propriétés lastModified : retourne la date de dernière modification. location : retourne l’url complète de la page. protocol : retourne le type de protocole de chargement de la page (uniquement sous IE) : http, https, ... title : retourne le titre du document dans la balise title. Méthode : write() Elle écrit le paramètre dans le document, à la position de l’appel du script. Oudghiri JavaScript Les objets Objet document Méthode : getElementById() Retourne un objet HTML à partir de son id <input type="text" id="toto"> <script type="text/javascript"> document.getElementById("toto").value="texte défaut"; </script> par Méthode : getElementsByName() Retourne un tableau d’objets HTML ayant nom défini dans la propriété name de la balise de l’objet. <input type="text" name="toto"> <BR><BR> <input type="text" name="toto" value=""><BR><BR> <input type="text" name="toto" value=""><BR> <script language=javascript> document.getElementsByName("toto")[0].value = "toto 0"; document.getElementsByName("toto")[1].value = "toto 1"; document.getElementsByName("toto")[2].value = "toto 2"; </script> Oudghiri JavaScript Les objets Objet document this this se rapporte toujours à l’élément en cours. <script language="javascript"> function teste(x){ document.getElementsByName("attention")[0].innerHTML="Attention ! choisi la couleur "+x; } </script> <form> Choisissez une couleur de fond : <select onchange="teste(this.value)"> <option value="blue">blue</option> <option value="gris">gris</option> <option value="vert">vert</option> </select> </form> <p name="attention" style="color:red;"></p> Oudghiri JavaScript vous avez Les objets Objet document innerHTML est une instruction qui permet de modifier le contenu d’un paragraphe ou d’insérer un objet dans la page. <p id="paragraphe">texte texte</p> <script type="text/javascript"> document.getElementById("paragraphe").innerHTML = "Texte changé"; </script> //Navigateur affiche : Texte changé Attention : innerHTML doit être utilisé après l’insertion de l’élément sur lequel il s’applique. Oudghiri JavaScript Les objets Objet history L’objet history permet de naviguer dans l’historique du navigateur. Propriété : length Retourne le nombre d’urls stockées dans l’historique. Méthodes : back() et forward() Permettent de retourner respectivement aux page précédente et suivante. Exemple : <a href="javascript:history.back()">Page Précédente</a> Exemple : <a href="javascript:history.forward()">Page Suivante</a> Méthode : go() Force le navigateur à afficher une page de l’historique. Le paramètre indique la position de la page dans l’historique. Exemple : <a href="javascript:history.go(-2)">2 pages en arrière</a> Oudghiri JavaScript Les objets Objet location Propriétés host : retourne le nom de domaine de l’url. href : retourne l’url complète de la page en cours. pathname : retourne le chemin de la page protocol : retourne le protocole de communication de l’url. Méthode : reload() Permet de recharger la page en cours. Equivalent à l’action du bouton Actualiser. Exemple : <a href="javascript:window.location.reload()">Recharger la page</a> Méthode : replace() Elle charge dans le navigateur la page définie dans le paramètre sans l’enregistrer dans l’historique. Exemple : <a href="javascript:window.location.replace()">Recharger la page</a> Oudghiri JavaScript Les objets Objet Math L’objet Math permet de manipuler les nombres et d’accéder aux fonctions mathématiques classiques. Méthodes Fonctions classiques : abs(), cos(), sin(), tan(), exp(), log(), sqrt(). max() : retourne le maximum parmi deux nombres. min() : retourne le minimum parmi deux nombres. pow(x,y ) : retourne x à la puissance y . round(x) : retourne l’arrondi (entier) x. random() : retourne un nombre aléatoire entre 0 et 1. Oudghiri JavaScript Les objets Objet Image Propriétés fileSize : retourne la taille de l’image. width : retourne la largeur de l’image. height : retourne la hauteur de l’image. id : retourne l’identifiant de l’image. src : retourne l’adresse de l’image. Oudghiri JavaScript Les objets Objet Date() Méthodes getDate() : Retourne le jour du mois getDay() : Retourne le jour de la semaine getFullYear() : Retourne l’année getHours() : Retourne l’heure getMilliseconds() : Retourne les millisecondes de la date getMinutes() : Retourne les minutes getMonth() : Retourne le numéro du mois getSeconds() : Retourne les secondes var ladate=new Date() document.write("Nous sommes le : "); document.write(ladate.getDate() +"/"+(ladate.getMonth()+1)+ "/"+ladate.getFullYear()) Oudghiri JavaScript Les objets Objet Date() Méthodes setDate() : Affecte la date du mois setFullYear() : Affecte l’année de la date setHours() : Affecte les heures setMinutes() : Affecte les minutes setMonth() : Affecte le mois de la date setSeconds() : Affecte les secondes var MaDate=new Date(1996,10,20,12,5,0) //Là on fixe une date ladate.setFullYear(2010); document.write("Nous sommes le : "); document.write(ladate.getDate() +"/"+ (ladate.getMonth()+1)+ "/"+ladate.getFullYear()); //On affiche 20/11/2010 Oudghiri JavaScript Les objets Objet Tableau Syntaxe :var tab=new Array([val1, ..., valn]) Méthodes join(", ") : Convertit un tableau en chaîne de caractères composée de tous les éléments du tableau séparés par une virgule. x.concat(y) : Retourne la concaténation des tableaux x et y pop() : Supprime le dernier élément du tableau unshift("a","b","c") : Insère des éléments en début de tableau. push() : Insère des éléments en fin de tableau reverse() : Inverse l’ordre des éléments shift() : Supprime le premier élément du tableau sort() : Trie les éléments d’un tableau Oudghiri JavaScript Les évènements OnClick Execute une action lors du clic sur un élément : bouton, champs, ... <form> <input type="text" name="champ_texte" value="valeur d’origine" /> <input type="button" name="bouton" value="Changer" onclick="champ_texte.value=’valeur après clic’" /> </form> onChange Exécuter une action lorsqu’une option, un champ est changé. <form action="" name="formulaire"> <input type="text" name="valeur" value="Changez ce texte" onchange="affich_newvalue.value=’Valeur changée’" /> <input type="text" name="affich_newvalue" value="" /> </form> Oudghiri JavaScript Les évènements onBlur L’action est exécutée lorsque l’élément perd le focus : Ex. sortir d’une zone text dans laquelle on est rentré. <form> <input type="text" name="champ_texte" value="Ma valeur d’origine" onblur="champ_texte.value=’J ai perdu le focus’" /> </form> onFocus onFocus est le contraire de onBlur. L’action est exécutée lors du clic dans la zone text. <form> <input type="text" name="champ_texte" value="Ma valeur d’origine" onfocus="champ_texte.value=’Là j ai le focus’" /> </form> Oudghiri JavaScript Les évènements onMouseOver Exécute une action lord du survol d’une zone text, d’un bouton ... <form> <input type="text" name="champ_texte" value="Ma valeur d’origine" onmouseover="champ_texte.value=’Vous pointez sur moi’" /> </form> onMouseOut Exécute une action lorsque le pointeur est hors de la zone text. <form> <input type="text" name="champ_texte" value="Ma valeur d’origine" onmouseout="champ_texte.value=’Le curseur est parti’" /> </form> Oudghiri JavaScript