Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Developpement WebJavascript et Ajax
Developpement WebJavascript et Ajax
Jean-Michel [email protected]
http://www.info.univ-angers.fr/pub/richer
25 janvier 2010
1 / 81
Developpement WebJavascript et Ajax
Objectif
Objectif du cours
• revisiter Javascript et les fonctionnalites associees aulangage dans le cadre du developpement Web
• une breve introduction au langage en guise de rappel estsuivie par l’etude de la couche objet
• on termine par une introduction a AJAX
2 / 81
Developpement WebJavascript et Ajax
Plan
Plan
1 Le Langage Javascript
2 Fonctionnalites du langage
3 La couche Objet en Javascript
4 Ajax
3 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
4 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
5 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
6 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
7 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
8 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Caracteristiques du langage
• cree par Netscape en 1995 (LiveScript)
• utilise cote client pour dynamiser les pages web
• langage tres particulier (fonctionnel)
• integration d’une couche objet
• utilise aujourd’hui pour creer des interfaces riches
Attention !
Javascript n’est pas un derive de Java, ce sont deux langagesproches par leurs structures de controle ou leurs syntaxes maistres differents.
9 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
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
Developpement WebJavascript et Ajax
Le Langage Javascript
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
Developpement WebJavascript et Ajax
Le Langage Javascript
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
12 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
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
13 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
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
14 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
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
15 / 81
Developpement WebJavascript et Ajax
Le Langage Javascript
Utilisation de Javascript pour le navigateur
pour le navigateur
• introduction grace a la balise script
• utilise dans la partie <head> ou <body>
Exemple Javascript
1 < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 <html>3 <head>4 <title>titre de la page</title>5 <script type="text/javascript" language="javascript">6 var texte=’Hello world!’;7 </script>8 <script type="text/javascript" src="fichierexterne.js"></script>9 </head>
10 <body>11 <script type="text/javascript" language="javascript">12 document.write(texte);13 writecoucou();14 </script>15 </body>16 </html>
16 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Fonctionnalites et specificites
Description rapide
17 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Specificites
Specificites liees a la securite
• ne peut pas lire ou ecrire dans le systeme de fichier de lamachine
• ne peut executer de programme externe
• pas de connexion autre que serveur web
18 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Specificites
Specificites liees a la securite
• ne peut pas lire ou ecrire dans le systeme de fichier de lamachine
• ne peut executer de programme externe
• pas de connexion autre que serveur web
19 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Specificites
Specificites liees a la securite
• ne peut pas lire ou ecrire dans le systeme de fichier de lamachine
• ne peut executer de programme externe
• pas de connexion autre que serveur web
20 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les identificateurs
identificateurs• definition classique : caractere suivi de carateres ou
chiffres.
• on peut utiliser le caractere souligne
• on peut egalement utiliser $ (cf frameworks Ajax)
21 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les identificateurs
identificateurs• definition classique : caractere suivi de carateres ou
chiffres.
• on peut utiliser le caractere souligne
• on peut egalement utiliser $ (cf frameworks Ajax)
22 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les identificateurs
identificateurs• definition classique : caractere suivi de carateres ou
chiffres.
• on peut utiliser le caractere souligne
• on peut egalement utiliser $ (cf frameworks Ajax)
23 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Structures de controle
Structures de controle
Javascript possede 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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les variables
Variables
Les variables sont caracterisees par :
• ce sont des objets
• l’absence de typage statique (typage dynamique)
• elles peuvent etre declarees a tout moment
• on peut utiliser le mot-cle var pour les declarer
25 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les variables
Variables
Les variables sont caracterisees par :
• ce sont des objets
• l’absence de typage statique (typage dynamique)
• elles peuvent etre declarees a tout moment
• on peut utiliser le mot-cle var pour les declarer
26 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les variables
Variables
Les variables sont caracterisees par :
• ce sont des objets
• l’absence de typage statique (typage dynamique)
• elles peuvent etre declarees a tout moment
• on peut utiliser le mot-cle var pour les declarer
27 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les variables
Variables
Les variables sont caracterisees par :
• ce sont des objets
• l’absence de typage statique (typage dynamique)
• elles peuvent etre declarees a tout moment
• on peut utiliser le mot-cle var pour les declarer
28 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les fonctions
Fonctions
Les 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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les fonctions
Fonctions
Les fonctions sont caracterisees par :
• ce sont des objets
• elles peuvent etre declarees a tout moment
• on les declare grace au mot cle function
30 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les fonctions
Fonctions
Les fonctions sont caracterisees par :
• ce sont des objets
• elles peuvent etre declarees a tout moment
• on les declare grace au mot cle function
31 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Les fonctions principales
Fonctions principales
• eval(string) : evalue le code Javascript
• Number(var) : convertir en nombre
• String(var) : convertir en chaıne
• int parseInt(string[,radix]) : convertir en entieren fonction de la base
• float parseFloat(string) : convertir en reel
• encoreURI(uri)
• decodeURI(uri)
32 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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 256’67 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<3’);18 print(uri); // http ://www.site.fr/x%0a=1?value=2%3c31920
33 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Objets de base
Objets de base en javascript
chacun des objets possede des methodes propres :
• String
• Boolean
• Date
• Number
• Function
• Array
• RegExp (expression reguliere)
34 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Determiner le type d’un objet
l’instruction typeof
elle permet de determiner le type d’une variable ou d’unidentificateur.
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Boolean
Boolean
permet de representer des valeurs booleeennes1 attributs :
• TRUE• FALSE
2 methodes :• toSource()• toString()
36 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Number
Number
permet de representer les nombres entiers et les reels1 attributs :
• MAX VALUE• MIN VALUE• NaN• NEGATIVE INFINITY• POSITIVE INFINITY
2 methodes :• toSource()• toString(radix)• toFixed(precision) notation avec chiffres apres la
virgule
38 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet String
String
permet de representer les chaınes de caracteres1 attributs :
• length longueur de la chaıne
2 methodes :• integer charAt(index)• String concat(s1,s2,...)• integer indexOf(search[,fromIndex])• integer lastIndexOf(search[,fromIndex])• String slice(begin,end) extraire la sous-chaıne• Array split(separator[,limit])• String substr(start,length) extraire la
sous-chaıne• String toLowerCase()• String toUpperCase()
40 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet String et les expressions regulieres
Methodes en rapport avec les expressions regulieres
permet de representer les chaınes de caracteres
• Array match(regex)
• Boolean search(regex)
• Boolean replace(regex,newstr or function)
41 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet RegExp
RegExp
permet de representer les expressions regulieres• methodes :
• test(string) retourne true si il y a correspondance• exec(string) retourne un tableau qui contient les motifs
qui correspondent a l’expression
43 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
Rappel des expressions regulieres
Expression reguliere
• elle peut etre introduite par /.../q ou q est unqualificateur (g = global, i = insensible a la casse)
• + au moins une occurrence
• * 0 ou plusieurs occurrences
• () permet d’isoler une sous-expression
• \w caractere alphanumerique ou caractere souligne
• \d chiffre
• \s un espace ou \t\n\f\v
44 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Math
Math - les attributs
permet de realiser les calculs complexes
• E : constante d’Euler (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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet 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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Date
Date - les methodes
permet de representer les dates
• Date()
• Date(milliseconds)
• Date(y,m,d)
• getDay(), getMonth(), getYear(), getFullYear()
• getHours(), getMinutes(), getSeconds()
• toGMTString
• toLocaleString
• toUTCString
49 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Array
Array - attributs et methodes
permet de representer et traiter les tableaux1 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 l’ordre des elements
51 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
L’objet Array
Array - autres methodes
• Array(n) : construit un tableau de longueur n
• Array(n1,...,nk) : construit un tableau dont leselements sont n1, . . . ,nk
• slice(begin,end) : extrait une partie du tableau
• splice(index,howMany,e1, ..., en : ajoute etsupprime de nouveaux elements
• sort() : tri des elements
• sort(compare function) : tri suivant la fonction
52 / 81
Developpement WebJavascript et Ajax
Fonctionnalites du langage
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 Ajax
La couche Objet en Javascript
Couche Objet en Javascript
La couche objet
54 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Caracteristiques de la couche objet
La couche objet
La mise en oeuvre de la couche objet utilise des mecanismesdifferents des autres langages objets. Faire du Javascript Objetest donc tres deroutant.
Trois manieres differentes
On peut creer les objets de 3 manieres differentes
1 utilisation de la classe Object puis associer des attributset fonctions
2 creation d’un constructeur puis d’une instance
3 creation d’une instance grace au format JSON
55 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Caracteristiques de la couche objet
La couche objet
La mise en oeuvre de la couche objet utilise des mecanismesdifferents des autres langages objets. Faire du Javascript Objetest donc tres deroutant.
Trois manieres differentes
On peut creer les objets de 3 manieres differentes
1 utilisation de la classe Object puis associer des attributset fonctions
2 creation d’un constructeur puis d’une instance
3 creation d’une instance grace au format JSON
56 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation de la classe Object 1/2
Exemple 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation de la classe Object 2/2
Exemple 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation d’un constructeur
Exemple avec constructeur
1 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation du format JSON (1/3)
Definition (JaSON - JavaScript Object Notation)
1 il s’agit d’un format de donnees (texte) qui permet laserialisation des objets
2 facilite de lecture
3 mise en oeuvre simplifiee (par rapport a XML)
4 reconnu nativement par Javascript
60 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation du format JSON (2/3)
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<joe.brothers.length;++i) {17 print(joe.brothers[i].name);18 }
http://www.json.org/
61 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Utilisation du format JSON (3/3)
Format d’echange
Lorsque l’on echange des donnees (serveur - client), il n’estpas possible de definir des fonctions (comme dans l’exempleprecedent).
62 / 81
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Objet en tant que tableau associatif
Objet en tant que tableau
un objet javascript est en fait un tableau associatif d’attributs etmethodes identifies par leur nom.
objet et tableau associatif
1 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Heritage
Heritage
l’heritage au sens oriente objet n’existe pas : deux objetsappartiennent a la meme classe s’ils 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Notion de prototype
Definition (Prototype)
un prototype represente un ensemble d’attributs et demethodes qui seront ajoutes a l’objet 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
Developpement WebJavascript et Ajax
La couche Objet en Javascript
Fonction en tant qu’objet
Fonction en tant qu’objet
• descendant de la classe Object
• mais ne peut pas posseder d’attribut
• peut posseder d’autres fonctions comme methodes
66 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Ajax
67 / 81
Developpement WebJavascript et Ajax
Ajax
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 l’interaction cote client
• XMLHttpRequest pour les requetes asynchrones
• XML pour l’echange de donnees client-serveur
mais repose egalement sur
• DOM
• CSS
68 / 81
Developpement WebJavascript et Ajax
Ajax
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 l’interaction cote client
• XMLHttpRequest pour les requetes asynchrones
• XML pour l’echange de donnees client-serveur
mais repose egalement sur
• DOM
• CSS
69 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Definition (XMLHttpRequest - XHR)
• developpe par Microsoft en 1998 en tant qu’objet ActiveX
• repris par Mozilla en 2002, puis autres navigateurs
• devenu une recommandation du W3C en 2006
• permet d’envoyer une requete asynchrone au serveur
• une fois les donnees recues on met a jour le DOM
70 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Definition (XMLHttpRequest - XHR)
• developpe par Microsoft en 1998 en tant qu’objet ActiveX
• repris par Mozilla en 2002, puis autres navigateurs
• devenu une recommandation du W3C en 2006
• permet d’envoyer une requete asynchrone au serveur
• une fois les donnees recues on met a jour le DOM
71 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Definition (XMLHttpRequest - XHR)
• developpe par Microsoft en 1998 en tant qu’objet ActiveX
• repris par Mozilla en 2002, puis autres navigateurs
• devenu une recommandation du W3C en 2006
• permet d’envoyer une requete asynchrone au serveur
• une fois les donnees recues on met a jour le DOM
72 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Definition (XMLHttpRequest - XHR)
• developpe par Microsoft en 1998 en tant qu’objet ActiveX
• repris par Mozilla en 2002, puis autres navigateurs
• devenu une recommandation du W3C en 2006
• permet d’envoyer une requete asynchrone au serveur
• une fois les donnees recues on met a jour le DOM
73 / 81
Developpement WebJavascript et Ajax
Ajax
Ajax
Definition (XMLHttpRequest - XHR)
• developpe par Microsoft en 1998 en tant qu’objet ActiveX
• repris par Mozilla en 2002, puis autres navigateurs
• devenu une recommandation du W3C en 2006
• permet d’envoyer une requete asynchrone au serveur
• une fois les donnees recues on met a jour le DOM
74 / 81
Developpement WebJavascript et Ajax
Ajax
XMLHttpRequest
attributs de XMLHttpRequest
• Status : statut sous forme numerique (ex 200 OK, 404Not Found)
• statusText : statut sous format texte
• readyState : etat de l’objet (0=uninitialized, 1=open,2=sent, 3=receiving, 4=loaded )
• Onreadystatechange : permet d’attacher ungestionnaire d’evenement
• responseText : reponse du serveur sous forme texte(HTML ou JSON)
• responseXML : reponse du serveur sous forme XML
75 / 81
Developpement WebJavascript et Ajax
Ajax
XMLHttpRequest
Attention !
lorsque l’on a recu les donnees du serveur et qu’elles sontpretes a etre traitees :
• readyState = 4
• Status = 200
76 / 81
Developpement WebJavascript et Ajax
Ajax
XMLHttpRequest
methodes de XMLHttpRequest
• ouverture d’une connexion pour envoi ou reception dedonnees (GET, POST) : open(method,url,async)
• envoi d’une requete : send(content)
• mettre fin a la requete : abort()
77 / 81
Developpement WebJavascript et Ajax
Ajax
Creer un objet XMLHttpRequest
Creer un objet XMLHttpRequest
Le type d’objet 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
Developpement WebJavascript et Ajax
Ajax
Creer un objet XMLHttpRequest
Creer un objet XMLHttpRequest
Le type d’objet 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
Developpement WebJavascript et Ajax
Ajax
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
Developpement WebJavascript et Ajax
Ajax
Frameworks Javascript lies a Ajax
Frameworks
Un tres 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 possede ses specificites (cf cours 7).
81 / 81