Introduction Le language Javascript Intéraction avec le navigateur. Le JavaScript. Nicolas Faessel. Janvier 2010

Transcription

1 Janvier 2010

2 Outline Boîtes de dialogue Appel de fonction Javascript : les événements

3 Plan Boîtes de dialogue Appel de fonction Javascript : les événements

4 Interactivité sur le Web HTML permet seulement des liens et des images réactives Tout autre action interactive (formulaire) comprend : envoi d une requête au serveur traitement sur le serveur envoi de la réponse au client interprétation par le client du résultat ==> temps de réponse LONG Solution : JavaScript

5 Motivations Exécution de code sur le poste du client pour : Améliorer l interactivité (temps de réponse plus court) Améliorer les débits sur le réseau (éviter des envois erronés) Proposer des pages dynamiques (animation, personnalisation...)

6 Caractéristiques JavaScript est un langage interprété multi-plateforme développé par Netscape (nom d originelivescript) avec différentes versions 1.0, 1.1,

7 Le noyau JavaScript Au niveau du langage, on distingue : le noyau JavaScript (le coeur du langage) comportant des objets prédéfinis, des opérateurs, des structures... un ensemble d objets associés au navigateur (fenêtres, documents, images...) Il existe aussi la possibilité d exécuter du code JavaScript du coté du serveur (communications avec une BD, des fichiers...) mais l usage est plus restreint.

8 ECMAScript L organisme de standardisation ECMA (European Computer Manufacturers Association) a défini un standard ECMAScript basé sur JavaScript 1.1. Ce standard ECMA-262, repris par l ISO définit les caractéristiques du noyau du langage Aujourd hui, JavaScript 1.3 est conforme à cette norme ECMA-262 mais possède quelques extensions quelques différences au niveau du modèle objet du navigateur

9 Plan Boîtes de dialogue Appel de fonction Javascript : les événements

10 Balise <script> Pour déclarer du code JavaScript dans les documents HTML, on le place entr les balises Ce code JavaScript peut être placé : dans l en-tête (ensemble de fonctions appelées à partir d évènements, d URL ou directement) dans le corps du document (pour un traitement synchrone lors de l interprétation du document) dans un fichier séparé

11 Exemple : Script en entête I <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <body> < /body> < /html> <head> <title> < /title> <script type="text/javascript"> <! f o n c t i o n bonjour ( ) { a l e r t ("Bonjour" ) ; } / / > < /script> < /head>

12 Exemple : Script dans un fichier séparé I <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title> < /title> <script type="text/javascript" src="monfichier.js">< /script> < /head> <body> < /body> < /html>

13 Remarque : Certains navigateurs n interprètant pas JavaScript on peut mettre le code entre commentaires Commentaire html <! Ceci est un commentaire HTML > Commentaire JavaScript // Ceci est un commentaire JavaScript

14 Balise <script> (2) Exemple JavaScript en XHTML <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head><title>mon document< /title> <script type="text/javascript"> / / <! [ CDATA[ a l e r t ("<Ceci est un script compatible avec XHTML>" ) ; / / ] ] > < /script> < /head> <body / > < /html> La balise <![CDATA[ ]]> permet d ignorer le contenu de cette balise au niveau du processeur xml

15 Le langage JavaScript Variables (faiblement typées) Opérateurs et instructions (ceux du langages C) Méthodes : Objets : globales (associées à tous les objets) fonctions définies par l utilisateur prédéfinis (String, Date, Math...) liés à l environnement (window, document...) Les Entrées/Sorties sont déléguées à l hébergeant Commentaires comme en langage C : // une seule ligne ou / pour plusieurs lignes /

16 Les variables Variable non typée. => peuvent changer de type en cours d execution ==> bien faire attention : de préférence, une variable doit garder le même type du début à la fin de l execution Déclarée à l aide du mot clé var

17 Les variables (2) Ne pas faire var i ; //declaration i = 2; //entier i = " bonjour " ; //chaine de caracteres i = true ; //booleen Ce qu il faut faire var i, chaine, bool ; //Declaration de 3 variables i = 2; chaine = " bonjour " ; bool = true ;

18 Affectations affectation simple : = nom=valeur affectation conditionnelle : var = (condition)? exp_alors : exp_sinon X = (a > b )? "plus": "moins" affectation avec opération : += -= =... Ex : X +=3; // equivaut a X=X+3; ATTENTION : distinguer l affectation (=) et la comparaison (==)

19 Types primitifs Nombre ( Number) Entier : décimal ou hexa (0x4F) ou octal (075) Réel ( E-12) Booléen (Boolean) : true ou false Chaîne de caractères (String) chaine "chaine" Les codes \t (tabulation) \n (à la ligne) \r (retour chariot) \b (backspace) \f (saut de page) sont reconnus

20 Conversions Typage faible Type String = type dominant JavaScript fait des conversions implicites selon les besoins Exemple : N=12; // N numerique T="34"; // T chaine de caracteres X=N+T; // X est la chaine de caracteres "1234" Il existe des types particuliers : Null (null), Undefined (undefined) et des nombres particuliers : Infinity, Infinity, NaN (Not a Number)

21 Opérateurs (1) Opérateurs de comparaison égalité : == (cette syntaxe est également utilisée pour comparer deux chaînes de caractères) différent à :!= (même remarque que ci-dessus) inférieur ou égal à : =< supérieur ou égal à : >= inférieur à : < supérieur à : > et logique : && ou logique : identique à : === non identique à :!== et bit à bit : & ou bit à bit :

22 Opérateurs Ceux du langage C arithmétiques : + / % in/décrémentation (pré/post indexée) : k++ ++k logiques : && (ET) (OU)! (NON) bit à bit : & (AND) (OR) ^(XOR) ~(Not) décalages : >> (à droite) << (à gauche) >>> (non signé) concaténation de chaînes : + ATTENTION : L opérateur + est l addition ou la concaténation

23 Instructions if (condition) { instructions } [ else {instructions } ] for (i=1 ; i<n ; i++) { i n s t r u c t i o n s } while ( c o n d i t i o n ) { i n s t r u c t i o n s } break Sortie d une boucle continue Itération suivante d une boucle var Déclaration d une variable

24 Fonctions / / Declaration de la fonction / / Nombre de parametres quelconque function nom(p1,p2... ) { instructions ; return code; } / / Appel de la fonction X = nom( 5, "jours" ) ; void : fonction retourne undefined

25 Méthodes globales escape("car" ) ; / / > code ASCII (\%XX) escape("é" ) ; / / ==> \%E9 unescape("\%exp" ) ; / / > caractere de code ASCII exp unescape("\%26" ) ; / / ==> & eval("exp" ) ; / / > evaluation d une expression et retour / / d un nombre eval("15"+"15" ) ; / / ==> 30 eval("t"+"["+2+"]" ) ; / / ==> valeur de T [ 2 ]

26 Méthodes globales (2) isnan(k ) ; / / retourne VRAI si k est un NaN c est a dire / / si k n est pas un nombre (Is Not A Number) isfinite(k ) ; / / retourne faux si k est un NaN, / / +infini ou infini et vrai sinon parseint("chn", b ) ; / / > entier chn dans la base b (0 ou NaN sinon) parsefloat("chn" ) ; / / > flottant chn (0 ou NaN sinon) parseint("15", 1 0 ) ; / / > 15 parseint("f", 1 6 ) ; / / > 15 parseint("15.99", 1 0 ) ; / / > 15 parsefloat("15,99e-12" ) ; / / > 1.599e 11

27 Objets en JavaScript Attention : nous n abordons pas ici la notion de programmation objet. Il existe plusieurs objet prédéfini en JavaScript. Un objet peut être vu comme un package contenant plusieurs fonctions, que l on accède par une notation pointée : Objet.function(); Par exemple, pour utiliser une fonction de conversion de chaine de caractère en caractère majuscule, on utilisera le code suivant : String.toUpperCase("Ma chaine de caractere");

28 Les Objets ECMAScript Un exemple de classes "prédéfinies" : Array (tableau), String (chaînes de caractères), Boolean (booléen), Number (nombre), Date Math (structures mathématiques).

29 String : chaînes de caractères Propriété : length Méthodes de manipulation de chaînes : String.indexOf("chaine","s/chn",pos), String.substring("chaine", debut,fin+1), String.charAt("chaine", n), String.lastIndexOf("chaine", "sous-chaine), String.toLowerCase("Chaine"), String.toUpperCase(), String.split(), S t r i n g. indexof ( " Bonjour ", " o " ) ; // --> 1 S t r i n g. l a s t I n d e x O f ( " Bonjour ", " o " ) ; // --> 4 S t r i n g. charat ( " Bonjour ", 3 ) ; // --> j S t r i n g. s u b s t r i n g ( " Bonjour ", 3, 7 ) ; // --> jour S t r i n g. touppercase ( " Bonjour " ) ; // --> BONJOUR

30 String : chaînes de caractères Ce que permet la notion d objet (que nous n aborderons pas) : var T = Bonjour ; T.indexOf ("o" ) ; / / > 1 T.lastIndexOf("o" ) ; / / > 4 T.charAt( 3 ) ; / / > j T.substring( 3, 7 ) ; / / > jour T.toUpperCase ( ) ; / / > BONJOUR

31 String : Méthodes "HTML" anchor, link : "Institut".anchor("INT"); ==> <A NAME="INT">Institut</A> "Institut".link(" ==> <A HREF=" </A> big, sub, sup, blink, bold, fixed, italics, small, strike ==> "Bonjour".big; <BIG>Bonjour </BIG> fontcolor, fontsize "Bonjour".fontsize(5); ==> <FONT SIZE=5>Bonjour</FONT>

32 Math : Structures mathématiques Propriétés : constantes mathématiques Math.E, Math.PI, Math.SQRT2, Math.SQRT1_2, Math.LN2, Math.LN10, Math.LOG2E, Math.LOG10E Méthodes : fonctions usuelles Trigonométriques : cos, sin, tg, acos, atan, asin, atan2 abs (valeur absolue) ceil (entier inf), floor (entier sup), round (entier + proche) exp, log, sqrt, pow(x,a) max (a,b), min (a,b) random > 0 < r < 1

33 Objet Array Tableau d éléments join : concatène tous les éléments en une chaîne de caractères séparés par une virgule ou un séparateur passé en argument reverse : transpose le tableau (1<->N 2<-> N-1...) sort : trie les éléments dans l ordre lexicographique ou selon la relation d ordre passée en argument

34 Plan Boîtes de dialogue Appel de fonction Javascript : les événements Boîtes de dialogue Appel de fonction Javascript : les événements

35 Boîtes de dialogue Boîtes de dialogue Appel de fonction Javascript : les événements Parmi les objets JavaScript du navigateur, on distingue 3 objets de type window qui proposent des fenêtres prédéfinies pour faire des Entrées/Sorties : alert : fenêtre d affichage d un message avec un boutonde fermeture confirm : fenêtre de test avec 2 boutons pour valider ou annuler prompt : fênêtre de saisie d une information avec un champ de saisie, et 2 boutons pour valider ou annuler

36 Boîtes de dialogue (2) I Exemple Boîtes de dialogue Appel de fonction Javascript : les événements function t e s t _ a l e r t ( ) { var msg_alert =" Texte du message d a l e r t " ; a l e r t ( msg_alert ) ; } function test_ confirm ( ) { var msg_confirm =" Voulez vous continuer? " ; var res=confirm ( msg_confirm ) ; //confirm renvoi une valeur booleene (true ou false) i f ( res ) { a l e r t ( " vous avez c l i q u e sur OK " ) ; } else { a l e r t ( " Vous avez c l i q u e sur annuler " ) ; } }

37 Boîtes de dialogue (2) II Exemple Boîtes de dialogue Appel de fonction Javascript : les événements function test_prompt ( ) { var msg_prompt=" Texte de votre question " ; var t x t _ d e f a u t =" Texte de l a zone de s a i s i e par defaut " ; //prompt renvoi le texte saisi ou null (si click sur annuler) var res=prompt ( msg_prompt, t x t _ d e f a u t ) ; i f ( res!= n u l l ) { a l e r t ( " vous avez s a i s i : " + res ) ; } else { a l e r t ( " Vous avez c l i q u e sur annuler " ) ; } }

38 Boîtes de dialogue (3) I Exemple Boîtes de dialogue Appel de fonction Javascript : les événements <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml :lang="fr-fr"> <head> <title>< /title> <script type="text/javascript" src="dialogues.js">< /script> < /head> <body> <form> <input type="button" onclick="test_alert()" value="alert" / > <input type="button" onclick="test_confirm()" value="confirm" / > <input type="button" onclick="test_prompt()" value="prompt" / > < /form> < /body> < /html> Listing 1./Exemples/dialogues.html

39 Appeler une fonction JavaScript Boîtes de dialogue Appel de fonction Javascript : les événements Fonctions JavaScript peuvent être appelées depuis des évènements associés aux balises. Par exemple : le click de la souris sur un lien (pseudo-url) : <a href="javascript:alert( Coucou. )">Mon Lien</a> au chargement de la page : <body onload="mafonction()"> sur le click d un bouton : <input type="button"onclick="mafonction()"> en utilisant la propriété d événement d un élément : document.getelementbyid( exemple1 ).onclick = appel_de_fonction

40 Les événements JavaScript Boîtes de dialogue Appel de fonction Javascript : les événements Evénement onload onunload onbeforeunload onclick ondblclick onmousedown onmouseup onmousemove onkeydown onkeyup onkeypressed onblur onchange onsubmit onreset onselect onscroll onbeforeprint onafterprint Survient après le chargement de la page lors de la fermeture de la page juste avant la fermeture de la fenêtre lors d un clic sur le bouton gauche lors d un double-clic sur le bouton gauche quand on enfonce le bouton de la souris (gauche ou droit) quand on relâche le bouton de la souris lorsque la souris se déplace dans un objet du document quand on enfonce une touche du clavier quand on relâche la touche quand on enfonce une touche du clavier quand l élément perd le focus quand l élément perd le focus et que son contenu a changé juste avant l envoi d un formulaire lors de la réinitialisation du formulaire quand le contenu d un élément est sélectionné lors de l utilisation de la barre de défilement avant l impression (après le clic sur le bouton Ok de la fenêtre d impression) après l impression

41 Exemple d évènement Boîtes de dialogue Appel de fonction Javascript : les événements <html><head> <title>essai DHTML< /title> <script type="text/javascript"> <! f u n c t i o n I n i t ( ) { document. getelementbyid ( exemple1 ). onclick = miseengras ; document. getelementbyid ( exemple1 ). ondblclick = normal ; } f u n c t i o n miseengras (event) { t h i s.style. fontweight="bold" ; t h i s.style.color="red" ; } f u n c t i o n normal (event) { t h i s.style. fontweight="normal" ; t h i s.style.color="" ; } / / > < /script> < /head> <body onload="init();"> <p id="exemple1">exemple avec un éévnement souris. < / p> < /body>< /html>