DW crs6

Developpement
WebJavascript et Ajax
Developpement
Web
Javascript et Ajax
Jean-Michel Richer
jean-michel.richer@univ-angers.fr
http://www.info.univ-angers.fr/pub/richer
25 janvier 2010
1 / 81

Developpement
Objectif
Objectif du cours
revisiter Javascript et les fonctionnalites
associees
au
langage dans le cadre du developpement

Web
une breve
` 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
Plan
Plan
Le Langage Javascript
du langage
Fonctionnalites
La couche Objet en Javascript
Ajax
3 / 81

Developpement
Caracteristiques
du langage
cre e par Netscape en 1995 (LiveScript)
utilise cot
e client pour dynamiser les pages web
langage tres
` particulier (fonctionnel)
integration
dune couche objet

utilise aujourdhui pour creer
des interfaces riches
Attention !
e de Java, ce sont deux langages
Javascript nest pas un deriv
ou leurs syntaxes mais
proches par leurs structures de controle
` differents.
tres
4 / 81

Developpement
Caracteristiques
du langage
utilise cot
langage tres
integration
dune couche objet

Attention !
` differents.
tres
5 / 81

Developpement
Caracteristiques
du langage
utilise cot
langage tres
integration
dune couche objet

Attention !
` differents.
tres
6 / 81

Developpement
Caracteristiques
du langage
utilise cot
langage tres
integration
dune couche objet

Attention !
` differents.
tres
7 / 81

Developpement
Caracteristiques
du langage
utilise cot
langage tres
integration
dune couche objet

Attention !
` differents.
tres
8 / 81

Developpement
Caracteristiques
du langage
utilise cot
langage tres
integration
dune couche objet

Attention !
` differents.
tres
9 / 81

Developpement
ECMAScript
Definition (ECMAScript - ECMA-262)

e standardise par ECMA en 1996, 1997, on
Le langage a et
trouve plusieurs implantations :
JavaScript (Firefox)
JScript version Microsoft (IE)
ActionScript version Adobe
10 / 81

Developpement
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
12 / 81

Developpement
13 / 81

Developpement
14 / 81

Developpement
15 / 81

Developpement
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>titre de la page</title>
<script type="text/javascript" language="javascript">
var texte=Hello world ! ;
</script>
<script type="text/javascript" src="fichierexterne.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
document.write(texte) ;
writecoucou() ;
</script>
</body>
</html>
16 / 81

Developpement
du langage
Fonctionnalites
et specificit
Fonctionnalites
es
Description rapide
17 / 81

Developpement
du langage
Fonctionnalites
Specificit
es
liees
a` la securit
Specificit
es
e
ne peut pas lire ou ecrire
`
dans le systeme
de fichier de la
machine
ne peut executer
de programme externe
pas de connexion autre que serveur web
18 / 81

Developpement
du langage
Fonctionnalites
Specificit
es
liees
a` la securit
Specificit
es
e
`
dans le systeme
de fichier de la
machine
ne peut executer
19 / 81

Developpement
du langage
Fonctionnalites
Specificit
es
liees
a` la securit
Specificit
es
e
`
dans le systeme
de fichier de la
machine
ne peut executer
20 / 81

Developpement
du langage
Fonctionnalites
Les identificateurs
identificateurs
definition
` suivi de carateres
`
classique : caractere
ou
chiffres.
on peut utiliser le caractere
` souligne
on peut egalement
utiliser $ (cf frameworks Ajax)
21 / 81

Developpement
du langage
Fonctionnalites
Les identificateurs
identificateurs
definition
`
ou
chiffres.
` souligne
on peut egalement
22 / 81

Developpement
du langage
Fonctionnalites
Les identificateurs
identificateurs
definition
`
ou
chiffres.
` souligne
on peut egalement
23 / 81

Developpement
du langage
Fonctionnalites
Structures de controle
Structures de controle
`
du langage C :
Javascript possede
les structures de controle
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
du langage
Fonctionnalites
Les variables
Variables
ees
par :
Les variables sont caracteris
ce sont des objets
labsence de typage statique (typage dynamique)
elles peuvent etre
a` tout moment
declar
ees
on peut utiliser le mot-cle var pour les declarer
25 / 81

Developpement
du langage
Fonctionnalites
Les variables
Variables
ees
par :
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
26 / 81

Developpement
du langage
Fonctionnalites
Les variables
Variables
ees
par :
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
27 / 81

Developpement
du langage
Fonctionnalites
Les variables
Variables
ees
par :
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
28 / 81

Developpement
du langage
Fonctionnalites
Les fonctions
Fonctions
ees
par :
Les fonctions sont caracteris
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
on les declare
au mot cle function

grace
29 / 81

Developpement
du langage
Fonctionnalites
Les fonctions
Fonctions
ees
par :
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
on les declare
au mot cle function

grace
30 / 81

Developpement
du langage
Fonctionnalites
Les fonctions
Fonctions
ees
par :
ce sont des objets
elles peuvent etre
a` tout moment
declar
ees
on les declare
au mot cle function

grace
31 / 81

Developpement
du langage
Fonctionnalites
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

Developpement
du langage
Fonctionnalites
Utilisation des fonctions principales

Exemple avec des fonctions principales
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
print(parseInt(ff,16)) ; // 255
var str= 256 ;
var x = 1 + str ;
print(x) ; // 1 256
var x =1 + Number(str) ;
print(x) ; // 257
print(eval(2 + 2 * 8 - 3)) ; // 15
// JSON
var person=eval("({ prenom : Sid, nom : Meyer })") ;
print(person) ; // object Object
print(person.prenom+ +person.nom) ; // Sid Meyer
var uri=encodeURI(http ://www.site.fr/x\n=1 ?value=2<3) ;
print(uri) ; // http ://www.site.fr/x%0a=1 ?value=2%3c3
33 / 81

Developpement
du langage
Fonctionnalites
Objets de base
Objets de base en javascript
`
chacun des objets possede

des methodes
propres :
String
Boolean
Date
Number
Function
Array
RegExp (expression reguli
`
ere)
34 / 81

Developpement
du langage
Fonctionnalites
Determiner
le type dun objet
linstruction typeof
elle permet de determiner

le type dune variable ou dun
identificateur.
Exemple typeof
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var b=true ;
var s=coucou ;
var i=10 ;
var k ;
var tab=[1,2,3] ;
var p=null ;
var regex=/\w+/ ;
function f() { }
print(typeof b) ; // boolean
print(typeof s) ; // string
print(typeof i) ; // number
print(typeof f) ; // function
print(typeof k) ; // undefined
print(typeof tab) ; // object
print(typeof dummy) ; // undefined
print(typeof p) ; // object
print(typeof regex) ; // function
35 / 81

Developpement
du langage
Fonctionnalites
Lobjet Boolean
Boolean
permet de representer
des valeurs booleeennes
1 attributs :
TRUE
FALSE
2
methodes
:
toSource()
toString()
36 / 81

Developpement
du langage
Fonctionnalites
Utiliser Boolean
Exemple avec Boolean

1
2
3
4
5
6
7
8
9
10
11
var vrai=Boolean(true) ;
var faux=Boolean() ;
var p=Boolean.TRUE ;
print(vrai) ; // true
print(faux) ; // false
print(vrai.toString()) ; // true
var p=vrai.valueOf() ;
print(p=+p) ; // p=true
37 / 81

Developpement
du langage
Fonctionnalites
Lobjet Number
Number
les nombres entiers et les reels
1 attributs :
MAX VALUE
MIN VALUE
NaN
NEGATIVE INFINITY
POSITIVE INFINITY
methodes
:
toSource()
toString(radix)
toFixed(precision) notation avec chiffres apres
` la
virgule
38 / 81

Developpement
du langage
Fonctionnalites
Utiliser Number
Exemple avec Number

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var n1=new Number(255) ; // ou n1=255 ;

var n2=new Number(1.5) ; // ou n2=1.5 ;
print(Number.MAX VALUE) ; // 1.7976931348623157e+308
print(n1.toString()) ;
// 255
print(n1.toString(2)) ;
// 11111111
print(n1.toString(8)) ;
// 377
print(n1.toString(16)) ; // ff
n1=n1*n2 ;
print(n1) ;
// 382.5
print(n2.toString(16)) ; // 1.8
print(n2.toFixed(2)) ;
// 1.50
39 / 81

Developpement
du langage
Fonctionnalites
Lobjet String
String
`
les chanes de caracteres
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

Developpement
du langage
Fonctionnalites
`
Lobjet String et les expressions reguli
eres
`
Methodes
en rapport avec les expressions reguli
eres
`
les chanes de caracteres
Array match(regex)
Boolean search(regex)
Boolean replace(regex,newstr or function)
41 / 81

Developpement
du langage
Fonctionnalites
Utiliser String
Exemple avec String

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
print(coucou.length) ; // 6
var text=papa
fume la pipe ;
print(text.indexOf(pa)) ; // 0
print(text.lastIndexOf(pa)) ; // 2
print(text.split( )) ; // papa,,,,fume,,la,pipe
print(text.slice(8,-2)) ; // fume la pi
print(text.match(/p\w+/g)) ; // papa,pipe
var newtext=text.replace(/pipe/,cigarette);
print(newtext) ; // papa
fume la cigarette
42 / 81

Developpement
du langage
Fonctionnalites
Lobjet RegExp
RegExp
`
les expressions reguli
eres
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

Developpement
du langage
Fonctionnalites
`
Rappel des expressions reguli
eres
`
Expression reguli
ere
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 caractere
` alphanumerique
` souligne
ou caractere
\d chiffre
\s un espace ou \t\n\f \v
44 / 81

Developpement
du langage
Fonctionnalites
Utiliser RegExp
Exemple avec RegExp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var regex1=/\d+/ ;
var regex2=new RegExp("(\\d+)","g") ;
var regex3=/(\d+)\/(\d+)\/(\d+)/ ;
var dob=30/09/1970 ;
print(dob.match(regex1)) ; // 30
print(dob.match(regex2)) ; // 30/09/1970
print(regex2) ; // /(\d+)/g
print(regex3.test(dob)) ; // true
print(regex3.exec(dob)) ; // 30/09/1970,30,09,1970
print(dob.replace(regex3,$3-$2-$1)) ; // 1970-09-30
45 / 81

Developpement
du langage
Fonctionnalites
Lobjet Math
Math - les attributs
permet de realiser
les calculs complexes
E : constante dEuler (2,718)
LN2 : logarithme nep
erien
de 2 (0,693)
LN10 : logarithme nep
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 carree
de 1/2 (0,707)
SQRT2 : racine carree
de 2 (1,414)
46 / 81

Developpement
du langage
Fonctionnalites
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

Developpement
du langage
Fonctionnalites
Utiliser Math
Exemple avec Math

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

Developpement
du langage
Fonctionnalites
Lobjet Date
Date - les methodes
les dates
Date()
Date(milliseconds)
Date(y,m,d)
getDay(), getMonth(), getYear(), getFullYear()
getHours(), getMinutes(), getSeconds()
toGMTString
toLocaleString
toUTCString
49 / 81

Developpement
du langage
Fonctionnalites
Utiliser Date
Exemple avec Date

1
2
3
4
5
6
7
8
var today=new Date() ;

print(today) ; //Fri Feb 13 2009 16 :27 :30 GMT+0100 (GMT+01 :00)
print(today.toLocaleDateString()) ; //fevrier 13, 2009
print(today.toUTCString()) ; // Fri, 13 Feb 2009 15 :38 :52 GMT
print(new Date(1000)) ; // Thu Jan 01 1970 01 :00 :01 GMT+0100 (GMT+01 :00)
print(new Date(2009,0,15)) ; // Thu Jan 15 2009 00 :00 :00 GMT+0100 (GMT+01 :00)
print(Date.parse(today.toString())) ; // 1234539588000
50 / 81

Developpement
du langage
Fonctionnalites
Lobjet Array
Array - attributs et methodes
et traiter les tableaux
1 attributs :
length
2
methodes
:
Array concat(array1,array2)
string join(string)
ement
push : ajoute un nouvel el

a` la fin
ement
unshift : ajoute un nouvel el

au debut
ement
pop : supprime et retourne le dernier el

ement
shift : supprime et retourne le premier el

ements
reverse : inverse lordre des el
51 / 81

Developpement
du langage
Fonctionnalites
Lobjet Array
Array - autres methodes

Array(n) : construit un tableau de longueur n
Array(n1,...,nk) : construit un tableau dont les
ements
el
sont n1, . . . , nk
slice(begin,end) : extrait une partie du tableau
splice(index,howMany,e1, ..., en : ajoute et
ements
supprime de nouveaux el
sort() : tri des el
ements
sort(compare function) : tri suivant la fonction
52 / 81

Developpement
du langage
Fonctionnalites
Utiliser Array
Exemple avec Array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var a=[3,8,2,7] ;
print(a.length) ; // 4
print(a.reverse()) ; // 7,2,8,3
a.sort() ; print(a) ; // 2,3,7,8
var a=new Array(1,7,3,7,8,2,1) ;
for (i in a) {
print(i+ +a[i]) ; // 0 1, 1 7, ....
}
print(a.join( ;)) ; //1 ;7 ;3 ;7 ;8 ;2 ;1
var b=a.slice(2,4) ; print(b) ; // 3,7
a.splice(1,2,20) ;
print(a) ; // 1,20,7,8,2,1
function compare(a,b) {
return a-b ;
}
a.sort(compare) ; print(a) ; // 1,1,2,7,8,20
53 / 81

Developpement
Couche Objet en Javascript
La couche objet
54 / 81

Developpement
Caracteristiques
de la couche objet
La couche objet
La mise en oeuvre de la couche objet utilise des mecanismes
differents
des autres langages objets. Faire du Javascript Objet
` deroutant.
est donc tres
`
Trois manieres
differentes
les objets de 3 manieres
`
On peut creer
differentes
utilisation de la classe Object puis associer des attributs

et fonctions
creation
dun constructeur puis dune instance
au format JSON
creation
dune instance grace
55 / 81

Developpement
Caracteristiques
de la couche objet
La couche objet
La mise en oeuvre de la couche objet utilise des mecanismes
differents
des autres langages objets. Faire du Javascript Objet
` deroutant.
est donc tres
`
Trois manieres
differentes
les objets de 3 manieres
`
On peut creer
differentes
utilisation de la classe Object puis associer des attributs

et fonctions
creation
dun constructeur puis dune instance
au format JSON
creation
dune instance grace
56 / 81

Developpement
Utilisation de la classe Object 1/2

Exemple avec Object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// create object
person=new Object() ;
// add properties
person.first name=Joe ;
person.last name=Dalton ;
// add method
person.display=function() {
print(this.first name+ +this.last name) ;
}
// use method
person.display() ;
57 / 81

Developpement
Utilisation de la classe Object 2/2

efinie)
Exemple avec Object (fonction pred

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// create object
// add properties
person.first name=Joe ;
person.last name=Dalton ;
// add predefined function
function display() {
}
person.display=display ;
person.display() ;
58 / 81

Developpement
Utilisation dun constructeur

Exemple avec constructeur
1
2
3
4
5
6
7
8
9
10
11
function Person(first,last) {
this.first name=first ;
this.last name=last ;
this.display=function() {
}
}
person=new Person(Joe,Dalton) ;
person.display() ;
59 / 81

Developpement
Utilisation du format JSON (1/3)
Definition (JaSON - JavaScript Object Notation)

1
(texte) qui permet la

il sagit dun format de donnees
serialisation
des objets
facilite de lecture
(par rapport a` XML)

mise en oeuvre simplifiee
reconnu nativement par Javascript
60 / 81

Developpement

Exemple instance JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var joe={
"first name" : "Joe",
"last name"
: "Dalton",
"display"
: function() {
},
brothers : [
{ "name" : "Jack", age : 30 },
{ "name" : "Averell", age : 33 },
{ "name" : "William", age : 31 }
]
}
joe.display() ;
for (var i=0 ;i<joe.brothers.length ;++i) {
print(joe.brothers[i].name) ;
}
http://www.json.org/
61 / 81

Developpement
Format dechange
(serveur - client), il nest

Lorsque lon echange
des donnees
pas possible de definir

des fonctions (comme dans lexemple
edent).
prec
62 / 81

Developpement
Objet en tant que tableau associatif

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

methodes
identifies
objet et tableau associatif

1
2
3
4
5
6
7
8
person[first name]=Joe ;
person[last name]=Dalton ;
person[display]=function () {
}
person.display() ;
63 / 81

Developpement
Heritage
Heritage
lheritage
au sens oriente objet nexiste pas : deux objets
appartiennent a` la meme
classe sils ont les memes
attributs et
memes
methodes.
heritage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function display() {
}
function Person(fname,lname) {
this.first name=fname ;
this.last name=lname ;
this.display=display ;
}
function Employee(fname,lname,salary) {
this.first name=fname ;
this.last name=lname ;
this.salary=salary ;
this.display=function() {
print(this.first name+ +this.last name+ +this.salary) ;
}
}
64 / 81

Developpement
Notion de prototype
Definition (Prototype)
un prototype represente
un ensemble dattributs et de
a` lobjet lors de sa creation.
methodes
qui seront ajoutes
prototype
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person(first,last) {
this.first name=first ;
this.last name=last ;
}
var joe=new Person(Joe,Dalton) ;
// you can not use this :
// joe.display() ;
Person.prototype.first name=x ;
Person.prototype.last name=y ;
Person.prototype.display=function() {
}
var jack=new Person(Jack,Dalton) ;
jack.display() ;
65 / 81

Developpement
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
Ajax
Ajax
Ajax
67 / 81

Developpement
Ajax
Ajax
Definition (Ajax - Asynchronous JAvascript and XML)
introduit par Jesse James Garrett en 2005, reunion

de trois
des interfaces utilisateur riches (RUI)
technologies afin de creer
Javascript pour linteraction cot
e client
XMLHttpRequest pour les requetes
asynchrones
XML pour lechange
client-serveur
de donnees
mais repose egalement

sur
DOM
CSS
68 / 81

Developpement
Ajax
Ajax
Definition (Ajax - Asynchronous JAvascript and XML)
introduit par Jesse James Garrett en 2005, reunion

de trois
des interfaces utilisateur riches (RUI)
technologies afin de creer
Javascript pour linteraction cot
e client
XMLHttpRequest pour les requetes
asynchrones
XML pour lechange
client-serveur
de donnees
mais repose egalement

sur
DOM
CSS
69 / 81

Developpement
Ajax
Ajax
Definition (XMLHttpRequest - XHR)

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

Developpement
Ajax
Ajax

developp

71 / 81

Developpement
Ajax
Ajax

developp

72 / 81

Developpement
Ajax
Ajax

developp

73 / 81

Developpement
Ajax
Ajax

developp

74 / 81

Developpement
Ajax
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
enement
gestionnaire dev
responseText : reponse
du serveur sous forme texte

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

75 / 81

Developpement
Ajax
XMLHttpRequest
Attention !
du serveur et quelles sont
lorsque lon a recu les donnees
:
pretes
a` etre
traitees
readyState = 4
Status = 200
76 / 81

Developpement
Ajax
XMLHttpRequest
methodes
de XMLHttpRequest
ouverture dune connexion pour envoi ou reception
de
(GET, POST) : open(method,url,async)

donnees
envoi dune requete
: send(content)
mettre fin a` la requete
: abort()
77 / 81

Developpement
Ajax
un objet XMLHttpRequest
Creer
Creer
Le 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

Developpement
Ajax
Creer
Creer
Le 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

Developpement
Ajax
Utiliser un objet XMLHttpRequest
XMLHttpRequest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var my request=getXMLHTTPRequest() ;
var url=get text data.php ;
my request.open("GET", url, true) ;
my request.onreadystatechange=process data ;
my request.send(null) ;
function process data() {
if (my request.readyState==4) {
if (my request.status==200) {
var my text=my request.responseText ;
document.getElementById("text data").innerHTML=my text ;
}
}
}
80 / 81

Developpement
Ajax
a` Ajax
Frameworks Javascript lies
Frameworks
` grand nombre de frameworks ont et
e developp
pour
Un tres
es
le Web. Pami les plus connus, on peut notamment citer :
1
Prototype (www.prototypejs.org)
Scriptaculous (script.aculo.us)
jQuery (jquery.com)
Rico (openrico.org)
Dojo (dojotoolkit.org)
Google Web Toolkit (Java)
` ses specificit
(cf cours 7).

chacun possede
es
81 / 81

DW crs6

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

DW crs6

Transféré par

Droits d'auteur :

Formats disponibles

Developpement

langage dans le cadre du developpement

suivie par letude

La couche Objet en Javascript

dune couche objet

dune couche objet

dune couche objet

dune couche objet

dune couche objet

dune couche objet

Definition (ECMAScript - ECMA-262)

Utilisation de Javascript pour le navigateur

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

utiliser $ (cf frameworks Ajax)

utiliser $ (cf frameworks Ajax)

utiliser $ (cf frameworks Ajax)

au mot cle function

au mot cle function

au mot cle function

Les fonctions principales

Utilisation des fonctions principales

chacun des objets possede

elle permet de determiner

Exemple avec Boolean

Exemple avec Number

var n1=new Number(255) ; // ou n1=255 ;

Exemple avec String

qui correspondent a` lexpression

introduite par /.../q ou` q est un

qualificateur (g = global, i = insensible a` la casse)

Exemple avec RegExp

Math - les methodes

Exemple avec Math

Date - les methodes

Exemple avec Date

var today=new Date() ;

Array - attributs et methodes

push : ajoute un nouvel el

unshift : ajoute un nouvel el

pop : supprime et retourne le dernier el

shift : supprime et retourne le premier el

reverse : inverse lordre des el

Array - autres methodes

sort(compare function) : tri suivant la fonction

Couche Objet en Javascript

La mise en oeuvre de la couche objet utilise des mecanismes

utilisation de la classe Object puis associer des attributs

La mise en oeuvre de la couche objet utilise des mecanismes

utilisation de la classe Object puis associer des attributs

Utilisation de la classe Object 1/2

Utilisation de la classe Object 2/2

Exemple avec Object (fonction pred

Utilisation dun constructeur

Utilisation du format JSON (1/3)

Definition (JaSON - JavaScript Object Notation)

(texte) qui permet la

(par rapport a` XML)

reconnu nativement par Javascript

Utilisation du format JSON (2/3)

Utilisation du format JSON (3/3)

(serveur - client), il nest

pas possible de definir

Objet en tant que tableau associatif