D eloppement Web Javascript et AjaxDeveloppement WebJavascript et Ajax´ Fonctionnalites du...

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 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


Plan

Plan

1 Le Langage Javascript

2 Fonctionnalites du langage

3 La couche Objet en Javascript

4 Ajax

3 / 81


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









Attention !


5 / 81









Attention !


6 / 81









Attention !


7 / 81









Attention !


8 / 81









Attention !


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


• 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

http://www.mozilla.org/rhino/










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 <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


Fonctionnalites du langage

Fonctionnalites et specificites

Description rapide

17 / 81



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



Specificites





19 / 81



Specificites





20 / 81



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



Les identificateurs


chiffres.



22 / 81



Les identificateurs


chiffres.



23 / 81



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



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



Les variables

Variables






26 / 81



Les variables

Variables






27 / 81



Les variables

Variables






28 / 81



Les fonctions

Fonctions

Les fonctions sont caracterisees par :



• on les declare grace au mot cle function

29 / 81



Les fonctions

Fonctions





30 / 81



Les fonctions

Fonctions





31 / 81



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



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



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



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



L’objet Boolean

Boolean

permet de representer des valeurs booleeennes1 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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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



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


La couche Objet en Javascript

Couche Objet en Javascript

La couche objet

54 / 81



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



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



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



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



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



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




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

http://www.json.org/




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



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



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



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



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


Ajax

Ajax

Ajax

67 / 81


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


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


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


Ajax

Ajax







71 / 81


Ajax

Ajax







72 / 81


Ajax

Ajax







73 / 81


Ajax

Ajax







74 / 81


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


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


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


Ajax

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


Ajax



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


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


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

www.prototypejs.org

script.aculo.us

jquery.com

openrico.org

dojotoolkit.org

D eloppement Web Javascript et AjaxDeveloppement WebJavascript et Ajax´ Fonctionnalites du...

Documents

Transcript of D eloppement Web Javascript et AjaxDeveloppement WebJavascript et Ajax´ Fonctionnalites du...