Javascript

543 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
543
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript

  1. 1. Javascript Thierry Lecroq Universit´e de Rouen FRANCE Thierry Lecroq (Univ. Rouen) Javascript 1 / 36
  2. 2. Plan 1 G´en´eralit´es sur Javascript 2 Les bases 3 Les objets pr´ed´efinis 4 Les ´ev`enements Thierry Lecroq (Univ. Rouen) Javascript 2 / 36
  3. 3. Int´erˆet Exemple <html> <head> <title>Page statique</title> </head> <body> <div> Nous sommes le 2/10/2008 </div> </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 3 / 36
  4. 4. Int´erˆet Exemple <html> <head> <title>Page dynamique</title> </head> <body> <script type = "text/javascript"> //<![CDATA[ date = new Date(); document.writeln("Nous sommes le ", date); //]]> </script> </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 4 / 36
  5. 5. Script Portion de code qui vient s’ins´erer dans une page HTML Le code du script n’est toutefois pas visible dans la fenˆetre du navigateur car il est compris entre des balises sp´ecifiques qui signalent au navigateur qu’il s’agit d’un script ´ecrit en langage JavaScript Interprˆet´e du cˆot´e client Thierry Lecroq (Univ. Rouen) Javascript 5 / 36
  6. 6. interne <script type = "text/javascript"> //<![CDATA[ code javascript //]]> </script> externe <script type = "text/javaScript" src = "url/script.js"> </script> Thierry Lecroq (Univ. Rouen) Javascript 6 / 36
  7. 7. les ´el´ements situ´es dans l’en-tˆete se comportent comme des d´eclarations, ils ne s’ex´ecutent pas directement les ´el´ements situ´es dans le corps s’ex´ecutent au fur et `a mesure du chargement de la page Thierry Lecroq (Univ. Rouen) Javascript 7 / 36
  8. 8. Javascript n’est pas Java Java a ´et´e d´evelopp´e par Sun JavaScript a ´et´e d´evelopp´e par Netscape en 1995 sous le nom de LiveScript Microsoft d´eveloppe le langage Script en 1995 ⇒ norme des langages de script par l’ECMA (European Computer Manufactures Association) bas´e sur les objets pas de classe Java est compil´e (applets), Javascript est interprˆet´e (scripts) ne peut pas lire/´ecrire dans les fichiers ne peut pas ex´ecuter d’autres programmes Thierry Lecroq (Univ. Rouen) Javascript 8 / 36
  9. 9. Utilisation de la balise <script>...</script> : d´eclaration de fonctions dans l’en-tˆete HTML/XHTML (entre <head> et </head>) appel d’une fonction ou ex´ecution d’une commande JavaScript dans <body>...</body> insertion d’un fichier externe (usuellement ’.js’) Utilisation dans une URL, en pr´ecisant que le protocole utilis´e est du JavaScript ex : <a href="javascript:instructionJavaScript;">Texte</a> Utilisation des attributs de balise pour la gestion ´ev´enementielle : <balise onEvenement="instructionJavaScript">...</balise> Thierry Lecroq (Univ. Rouen) Javascript 9 / 36
  10. 10. <?xml version="1.0" encoding="utf8"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Exemple de page HTML contenant du JavaScript</title> <script type="text/javascript"> <!-- function texte() { document.write("Texte g´en´er´e."); } // --> </script> </head> <body> <script type="text/javascript"> <!-- document.write("Vous pouvez mettre du code javascript dans le corps du document. // --> </script> <p> Ou bien dans une fonction appel´ee en cliquant <a href="Javascript:texte()">ici</a>, <p> ou en passant la souris au-dessus de <a href="" onMouseOver="texte()">cela</a>... </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 10 / 36
  11. 11. Exemple de JavaScript ins´er´e dans du code XHTML 1.0 <?xml version="1.0" encoding="utf8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple de page XHTML contenant du Javascript</title> <script type="text/javascript"> <![CDATA[ function fenetre() { alert(’Message d’alerte dans une fonction.’);} ]]> </script> </head> <body onload="alert(’Message d’alerte g´en´er´e `a la fin du chargement.’)"> <script type="text/javascript"> <![CDATA[ alert(’Message d’alerte dans le corps du document.’); ]]> </script> <p> Ceci est le corps du document. <a href="javascript:fenetre()">Message d’alerte</a>. </p> </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 11 / 36
  12. 12. Plan 1 G´en´eralit´es sur Javascript 2 Les bases 3 Les objets pr´ed´efinis 4 Les ´ev`enements Thierry Lecroq (Univ. Rouen) Javascript 12 / 36
  13. 13. 4 types de base entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16) flottant : 0.123, -0.4e5, .67E-89 bool´een : true, false chaˆıne de caract`eres : "chaine" ou ’chaine’ Thierry Lecroq (Univ. Rouen) Javascript 13 / 36
  14. 14. Typage et Variable Pas de d´eclaration des variables nbr = 10; fl = 3.141; str1 = "L’´etoile"; str2 = ’brille’; lien = ’<a href="index.htm">Home</a>’; Port´ee des variables locale (uniquement dans le script ou la fonction) var vloc = 0 ; globale (en tout point du document) vglob = 0 ; Thierry Lecroq (Univ. Rouen) Javascript 14 / 36
  15. 15. Expressions arithm´etique (3+4) * (56.7 / 89) chaˆıne de caract`eres "L’´etoile" + " " + "filante" logique temp == 37 h2o = (temp<100) ? "eau" : "vapeur"; h2o = (temp>0) ? ((temp<100) ? "eau" : "vapeur") : "glace" Thierry Lecroq (Univ. Rouen) Javascript 15 / 36
  16. 16. Op´erateurs affectation +=, -=, *=, /=, %=, &=, |=, <<=, >>= comparaison ==, !=, <, <=, >, >= arithm´etique %, ++, -- logique (´evaluation paresseuse) &&, ||, ! bit &, |, ^ (XOR), <<, >>, >>> Thierry Lecroq (Univ. Rouen) Javascript 16 / 36
  17. 17. Structures de contrˆole if else, switch case, for, while, break, continue, do while Thierry Lecroq (Univ. Rouen) Javascript 17 / 36
  18. 18. Fonctions D´efinition function nomfonction(param1, ..., paramN) { // code JavaScript return expression ; } Appel nomVariable = nomfonction(exp1, ..., expN); passage des param`etres par valeur Thierry Lecroq (Univ. Rouen) Javascript 18 / 36
  19. 19. Arguments function somme() { var argv = somme.arguments; var argc = somme.arguments.length; var result = 0; for (var i = 0 ; i < argc ; i++) { result += argv[i]; } return result; } somme(1,2,3) retourne 6 et somme(2) retourne 2 Thierry Lecroq (Univ. Rouen) Javascript 19 / 36
  20. 20. Lire/´Ecrire prompt() Ouvre une boˆıte de dialogue avec une zone saisie et 2 boutons OK et Annuler, retourne l’information lue confirm() Ouvre une boˆıte de dialogue avec 2 boutons OK et Annuler, retourne un bool´een alert() Permet d’´ecrire un message dans une fenˆetre Thierry Lecroq (Univ. Rouen) Javascript 20 / 36
  21. 21. Lire/´Ecrire Exemple <html> <head> <title>Utilisation de prompt() et d’alert()</title> </head> <body> <script type = "text/javascript"> //<![CDATA[ annee = prompt(’En quelle ann´ee sommes-nous ? ’, 2000); alert(’Vous avez r´epondu : ’ + annee); //]]> </script> </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 21 / 36
  22. 22. ´Ecrire, afficher des informations dans la fenˆetre HTML Exemple <html> <head> <title>Utilisation de document.write</title> </head> <body> <script type = "text/javascript"> //<![CDATA[ document.write(’Hello word <br/>’); //]]> </script> </body> </html> Thierry Lecroq (Univ. Rouen) Javascript 22 / 36
  23. 23. Ouverture d’une fenˆetre open(url, name, options) Permet d’ouvrir une fenˆetre et d’´ecrire dedans Exemple <script type = "text/javascript"> //<![CDATA[ fenetre = open(’’, ’’, ’height=50, width=300, status=yes’); fenetre.document.write(’<html>’); fenetre.document.write(’<head>’); fenetre.document.write(’<title>’ + ’Titre fenetre’ + ’</titl fenetre.document.write(’</head>’); fenetre.document.write(’<body>’); fenetre.document.write(’Texte dans la fenetre’); fenetre.document.write(’</body>’); fenetre.document.write(’</html>’); //]]> </script> Thierry Lecroq (Univ. Rouen) Javascript 23 / 36
  24. 24. Ouverture d’une fenˆetre Les options directories : barre de liens menubar : barre de menu status : barre de statut location : barre d’adresse scrollbars : ascenseurs resizable : redimensionnement par l’utilisateur height : hauteur width : largeur left : position gauche top : position haute fullscreen : plein ´ecran Thierry Lecroq (Univ. Rouen) Javascript 24 / 36
  25. 25. Plan 1 G´en´eralit´es sur Javascript 2 Les bases 3 Les objets pr´ed´efinis 4 Les ´ev`enements Thierry Lecroq (Univ. Rouen) Javascript 25 / 36
  26. 26. Les ´ev`enements onclick : un clic du bouton gauche de la souris sur une cible onMouseOver : passage du pointeur de la souris sur une cible onblur : une perte de focus d’une cible onfocus : une activation d’une cible onselect : une selection d’une cible onchange : une modification du contenue d’une cible onsubmit : une soumission d’un formulaire onload : un chargement d’une page onunload : la fermeture d’une fenetre ou le chargement d’une page autre que la courante Thierry Lecroq (Univ. Rouen) Javascript 26 / 36
  27. 27. Les ´ev`enements Exemple <a href="" onclick="alert(’Bonjour’)">Cliquez</a> Thierry Lecroq (Univ. Rouen) Javascript 27 / 36
  28. 28. Plan 1 G´en´eralit´es sur Javascript 2 Les bases 3 Les objets pr´ed´efinis 4 Les ´ev`enements Thierry Lecroq (Univ. Rouen) Javascript 28 / 36
  29. 29. L’objet document Propri´et´e title M´ethode write Thierry Lecroq (Univ. Rouen) Javascript 29 / 36
  30. 30. L’objet Date var maDate = new Date() getYear() : 2 chiffres getFullYear() : 4 chiffres getMonth() : 0 – 11 getDate() : 1 – 31 getDay() : 0 – 6 (dimanche – samedi) getHours() : 0 – 23 getMinutes : 0 – 59 getSeconds() : 0 – 59 Thierry Lecroq (Univ. Rouen) Javascript 30 / 36
  31. 31. L’objet String Lorsqu’on d´efinit une constante ou une variable chaˆıne de caract`eres, JavaScript cr´ee d’une fa¸con transparente une instance String 1 propri´et´e : length les balises HTML/XHTML ont leur ´equivalent en m´ethode Liste (non exhaustive) des m´ethodes : bold(), italics(), fontcolor(), fontsize(), small(), big(), toUpperCase(), toLowerCase(), sub(), sup(), substring(), eval(), split(), replace() Thierry Lecroq (Univ. Rouen) Javascript 31 / 36
  32. 32. L’objet RegExp var re = new RegExp(motif, option) r`egles classiques pour la formation des motifs options possibles : "g", "i", "gi", "" Les m´ethodes test() : bool´een exec() : retourne la premi`ere occurrence match() : s’applique `a un objet de type String Thierry Lecroq (Univ. Rouen) Javascript 32 / 36
  33. 33. L’objet Math Propri´et´es : Math.PI et Math.E M´ethodes : atan(), acos(), asin(),tan(), cos(), sin(), abs(), exp(), log(), max(), min(), pow(), round(), sqrt(), floor(), random() Thierry Lecroq (Univ. Rouen) Javascript 33 / 36
  34. 34. Les tableaux var T = new Array() Thierry Lecroq (Univ. Rouen) Javascript 34 / 36
  35. 35. Les tableaux classiques var jours = new Array(); var jours = new Array("Lundi", "Mardi", "Mercredi, "Jeudi", "Vendredi", "Samedi", "Dimanche"); jours[0] jours.length Thierry Lecroq (Univ. Rouen) Javascript 35 / 36
  36. 36. Les tableaux associatifs var tableau = new Array(); tableau["un"] = "La premi`ere cha^ıne"; tableau["deux"] = "La deuxi`eme cha^ıne"; tableau["tnt"] = "Plein d’autres cha^ınes"; tableau["un"] tableau.length Thierry Lecroq (Univ. Rouen) Javascript 36 / 36
  37. 37. Les m´ethodes de l’objet Array var tableau3=tableau1.concat(tableau2); var chaine=tableau.join(s´eparateur); tableau.pop(); tableau.push(liste d’´el´ements); tableau.reverse(); tableau.shift(); tableau.unshift(liste d’´el´ements); tableau2=tableau1.slice(d´ebut, fin); tableau.sort(); tableau.splice(d´ebut, longueur); tableau.splice(d´ebut, longueur, liste d’´el´ements); Thierry Lecroq (Univ. Rouen) Javascript 37 / 36
  38. 38. L’objet form Attributs name : nom action : fichier method : get ou post enctype : encodage target : cadre cible (_blank pour une nouvelle page) M´ethodes submit() : soumission reset() : remise `a z´ero ´Ev`enements onSubmit() : lors de la soumission onReset() : lors de la remise `a z´ero Thierry Lecroq (Univ. Rouen) Javascript 38 / 36
  39. 39. Les ´el´ements de formulaires input text <input type="text" id="motclef" value="Mot clef"> document.forms["monFormulaire"].elements["motcle"] Les propri´et´es : value : valeur defaultValue : valeur par d´efaut form : objet formulaire maxLength : longueur maximale Les m´ethodes : blur() : perte de focus focus() : prise de focus select() : donne le focus et s´elcetionne la zone de saisie Les ´ev´enements : onBlur : lors de la perte de focus onChange : lors d’un changement onFocus : lors de la prise de focus Thierry Lecroq (Univ. Rouen) Javascript 39 / 36
  40. 40. Les ´el´ements de formulaires input button Les propri´et´es : value : libell´e Les m´ethodes : click() : clic Les ´ev´enements : onClick : lors d’un clic Thierry Lecroq (Univ. Rouen) Javascript 40 / 36
  41. 41. Les ´el´ements de formulaires select Les propri´et´es : size : nombre de lignes options : tableau value : valeur text : libell´e defaultSelected : true of false selected : true of false selectedIndex : indice de la ligne s´electionn´ee Thierry Lecroq (Univ. Rouen) Javascript 41 / 36
  42. 42. Exemple <script type="text/javascript"> <!-- function basculer(orig, dest) { if (orig.options.selectedIndex >= 0) { var o = new Option(orig.options[orig.selectedIndex].text, orig.options[orig.selectedIndex].value); dest.options[dest.options.length]=o; orig.options[orig.selectedIndex]=null; } else { alert("Aucune ligne s´electionn´ee"); } } function monter(f) { var no=f.choix.selectedIndex; if (no<0) { return true; } if (no>=1) { inverser(f.choix, no, no-1); } } function baisser(f) { var no=f.choix.selectedIndex; if (no<0) { return true; } if (no<f.choix.options.length-1) { inverser(f.choix, no, no+1); } } Thierry Lecroq (Univ. Rouen) Javascript 42 / 36
  43. 43. Exemple function inverser(liste, ind1, ind2) { var valeur=liste.options[ind1].value; var texte=liste.options[ind1].text; liste.options[ind1].value=liste.options[ind2].value; liste.options[ind1].text=liste.options[ind2].text; liste.options[ind2].value=valeur; liste.options[ind2].text=texte; liste.selectedIndex=ind2; } function verifierListe(f) { if (f.choix.options.length == 0) { alert("Indiquez les raisons vous ayant pouss´e `a cr´eer votre site"); return false; } for (var i=0; i<f.choix.options.length; i++) { f.choix.options[i].selected=true; } f.submit(); } // --> </script> Thierry Lecroq (Univ. Rouen) Javascript 43 / 36
  44. 44. Exemple <form id="nomFormulaire" method="get" action="formu.html"> Double cliquez sur les raisons qui vous ont pouss&eacute; &agrave; cr&eacute;er votr Internet, puis ordonnez les par ordre d’importance : <table> <tr> <td> Possibilit&eacute;s :</br> <select id="raison" size="5" multiple="multiple" style="width:250px;" onDblClick="basculer(this, this.form.choix)"> <option value="1">Apprendre le langage</option> <option value="2">Parler de ma passion</option> <option value="3">Cr&eacute;er une activit&eacute; commerciale</option> <option value="4">&Eacute;changer avec le monde entier</option> <option value="5">Faire mon m&eacute;tier</option> </select> </td> Thierry Lecroq (Univ. Rouen) Javascript 44 / 36
  45. 45. Exemple <td> Vos choix :<br/> <select id="choix" size="5" multiple="multiple" style="width:250px;" onDblClick="basculer(this, this.form.raison)"> </select> </td> <td> <input type="button" value="Monter" onclick="monter(this.form)"><br/> </td> <td> <input type="button" value="Baisser" onclick="baisser(this.form)"><br/> </td> </tr> </table> <p> <input type="button" value="Valider" onclick="verifierListe(this.form)"> </p> </form> Thierry Lecroq (Univ. Rouen) Javascript 45 / 36
  46. 46. Plan 1 G´en´eralit´es sur Javascript 2 Les bases 3 Les objets pr´ed´efinis 4 Les ´ev`enements Thierry Lecroq (Univ. Rouen) Javascript 46 / 36
  47. 47. D´efinition d’objets simples Exemple function Chien(nom, race, maitre) { this.nom = nom; this.race = race; this.maitre = maitre; this.print = printChien; } function printChien() { document.write("Chien ", this.nom, " de race ", this.race, " appartenant &agrave; ", this.maitre, "<br/ } Thierry Lecroq (Univ. Rouen) Javascript 47 / 36
  48. 48. D´efinition d’objets simples Exemple function printChien() { with (this) { document.write("Chien ", nom, " de race ", race, " appartenant &agrave; ", maitre, "<br/>"); } } rantanplan = new Chien("Rantanplan", "ind´efinie", "Lucky Luke" rantanplan.print(); Thierry Lecroq (Univ. Rouen) Javascript 48 / 36

×