dw_crs6

Developpement WebJavascript et Ajax


Jean-Michel [email protected]

http://www.info.univ-angers.fr/pub/richer

25 janvier 2010

1 / 81


Objectif

Objectif du cours revisiter Javascript et les fonctionnalites associees au

langage dans le cadre du developpement Web une bre`ve introduction au langage en guise de rappel est

suivie par letude de la couche objet on termine par une introduction a` AJAX

2 / 81

Developpement WebJavascript et AjaxPlan

Plan

1 Le Langage Javascript

2 Fonctionnalites du langage

3 La couche Objet en Javascript

4 Ajax

3 / 81

Developpement WebJavascript et AjaxLe Langage Javascript

Caracteristiques du langage

cree par Netscape en 1995 (LiveScript) utilise cote client pour dynamiser les pages web langage tre`s particulier (fonctionnel) integration dune couche objet utilise aujourdhui pour creer des interfaces riches

Attention !Javascript nest pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistre`s differents.

4 / 81





5 / 81





6 / 81





7 / 81





8 / 81





9 / 81


ECMAScript

Definition (ECMAScript - ECMA-262)Le langage a ete standardise par ECMA en 1996, 1997, ontrouve plusieurs implantations :

JavaScript (Firefox) JScript version Microsoft (IE) ActionScript version Adobe

10 / 81


Utilisation de Javascript

Utilisation de Javascript langage lie aux navigateurs en dehors des navigateurs : Rhino

Rhino - http://www.mozilla.org/rhino/ implantation de Javascript en Java rhino nom-fichier.js utiliser print au lieu de document.write ou alert

11 / 81





12 / 81





13 / 81





14 / 81





15 / 81


Utilisation de Javascript pour le navigateur

pour le navigateur introduction grace a` la balise script utilise dans la partie ou

Exemple Javascript

1 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 3 4 titre de la page5 6 var texte=Hello world!;7 8 9

10 11 12 document.write(texte);13 writecoucou();14 15 16

16 / 81

Developpement WebJavascript et AjaxFonctionnalites du langage

Fonctionnalites et specificites

Description rapide

17 / 81


Specificites

Specificites liees a` la securite ne peut pas lire ou ecrire dans le syste`me de fichier de la

machine ne peut executer de programme externe pas de connexion autre que serveur web

18 / 81


Specificites



19 / 81


Specificites



20 / 81


Les identificateurs

identificateurs definition classique : caracte`re suivi de carate`res ou

chiffres. on peut utiliser le caracte`re souligne on peut egalement utiliser $ (cf frameworks Ajax)

21 / 81


Les identificateurs



22 / 81


Les identificateurs



23 / 81


Structures de controle

Structures de controleJavascript posse`de les structures de controle du langage C :

if then else for, while, do while break, continue switch plus le for in (foreach) pour les tableaux et les exceptions throw, try, catch

24 / 81


Les variables

VariablesLes variables sont caracterisees par :

ce sont des objets labsence de typage statique (typage dynamique) elles peuvent etre declarees a` tout moment on peut utiliser le mot-cle var pour les declarer

25 / 81


Les variables



26 / 81


Les variables



27 / 81


Les variables



28 / 81


Les fonctions

FonctionsLes fonctions sont caracterisees par :

ce sont des objets elles peuvent etre declarees a` tout moment on les declare grace au mot cle function

29 / 81


Les fonctions



30 / 81


Les fonctions



31 / 81


Les fonctions principales

Fonctions principales eval(string) : evalue le code Javascript Number(var) : convertir en nombre String(var) : convertir en chane int parseInt(string[,radix]) : convertir en entier

en fonction de la base float parseFloat(string) : convertir en reel encoreURI(uri) decodeURI(uri)

32 / 81


Utilisation des fonctions principales

Exemple avec des fonctions principales

1 print(parseInt(ff,16)); // 25523 var str= 256;4 var x = 1 + str;5 print(x); // 1 25667 var x =1 + Number(str) ;8 print(x); // 2579

10 print(eval(2 + 2 * 8 - 3)); // 151112 // JSON13 var person=eval("({ prenom : Sid, nom : Meyer })");14 print(person); // object Object15 print(person.prenom+ +person.nom); // Sid Meyer1617 var uri=encodeURI(http ://www.site.fr/x\n=1?value=2


Objets de base

Objets de base en javascriptchacun des objets posse`de des methodes propres :

String Boolean Date Number Function Array RegExp (expression regulie`re)

34 / 81


Determiner le type dun objetlinstruction typeofelle permet de determiner le type dune variable ou dunidentificateur.

Exemple typeof

1 var b=true;2 var s=coucou;3 var i=10;4 var k;5 var tab=[1,2,3];6 var p=null;7 var regex=/\w+/;8 function f() { }9

10 print(typeof b); // boolean11 print(typeof s); // string12 print(typeof i); // number13 print(typeof f); // function14 print(typeof k); // undefined15 print(typeof tab); // object16 print(typeof dummy); // undefined17 print(typeof p); // object18 print(typeof regex); // function

35 / 81


Lobjet Boolean

Booleanpermet de representer des valeurs booleeennes

1 attributs : TRUE FALSE

2 methodes : toSource() toString()

36 / 81


Utiliser Boolean

Exemple avec Boolean

1 var vrai=Boolean(true);2 var faux=Boolean();3 var p=Boolean.TRUE;45 print(vrai); // true6 print(faux); // false78 print(vrai.toString()); // true9

10 var p=vrai.valueOf();11 print(p=+p); // p=true

37 / 81


Lobjet Number

Numberpermet de representer les nombres entiers et les reels

1 attributs : MAX VALUE MIN VALUE NaN NEGATIVE INFINITY POSITIVE INFINITY

2 methodes : toSource() toString(radix) toFixed(precision) notation avec chiffres apre`s la

virgule

38 / 81


Utiliser Number

Exemple avec Number

1 var n1=new Number(255) ; // ou n1=255 ;2 var n2=new Number(1.5) ; // ou n2=1.5 ;34 print(Number.MAX VALUE); // 1.7976931348623157e+3085 print(n1.toString()) ; // 2556 print(n1.toString(2)) ; // 111111117 print(n1.toString(8)) ; // 3778 print(n1.toString(16)); // ff9

10 n1=n1*n2;11 print(n1); // 382.51213 print(n2.toString(16)); // 1.814 print(n2.toFixed(2)); // 1.50

39 / 81


Lobjet StringStringpermet de representer les chanes de caracte`res

1 attributs : length longueur de la chane

2 methodes : integer charAt(index) String concat(s1,s2,...) integer indexOf(search[,fromIndex]) integer lastIndexOf(search[,fromIndex]) String slice(begin,end) extraire la sous-chane Array split(separator[,limit]) String substr(start,length) extraire la

sous-chane String toLowerCase() String toUpperCase()

40 / 81


Lobjet String et les expressions regulie`res

Methodes en rapport avec les expressions regulie`respermet de representer les chanes de caracte`res

Array match(regex) Boolean search(regex) Boolean replace(regex,newstr or function)

41 / 81


Utiliser String

Exemple avec String

1 print(coucou.length); // 623 var text=papa fume la pipe;4 print(text.indexOf(pa)); // 05 print(text.lastIndexOf(pa)); // 267 print(text.split( )); // papa,,,,fume,,la,pipe89 print(text.slice(8,-2)); // fume la pi

1011 print(text.match(/p\w+/g)); // papa,pipe1213 var newtext=text.replace(/pipe/,cigarette);14 print(newtext); // papa fume la cigarette1516

42 / 81


Lobjet RegExp

RegExppermet de representer les expressions regulie`res

methodes : test(string) retourne true si il y a correspondance exec(string) retourne un tableau qui contient les motifs

qui correspondent a` lexpression

43 / 81


Rappel des expressions regulie`res

Expression regulie`re elle peut etre introduite par /.../q ou` q est un

qualificateur (g = global, i = insensible a` la casse) + au moins une occurrence * 0 ou plusieurs occurrences () permet disoler une sous-expression \w caracte`re alphanumerique ou caracte`re souligne \d chiffre \s un espace ou \t\n\f\v

44 / 81


Utiliser RegExp

Exemple avec RegExp

1 var regex1=/\d+/;2 var regex2=new RegExp("(\\d+)","g");3 var regex3=/(\d+)\/(\d+)\/(\d+)/;45 var dob=30/09/1970;67 print(dob.match(regex1)); // 308 print(dob.match(regex2)); // 30/09/19709

10 print(regex2); // /(\d+)/g111213 print(regex3.test(dob)); // true14 print(regex3.exec(dob)); // 30/09/1970,30,09,19701516 print(dob.replace(regex3,$3-$2-$1)); // 1970-09-30

45 / 81


Lobjet Math

Math - les attributspermet de realiser les calculs complexes

E : constante dEuler (2,718) LN2 : logarithme neperien de 2 (0,693) LN10 : logarithme neperien de 10 (2,302) LOG2E : logarithme a` base 2 de E (1,442) LOG10E : logarithme a` base 10 de E (0,434) PI : valeur du nombre PI (3,14159) SQRT1 2 : racine carree de 1/2 (0,707) SQRT2 : racine carree de 2 (1,414)

46 / 81


Lobjet Math

Math - les methodes abs acos, asin , atan, , atan2 ceil, floor cos, sin, tan exp, log, pow min, max random : retourne une valeur entre 0 et 1 round sqrt

47 / 81


Utiliser Math

Exemple avec Math

1 print(Math.cos(Math.PI)); // -12 print(Math.sin(Math.PI)); //1.2246467991473532e-1634 print(Math.sqrt(2)); //1.41421356237309515 print(Math.pow(2,10)) ; // 102467 print(Math.round(Math.sqrt(2))) ; // 18 print(Math.random()) ; //0.39466043767302349

48 / 81


Lobjet Date

Date - les methodespermet de representer les dates

Date() Date(milliseconds) Date(y,m,d) getDay(), getMonth(), getYear(), getFullYear() getHours(), getMinutes(), getSeconds() toGMTString toLocaleString toUTCString

49 / 81


Utiliser Date

Exemple avec Date

1 var today=new Date();2 print(today); //Fri Feb 13 2009 16 :27 :30 GMT+0100 (GMT+01 :00)3 print(today.toLocaleDateString()); //fevrier 13, 20094 print(today.toUTCString()); // Fri, 13 Feb 2009 15 :38 :52 GMT5 print(new Date(1000)); // Thu Jan 01 1970 01 :00 :01 GMT+0100 (GMT+01 :00)6 print(new Date(2009,0,15)); // Thu Jan 15 2009 00 :00 :00 GMT+0100 (GMT+01 :00)78 print(Date.parse(today.toString())); // 1234539588000

50 / 81


Lobjet Array

Array - attributs et methodespermet de representer et traiter les tableaux

1 attributs : length

2 methodes : Array concat(array1,array2) string join(string) push : ajoute un nouvel element a` la fin unshift : ajoute un nouvel element au debut pop : supprime et retourne le dernier element shift : supprime et retourne le premier element reverse : inverse lordre des elements

51 / 81


Lobjet Array

Array - autres methodes Array(n) : construit un tableau de longueur n Array(n1,...,nk) : construit un tableau dont les

elements sont n1, . . . ,nk slice(begin,end) : extrait une partie du tableau splice(index,howMany,e1, ..., en : ajoute et

supprime de nouveaux elements sort() : tri des elements sort(compare function) : tri suivant la fonction

52 / 81


Utiliser Array

Exemple avec Array

1 var a=[3,8,2,7];23 print(a.length) ; // 44 print(a.reverse()); // 7,2,8,35 a.sort(); print(a) ; // 2,3,7,867 var a=new Array(1,7,3,7,8,2,1);8 for (i in a) {9 print(i+ +a[i]); // 0 1, 1 7, ....

10 }1112 print(a.join( ;)); //1 ;7 ;3 ;7 ;8 ;2 ;11314 var b=a.slice(2,4); print(b) ; // 3,71516 a.splice(1,2,20);17 print(a); // 1,20,7,8,2,11819 function compare(a,b) {20 return a-b;21 }2223 a.sort(compare); print(a) ; // 1,1,2,7,8,20

53 / 81

Developpement WebJavascript et AjaxLa couche Objet en Javascript

Couche Objet en Javascript

La couche objet

54 / 81


Caracteristiques de la couche objet

La couche objetLa mise en oeuvre de la couche objet utilise des mecanismesdifferents des autres langages objets. Faire du Javascript Objetest donc tre`s deroutant.

Trois manie`res differentesOn peut creer les objets de 3 manie`res differentes

1 utilisation de la classe Object puis associer des attributset fonctions

2 creation dun constructeur puis dune instance3 creation dune instance grace au format JSON

55 / 81


Caracteristiques de la couche objet

La couche objetLa mise en oeuvre de la couche objet utilise des mecanismesdifferents des autres langages objets. Faire du Javascript Objetest donc tre`s deroutant.

Trois manie`res differentesOn peut creer les objets de 3 manie`res differentes

1 utilisation de la classe Object puis associer des attributset fonctions

2 creation dun constructeur puis dune instance3 creation dune instance grace au format JSON

56 / 81


Utilisation de la classe Object 1/2Exemple avec Object

1 // create object2 person=new Object();34 // add properties5 person.first name=Joe;6 person.last name=Dalton;78 // add method9 person.display=function() {10 print(this.first name+ +this.last name);11 }1213 // use method14 person.display();

57 / 81


Utilisation de la classe Object 2/2Exemple avec Object (fonction predefinie)

1 // create object2 person=new Object();34 // add properties5 person.first name=Joe;6 person.last name=Dalton;78 // add predefined function9 function display() {10 print(this.first name+ +this.last name);11 }1213 person.display=display;1415 person.display();

58 / 81


Utilisation dun constructeur

Exemple avec constructeur1 function Person(first,last) {2 this.first name=first;3 this.last name=last;4 this.display=function() {5 print(this.first name+ +this.last name);6 }7 }89 person=new Person(Joe,Dalton);1011 person.display();

59 / 81


Utilisation du format JSON (1/3)

Definition (JaSON - JavaScript Object Notation)1 il sagit dun format de donnees (texte) qui permet la

serialisation des objets2 facilite de lecture3 mise en oeuvre simplifiee (par rapport a` XML)4 reconnu nativement par Javascript

60 / 81



Exemple instance JSON

1 var joe={2 "first name" : "Joe",3 "last name" : "Dalton",4 "display" : function() {5 print(this.first name+ +this.last name);6 },7 brothers : [8 { "name" : "Jack", age : 30 },9 { "name" : "Averell", age : 33 },

10 { "name" : "William", age : 31 }11 ]12 }1314 joe.display();1516 for (var i=0;i



Format dechangeLorsque lon echange des donnees (serveur - client), il nestpas possible de definir des fonctions (comme dans lexempleprecedent).

62 / 81


Objet en tant que tableau associatif

Objet en tant que tableauun objet javascript est en fait un tableau associatif dattributs etmethodes identifies par leur nom.

objet et tableau associatif1 person=new Object();2 person[first name]=Joe;3 person[last name]=Dalton;4 person[display]=function () {5 print(this.first name+ +this.last name);6 }78 person.display();

63 / 81


HeritageHeritagelheritage au sens oriente objet nexiste pas : deux objetsappartiennent a` la meme classe sils ont les memes attributs etmemes methodes.

heritage

1 function display() {2 print(this.first name+ +this.last name);3 }45 function Person(fname,lname) {6 this.first name=fname;7 this.last name=lname;8 this.display=display;9 }

1011 function Employee(fname,lname,salary) {12 this.first name=fname;13 this.last name=lname;14 this.salary=salary;15 this.display=function() {16 print(this.first name+ +this.last name+ +this.salary);17 }18 }19

64 / 81


Notion de prototype

Definition (Prototype)un prototype represente un ensemble dattributs et demethodes qui seront ajoutes a` lobjet lors de sa creation.prototype

1 function Person(first,last) {2 this.first name=first;3 this.last name=last;4 }56 var joe=new Person(Joe,Dalton);78 // you can not use this :9 // joe.display() ;

1011 Person.prototype.first name=x;12 Person.prototype.last name=y;13 Person.prototype.display=function() {14 print(this.first name+ +this.last name);15 }1617 var jack=new Person(Jack,Dalton);18 jack.display();

65 / 81


Fonction en tant quobjet

Fonction en tant quobjet descendant de la classe Object mais ne peut pas posseder dattribut peut posseder dautres fonctions comme methodes

66 / 81

Developpement WebJavascript et AjaxAjax

Ajax

Ajax

67 / 81


Ajax

Definition (Ajax - Asynchronous JAvascript and XML)introduit par Jesse James Garrett en 2005, reunion de troistechnologies afin de creer des interfaces utilisateur riches (RUI)

Javascript pour linteraction cote client XMLHttpRequest pour les requetes asynchrones XML pour lechange de donnees client-serveur

mais repose egalement sur DOM CSS

68 / 81


Ajax

Definition (Ajax - Asynchronous JAvascript and XML)introduit par Jesse James Garrett en 2005, reunion de troistechnologies afin de creer des interfaces utilisateur riches (RUI)

Javascript pour linteraction cote client XMLHttpRequest pour les requetes asynchrones XML pour lechange de donnees client-serveur

mais repose egalement sur DOM CSS

69 / 81


Ajax

Definition (XMLHttpRequest - XHR) developpe par Microsoft en 1998 en tant quobjet ActiveX repris par Mozilla en 2002, puis autres navigateurs devenu une recommandation du W3C en 2006 permet denvoyer une requete asynchrone au serveur une fois les donnees recues on met a` jour le DOM

70 / 81


Ajax


71 / 81


Ajax


72 / 81


Ajax


73 / 81


Ajax


74 / 81


XMLHttpRequest

attributs de XMLHttpRequest Status : statut sous forme numerique (ex 200 OK, 404

Not Found) statusText : statut sous format texte readyState : etat de lobjet (0=uninitialized, 1=open,

2=sent, 3=receiving, 4=loaded ) Onreadystatechange : permet dattacher un

gestionnaire devenement responseText : reponse du serveur sous forme texte

(HTML ou JSON) responseXML : reponse du serveur sous forme XML

75 / 81


XMLHttpRequest

Attention !lorsque lon a recu les donnees du serveur et quelles sontpretes a` etre traitees :

readyState = 4 Status = 200

76 / 81


XMLHttpRequest

methodes de XMLHttpRequest ouverture dune connexion pour envoi ou reception de

donnees (GET, POST) : open(method,url,async) envoi dune requete : send(content) mettre fin a` la requete : abort()

77 / 81


Creer un objet XMLHttpRequestCreer un objet XMLHttpRequestLe type dobjet depend du navigateur !

XMLHttpRequest

1 function getXMLHTTPRequest() {2 try {3 req=new XMLHttpRequest();4 } catch(exc1) {5 try {6 req=new ActiveXObject("Msxml2.XMLHTTP");7 } catch(exc2) {8 try {9 req=new ActiveXObject("Microsoft.XMLHTTP");

10 } catch(exc3) {11 req=false;12 }13 }14 }15 return req;16 }

78 / 81


Creer un objet XMLHttpRequestCreer un objet XMLHttpRequestLe type dobjet depend du navigateur !

XMLHttpRequest

1 function getXMLHTTPRequest() {2 try {3 req=new XMLHttpRequest();4 } catch(exc1) {5 try {6 req=new ActiveXObject("Msxml2.XMLHTTP");7 } catch(exc2) {8 try {9 req=new ActiveXObject("Microsoft.XMLHTTP");

10 } catch(exc3) {11 req=false;12 }13 }14 }15 return req;16 }

79 / 81


Utiliser un objet XMLHttpRequest

XMLHttpRequest

12 var my request=getXMLHTTPRequest();34 var url=get text data.php;56 my request.open("GET", url, true);7 my request.onreadystatechange=process data;8 my request.send(null);9

10 function process data() {11 if (my request.readyState==4) {12 if (my request.status==200) {13 var my text=my request.responseText;14 document.getElementById("text data").innerHTML=my text;15 }16 }17 }

80 / 81


Frameworks Javascript lies a` Ajax

FrameworksUn tre`s grand nombre de frameworks ont ete developpes pourle Web. Pami les plus connus, on peut notamment citer :

1 Prototype (www.prototypejs.org)2 Scriptaculous (script.aculo.us)3 jQuery (jquery.com)4 Rico (openrico.org)5 Dojo (dojotoolkit.org)6 Google Web Toolkit (Java)

chacun posse`de ses specificites (cf cours 7).

81 / 81

PlanLe Langage JavascriptFonctionnalits du langageLa couche Objet en JavascriptAjax

dw_crs6

Documents

Transcript of dw_crs6