[PDF] Guide de formation Ajax & php avance | Cours informatique

(1)

D ´eveloppement Web

Javascript et Ajax

Jean-Michel Richer

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

(2)

Objectif

Objectif du cours

• revisiter Javascript et les fonctionnalit és associ ées au langage dans le cadre du d éveloppement Web

• une br `eve introduction au langage en guise de rappel est suivie par l’ ´etude de la couche objet

(3)

Plan

1 Le Langage Javascript

2 Fonctionnalit ´es du langage

3 La couche Objet en Javascript

(4)

Caract ´eristiques du langage

• cr ´e ´e par Netscape en 1995 (LiveScript)

• utilis é c ôt é client pour dynamiser les pages web

• langage tr `es particulier (fonctionnel)

• int ´egration d’une couche objet

• utilis ´e aujourd’hui pour cr ´eer des interfaces riches Attention !

Javascript n’est pas un d ériv é de Java, ce sont deux langages proches par leurs structures de contr ôle ou leurs syntaxes mais tr ès diff érents.

(5)

Caract ´eristiques du langage

• utilis é c ôt é client pour dynamiser les pages web • langage tr ès particulier (fonctionnel)

(6)

Caract ´eristiques du langage

• langage tr `es particulier (fonctionnel) • int ´egration d’une couche objet

(7)

Caract ´eristiques du langage

(8)

Caract ´eristiques du langage

• utilis ´e aujourd’hui pour cr ´eer des interfaces riches

Attention !

(9)

Caract ´eristiques du langage

• utilis ´e aujourd’hui pour cr ´eer des interfaces riches

Attention !

(10)

ECMAScript

Definition (ECMAScript - ECMA-262)

Le langage a ét é standardis é par ECMA en 1996, 1997, on trouve plusieurs implantations :

• JavaScript (Firefox)

• JScript version Microsoft (IE)

(11)

Utilisation de Javascript

• langage li ´e aux navigateurs

• en dehors des navigateurs : Rhino

Rhino -http://www.mozilla.org/rhino/ • implantation de Javascript en Java

(12)

Utilisation de Javascript

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

• implantation de Javascript en Java

• rhinonom-fichier.js

(13)

Utilisation de Javascript

(14)

Utilisation de Javascript

• rhinonom-fichier.js

(15)

Utilisation de Javascript

(16)

Utilisation de Javascript pour le navigateur

pour le navigateur

• introduction gr ˆace `a la balisescript

• utilis ´e dans la partie<head>ou<body>

Exemple Javascript

1 <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html>

3 <head>

4 <title>titre de la page</title>

5 <scripttype="text/javascript"language="javascript"> 6 var texte=’Hello world !’ ;

7 </script>

8 <scripttype="text/javascript"src="fichierexterne.js"></script> 9 </head>

10<body>

11<scripttype="text/javascript"language="javascript"> 12document.write(texte) ;

(17)

Fonctionnalit és et sp écificit és

(18)

Sp ´ecificit ´es

Sp écificit és li ées à la s écurit é

• ne peut pas lire ou ´ecrire dans le syst `eme de fichier de la machine

• ne peut ex ´ecuter de programme externe

(19)

Sp ´ecificit ´es

(20)

Sp ´ecificit ´es

(21)

Les identificateurs

identificateurs

• d éfinition classique : caract ère suivi de carat ères ou chiffres.

• on peut utiliser le caract `ere soulign ´e

(22)

Les identificateurs

identificateurs

(23)

Les identificateurs

identificateurs

(24)

Structures de contr ˆole

Javascript poss `ede les structures de contr ˆole dulangage C:

• if then else

• for,while,do while

• break,continue

• switch

• plus lefor in(foreach) pour les tableaux

(25)

Les variables

Variables

Les variables sont caract ´eris ´ees par :

• ce sont des objets

• l’absence de typage statique (typage dynamique)

• elles peuvent être d éclar ées à tout moment

(26)

Les variables

Variables

(27)

Les variables

Variables

(28)

Les variables

Variables

(29)

Les fonctions

Fonctions

Les fonctions sont caract ´eris ´ees par :

(30)

Les fonctions

Fonctions

(31)

Les fonctions

Fonctions

(32)

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 entier en fonction de la base

• float parseFloat(string): convertir en r ´eel

• encoreURI(uri)

(33)

Utilisation des fonctions principales

Exemple avec des fonctions principales 1 print(parseInt(’ff’,16)) ; // 255 2 3 varstr=’ 256’; 4 varx =1 + str ; 5 print(x) ;// ’1 256’ 6 7 varx =1 +Number(str) ; 8 print(x) ;// 257 9 10print(eval(’2 + 2 * 8 - 3’)) ;// 15 11 12// JSON

13varperson=eval("({prenom : ’Sid’, nom : ’Meyer’})") ; 14print(person) ;// object Object

15print(person.prenom+’ ’+person.nom) ;// Sid Meyer 16

(34)

Objets de base

Objets de base en javascript

chacun des objets poss `ede des m ´ethodes propres :

• String • Boolean • Date • Number • Function • Array

(35)

D ´eterminer le type d’un objet

l’instructiontypeof

elle permet de d ´eterminer le type d’une variable ou d’un identificateur. Exemple typeof 1 varb=true; 2 vars=’coucou’; 3 vari=10; 4 vark ; 5 vartab=[1,2,3] ; 6 varp=null; 7 varregex=/\w+/ ; 8 functionf(){ } 9 10print(typeofb) ;// boolean 11print(typeofs) ;// string

(36)

L’objet Boolean

Boolean

permet de repr ésenter des valeurs bool éeennes 1 attributs : • TRUE • FALSE 2 m éthodes : • toSource() • toString()

(37)

Utiliser Boolean

Exemple avec Boolean

1 varvrai=Boolean(true) ; 2 varfaux=Boolean() ; 3 varp=Boolean.TRUE ; 4 5 print(vrai) ;// true 6 print(faux) ;// false 7 8 print(vrai.toString()) ; // true 9

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

(38)

L’objet Number

Number

permet de repr ésenter les nombres entiers et les r éels 1 attributs : • MAX VALUE • MIN VALUE • NaN • NEGATIVE INFINITY • POSITIVE INFINITY 2 m éthodes : • toSource() • toString(radix)

(39)

Utiliser Number

Exemple avec Number

1 varn1=new Number(255) ; // ou n1=255 ; 2 varn2=new Number(1.5) ; // ou n2=1.5 ; 3

4 print(Number.MAX VALUE) ;// 1.7976931348623157e+308 5 print(n1.toString()) ; // 255 6 print(n1.toString(2)) ; // 11111111 7 print(n1.toString(8)) ; // 377 8 print(n1.toString(16)) ; // ff 9 10n1=n1*n2 ; 11print(n1) ; // 382.5 12 13print(n2.toString(16)) ;// 1.8 14print(n2.toFixed(2)) ; // 1.50

(40)

L’objet String

String

permet de repr ´esenter les chaˆınes de caract `eres 1 attributs :

• lengthlongueur de la chaˆıne

2 m ´ethodes :

• 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

(41)

L’objet String et les expressions r ´eguli `eres

M éthodes en rapport avec les expressions r éguli ères

permet de repr ´esenter les chaˆınes de caract `eres

• Array match(regex)

• Boolean search(regex)

(42)

Utiliser String

Exemple avec String

1 print(’coucou’.length) ;// 6 2

3 var text=’papa fume la pipe’; 4 print(text.indexOf(’pa’)) ;// 0 5 print(text.lastIndexOf(’pa’)) ; // 2 6 7 print(text.split(’ ’)) ;// papa,,,,fume,,la,pipe 8 9 print(text.slice(8,-2)) ;// fume la pi 10 11print(text.match(/p\w+/g)) ;// papa,pipe 12

13varnewtext=text.replace(/pipe/,’cigarette’); 14print(newtext) ;// papa fume la cigarette 15

(43)

L’objet RegExp

RegExp

permet de repr ésenter les expressions r éguli ères

• m ´ethodes :

• test(string)retournetruesi il y a correspondance • exec(string)retourne un tableau qui contient les motifs

(44)

Rappel des expressions r ´eguli `eres

Expression r ´eguli `ere

• elle peut être introduite par/.../qo ùqest un qualificateur (g = global, i = insensible à la casse)

• +au moins une occurrence

• _*0 ou plusieurs occurrences

• ()permet d’isoler une sous-expression

• \w caract ère alphanum érique ou caract ère soulign é

• \d chiffre

(45)

Utiliser RegExp

Exemple avec RegExp 1 varregex1=/\d+/ ;

2 varregex2=new RegExp("(\\d+)","g") ; 3 varregex3=/(\d+)\/(\d+)\/(\d+)/ ; 4 5 vardob=’30/09/1970’; 6 7 print(dob.match(regex1)) ; // 30 8 print(dob.match(regex2)) ; // 30/09/1970 9 10print(regex2) ;// /(\d+)/g 11 12 13print(regex3.test(dob)) ;// true 14print(regex3.exec(dob)) ;// 30/09/1970,30,09,1970 15

(46)

L’objet Math

Math - les attributs

permet de r ´ealiser les calculs complexes

• E: constante d’Euler (2,718)

• LN2: logarithme n ´ep ´erien de 2 (0,693)

• LN10: logarithme n ´ep ´erien 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 carr ´ee de 1/2 (0,707)

(47)

L’objet Math

Math - les m ´ethodes • abs

• acos,asin,atan, ,atan2

• ceil,floor

• cos,sin,tan

• exp,log,pow

• min,max

(48)

Utiliser Math

Exemple avec Math

1 print(Math.cos(Math.PI)) ;// -1 2 print(Math.sin(Math.PI)) ; //1.2246467991473532e-16 3 4 print(Math.sqrt(2)) ; //1.4142135623730951 5 print(Math.pow(2,10)) ;// 1024 6 7 print(Math.round(Math.sqrt(2))) ; // 1 8 print(Math.random()) ; //0.3946604376730234 9

(49)

L’objet Date

Date - les m ´ethodes

permet de repr ´esenter les dates

• Date()

• Date(milliseconds)

• Date(y,m,d)

• getDay(),getMonth(),getYear(),getFullYear()

• getHours(),getMinutes(),getSeconds()

(50)

Utiliser Date

Exemple avec Date

1 vartoday=newDate() ;

2 print(today) ;//Fri Feb 13 2009 16 :27 :30 GMT+0100 (GMT+01 :00) 3 print(today.toLocaleDateString()) ; //fevrier 13, 2009 4 print(today.toUTCString()) ;// Fri, 13 Feb 2009 15 :38 :52 GMT

5 print(newDate(1000)) ; // Thu Jan 01 1970 01 :00 :01 GMT+0100 (GMT+01 :00) 6 print(newDate(2009,0,15)) ; // Thu Jan 15 2009 00 :00 :00 GMT+0100 (GMT+01 :00) 7

(51)

L’objet Array

Array - attributs et m ´ethodes

permet de repr ´esenter et traiter les tableaux 1 attributs :

• length

2 m ´ethodes :

• Array concat(array1,array2) • string join(string)

• push: ajoute un nouvel él ément à la fin • unshift: ajoute un nouvel él ément au d ébut • pop: supprime et retourne le dernier él ément

(52)

L’objet Array

Array - autres m ´ethodes

• Array(n): construit un tableau de longueur n

• Array(n1,...,nk): construit un tableau dont les ´el ´ements sont n1, . . . ,nk

• slice(begin,end): extrait une partie du tableau

• splice(index,howMany,e1, ..., en: ajoute et supprime de nouveaux ´el ´ements

• sort(): tri des ´el ´ements

(53)

Utiliser Array

Exemple avec Array 1 vara=[3,8,2,7] ; 2 3 print(a.length) ;// 4 4 print(a.reverse()) ;// 7,2,8,3 5 a.sort() ; print(a) ; // 2,3,7,8 6

7 vara=new Array(1,7,3,7,8,2,1) ; 8 for(iina){ 9 print(i+’ ’+a[i]) ;// 0 1, 1 7, .... 10} 11 12print(a.join(’ ;’)) ; //1 ;7 ;3 ;7 ;8 ;2 ;1 13

14varb=a.slice(2,4) ;print(b) ;// 3,7 15

16a.splice(1,2,20) ; 17print(a) ;// 1,20,7,8,2,1 18

(54)

Couche Objet en Javascript

(55)

Caract ´eristiques de la couche objet

La couche objet

La mise en oeuvre de la couche objet utilise des m écanismes diff érents des autres langages objets. Faire du Javascript Objet est donc tr èsd éroutant.

Trois mani `eres diff ´erentes

On peut cr éer les objets de 3 mani ères diff érentes

1 utilisation de la classeObjectpuis associer des attributs et fonctions

(56)

Caract ´eristiques de la couche objet

La couche objet

La mise en oeuvre de la couche objet utilise des m écanismes diff érents des autres langages objets. Faire du Javascript Objet est donc tr èsd éroutant.

Trois mani `eres diff ´erentes

On peut cr éer les objets de 3 mani ères diff érentes

1 utilisation de la classeObjectpuis associer des attributs et fonctions

(57)

Utilisation de la classe Object 1/2

Exemple avec Object 1 // create object

2 person=new Object() ;

3

4 // add properties

5 person.first name=’Joe’;

6 person.last name=’Dalton’;

7

8 // add method

9 person.display=function() {

10 print(this.first name+’ ’+this.last name) ;

(58)

Utilisation de la classe Object 2/2

Exemple avec Object (fonction pr ´ed ´efinie) 1 // create object

2 person=new Object() ;

3

4 // add properties

5 person.first name=’Joe’;

6 person.last name=’Dalton’;

7

8 // add predefined function

9 functiondisplay() {

11 } 12

(59)

Utilisation d’un constructeur

Exemple avec constructeur

1 functionPerson(first,last) {

2 this.first name=first ;

3 this.last name=last ;

4 this.display=function() {

6 }

7 } 8

9 person=newPerson(’Joe’,’Dalton’) ;

(60)

Utilisation du format JSON (1/3)

Definition (JaSON - JavaScript Object Notation)

1 il s’agit d’un format de donn ´ees (texte) qui permet la s ´erialisation des objets

2 facilit ´e de lecture

3 mise en oeuvre simplifi ´ee (par rapport `a XML) 4 reconnu nativement par Javascript

(61)

Utilisation du format JSON (2/3)

Exemple instance JSON 1 varjoe={

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

14joe.display() ; 15

16for(vari=0;i<joe.brothers.length;++i){ 17 print(joe.brothers[i].name) ;

(62)

Utilisation du format JSON (3/3)

Format d’ ´echange

Lorsque l’on échange des donn ées (serveur - client), il n’est pas possible de d éfinir des fonctions (comme dans l’exemple pr éc édent).

(63)

Objet en tant que tableau associatif

Objet en tant que tableau

un objet javascript est en fait un tableau associatif d’attributs et m ´ethodes identifi ´es 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 }

(64)

H ´eritage

l’h éritage au sens orient é objet n’existe pas : deux objets appartiennent à la m ême classe s’ils ont les m êmes attributs et m êmes m éthodes.

h ´eritage

1 functiondisplay() {

2 print(this.first name+’ ’+this.last name) ; 3 }

4

5 functionPerson(fname,lname){ 6 this.first name=fname ; 7 this.last name=lname ; 8 this.display=display ; 9 }

10

11functionEmployee(fname,lname,salary){ 12 this.first name=fname ;

(65)

Notion de prototype

Definition (Prototype)

un prototype repr ésente un ensemble d’attributs et de m éthodes qui seront ajout és à l’objet lors de sa cr éation.

prototype

1 functionPerson(first,last){ 2 this.first name=first ; 3 this.last name=last ; 4 }

5

6 varjoe=newPerson(’Joe’,’Dalton’) ; 7

8 // you can not use this : 9 // joe.display() ; 10

(66)

Fonction en tant qu’objet

• descendant de la classeObject

• mais ne peut pas poss ´eder d’attribut

(67)

Ajax

(68)

Ajax

Definition (Ajax - Asynchronous JAvascript and XML)

introduit parJesse James Garretten 2005, r ´eunion de trois technologies afin de cr ´eer des interfaces utilisateur riches (RUI)

• Javascript pour l’interaction c ˆot ´e client

• XMLHttpRequestpour les requ ˆetes asynchrones

• XML pour l’ ´echange de donn ´ees client-serveur

mais repose ´egalement sur

(69)

Ajax

Definition (Ajax - Asynchronous JAvascript and XML)

introduit parJesse James Garretten 2005, r ´eunion de trois technologies afin de cr ´eer des interfaces utilisateur riches (RUI)

• Javascript pour l’interaction c ˆot ´e client

• XMLHttpRequestpour les requ ˆetes asynchrones

• XML pour l’ ´echange de donn ´ees client-serveur

(70)

Ajax

Definition (XMLHttpRequest - XHR)

• d ´evelopp ´e 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 requ ˆete asynchrone au serveur

(71)

Ajax

(72)

Ajax

(73)

Ajax

(74)

Ajax

(75)

XMLHttpRequest

attributs deXMLHttpRequest

• Status: statut sous forme num ´erique (ex 200 OK, 404 Not 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 un gestionnaire d’ ´ev ´enement

(76)

XMLHttpRequest

Attention !

lorsque l’on a reçu les donn ées du serveur et qu’elles sont pr êtes à être trait ées :

• readyState = 4

(77)

XMLHttpRequest

m ´ethodes deXMLHttpRequest

• ouverture d’une connexion pour envoi ou r ´eception de

donn ´ees (GET, POST) :open(method,url,async)

• envoi d’une requ ˆete :send(content)

(78)

Cr ´eer un objet XMLHttpRequest

Le type d’objet d ´epend du navigateur !

XMLHttpRequest

1 functiongetXMLHTTPRequest(){

2 try{

3 req=newXMLHttpRequest() ;

4 }catch(exc1) {

5 try{

6 req=newActiveXObject("Msxml2.XMLHTTP") ;

7 }catch(exc2){

8 try{

9 req=newActiveXObject("Microsoft.XMLHTTP") ;

10 }catch(exc3){

11 req=false;

12 }

13 }

(79)

Cr ´eer un objet XMLHttpRequest

Le type d’objet d ´epend du navigateur !

XMLHttpRequest 1 functiongetXMLHTTPRequest(){ 2 try{ 3 req=newXMLHttpRequest() ; 4 }catch(exc1) { 5 try{ 6 req=newActiveXObject("Msxml2.XMLHTTP") ; 7 }catch(exc2){ 8 try{

9 req=newActiveXObject("Microsoft.XMLHTTP") ; 10 }catch(exc3){

(80)

Utiliser un objet XMLHttpRequest

XMLHttpRequest 1

2 varmy request=getXMLHTTPRequest() ; 3

4 varurl=’get text data.php’; 5

6 my request.open("GET", url,true) ;

7 my request.onreadystatechange=process data ; 8 my request.send(null) ;

9

10functionprocess data(){ 11 if(my request.readyState==4) { 12 if(my request.status==200) { 13 varmy text=my request.responseText ;

14 document.getElementById("text data").innerHTML=my text ; 15 }

16 } 17}

(81)

Frameworks Javascript li ´es `a Ajax

Frameworks

Un tr ès grand nombre de frameworks ont ét é d évelopp és pour le 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)