cours jquery ajax

7/23/2019 Cours Jquery Ajax

http://slidepdf.com/reader/full/cours-jquery-ajax 1/23

IHM

JQueryFrançois BONNEVILLE

aricia - [email protected] d'Informatiue

de !"#ni$ersit% de Franc&e-omt%



Intefaces Hommes-Mac&ines - François Bonne$ (

)e Ja$a*cri+t, .Query/ La naissance de Ja$a*cri+t

♦ 0112 3 Brendan Eich d%$e!o++e +our Netsca+eommunications or+oration4 un !an5a5e de scri+t4 a++e!%Moc&a4 +uis Li$e*cri+t et fina!ement Ja$a*cri+t

♦ Ja$ascri+t est int%5r% dans !e na$i5ateur Netsca+e (6 *ucc7simm%diat6

/ La 5uerre des na$i5ateurs♦ Netsca+e et Microsoft 8a$ec J*cri+t dans Internet E9+!orer: ont

d%$e!o++% !eur +ro+re $ariante de Ja$a*cri+t a$ec desfonctionna!it%s su++!%mentaires et incom+atib!es4 notammentdans !a mani+u!ation du )OM 8mod7!e ob.et du na$i5ateur;EB:

♦ 011< 3 =do+tion du standard EM=*cri+t6Les s+%cifications sont r%di5%es dans !e document *tandardEM=-(>(6



Intefaces Hommes-Mac&ines - François Bonne$ ?

La naissance de !a fondation Mo@i!!a/ Netsca+e +erd des +arts de marc&% face Microsoft

/ Ma!5r% un +roc7s +our concurrence d%!oya!e4 Netsca+e4

rac&et% +ar =OL est dissoute en (AA

/ Netsca+e4 dans ses derni7res forces4 fonde !a fondation

+rinci+aut% Mo@i!!a4 et !ui !i$re !e code source de Netsca+e

Na$i5ator 24 ui contient !es +remi7res briues du moteur derendu CecDo 8au.ourd"&ui au coeur de Firefo9:6

/ =ctue!!ement4 !es na$i5ateurs eb modernes su++ortent tous

!es s+%cifications EM=*cri+t

/ Mais c&acun a %tendu !es s+%cifications +our uti!iser au mieu9

son +ro+re na$i5ateur4 ce ui a amen% des diff%rences

d"im+!%mentation sui$ant !e na$i5ateur,



Intefaces Hommes-Mac&ines - François Bonne$

Ja$a*cri+t de$enu incontournab!e/ Les s+%cifications EM=*cri+t ont +ermis de

+%renniser Ja$a*cri+t

/ Ja$a*cri+t +ermet de contr!er uasiment tous !es

+aram7tres d"une +a5e ;EB

/ "est !e seu! !an5a5e4 cot% c!ient4 ca+ab!e de c&an5erdynamiuement !"as+ect d"une +a5e ;EB

/ =$ec !"arri$%e de !"ob.et GMLHtt+euest

+ermettant !e d%$e!o++ement d"a++!ications =J=G4

Ja$a*cri+t est de$enu incontournab!e dans !e

d%$e!o++ement d"interfaces ;EB %$o!u%es 8;EB(6A:



Intefaces Hommes-Mac&ines - François Bonne$ 2

Les +remiers FrameorDs / omme i! %tait de$enu diffici!e de coder du .a$ascri+t

+our tous !es na$i5ateurs4 sont a++arus des

FrameorDs +ermettant une s+%cification uniue4

ind%+endante du na$i5ateur

♦

Krototy+eJ* - 6+rototy+e.s6or5 scri+t6acu!o6us

♦Mootoo!s - mootoo!s6net

♦)oJo oo!Dit - 6do.otoo!Dit6or5

♦a&oo #I - de$e!o+er6ya&oo6comyui♦E9tJ* - 6e9t.s6com

♦#IE - 6ui@e6com



Intefaces Hommes-Mac&ines - François Bonne$ >

JQuery/ #ne bib!iot&7ue .a$ascri+t o+en-source et cross-

broser

/ E!!e +ermet de tra$erser et mani+u!er tr7s faci!ement

!'arbre )OM des +a5es eb !'aide d'une synta9e

fortement simi!aire ce!!e d'GKat&6/ JQuery +ermet +ar e9em+!e de c&an5era.outer une

c!asse **4 cr%er des animations4 modifier des

attributs4 etc6

/ C%rer !es %$%nements .a$ascri+t

/ Faire des reuPtes =J=G sim+!ement


http://slidepdf.com/reader/full/cours-jquery-ajax 7/23Intefaces Hommes-Mac&ines - François Bonne$ <

une sim+!e bib!iot&7ue im+orter

/ )is+onib!e sur !e site de Juery

&tt+3.uery6com

<script type="text/javascript"

src="jquery.js"></script>

/ Ou directement sur Coo5!e code


src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j

s">

</script>


http://slidepdf.com/reader/full/cours-jquery-ajax 8/23Intefaces Hommes-Mac&ines - François Bonne$

La fonction jQuery()

• jQuery repose sur une seulefonction :

jQuery() ou $().

•C’est une fonction JavaScript

•Elle accepte des para!tres

•Elle retourne un o"jet•$ : Synta#e issue de &rototype '


http://slidepdf.com/reader/full/cours-jquery-ajax 9/23Intefaces Hommes-Mac&ines - François Bonne$ 1

R8'anyt&in5':

/ R acce+te un s%!ecteur ** en ar5ument

/ R acce+te des I) 3

♦R8'SnomI)': retourne un %!%ment T-U

document65etE!ementById

/ R acce+te des c!asses 3

♦R8'6nom!asse': retourne tous !es %!%ments ui

corres+ondent cette c!asse

/ R acce+te +!usieurs s%!ecteurs

♦R8'6artic!e4 6nou$e!!es4 6edito':


http://slidepdf.com/reader/full/cours-jquery-ajax 10/23Intefaces Hommes-Mac&ines - François Bonne$ 0A

R8anyt&in5:/ R acce+te des s%!ecteurs s+%cifiues 3

♦ R8'3radio':4 R8'3&eader':4 R8'3first-c&i!d':

/ des s%!ecteurs en forme de fi!tres 3

♦ R8'3c&ecDed':4 R8'3odd':4 R8'3$isib!e':

♦ +!us fort3 R8'3contains8du te9te:':

/ des attributs

♦ R8'a&refW':4 R8'a&refXY&tt+3':4 R8'im5srcRY6+n5W'



E9em+!e<html>


src="http://ajax.googleapis.com/ajax/libs/

jquery/1/jquery.min.js">

</script>

<body>

<div id="moniv">!onjour</div>

<a hre="#"

on$lic%="j&uery'(#moniv().hide')*">

disparition</a>

</body>

</html>


http://slidepdf.com/reader/full/cours-jquery-ajax 12/23Intefaces Hommes-Mac&ines - François Bonne$ 0(

.Query3 un ob.et/ !es m%t&odes s'a++!iuent 5%n%ra!ement tous !es %!%ments

s%!ectionn%s♦ R8'6c!asse':6&ide8:Z

♦ R8'6c!asse':6s&o8:Z

/ de nombreuses m%t&odes uti!itaires

♦ +arcourir !e )OM3 6+arent8:4 6ne9t8:4 6c&i!dren8:4 6+arents8:

♦ a.outer ou retirer des c!asses **3 add!ass4 remo$e!ass

♦ mani+u!er3 a++end4 ra+4 +re+end

/ Int%rPt fondamenta!3 !a +!u+art des m%t&odes de !'ob.et

retournent !'ob.et !ui-mPme♦ on +eut c&a[ner !es a++e!s \

♦ R8'anyt&in5':6+arent8:6find8'sti!! anyt&in5':6s&o8:Z

♦ ette +ro+ri%t% est e9trPmement +uissante \


http://slidepdf.com/reader/full/cours-jquery-ajax 13/23Intefaces Hommes-Mac&ines - François Bonne$ 0?

=.a9/ JQuery +oss7de toute une +ano+!ie de fonctions

+ermettant de sim+!ifier !es reuPtes =.a9/ La +!us sim+!e 3

$('#maDiv').load('page.html');

• Plus complexe :$.get('test.html',function(data) {faire quelque chose);

/ C%n%ra!e 3 $.aja({url! 'document.ml',t"pe! '%',data%"pe! 'ml',timeout! &,error! function(){alert('rreur chargement'); ,

success! function(ml){faire quelque chose);



Incon$%nients d"=J=G GML/ GML est d%!icat +arser en Ja$ascri+t.Query+.ajax', type: "-"0 url: "courses.xml"0

dataype: "xml"0

complete : unction'data0 status)

, var products = data.response23*

var html = ""* +'products).ind'(product().each'unction'),

var id = +'this).attr'(id()*

var name = +'this).ind'(name().text')*

var price =+'this).ind'(price().text')*

html 4= "<li>#"4id

4" 5 <strong>"4name4"</strong> : "

4price4"</li>"* 6)* +

'"#couses3ist").html'html)* 66)*



Incon$%nients d"=J=G *%curit%♦ !es fic&iers de confi5uration6

/ +our des raisons de s%curit%4 !es na$i5ateurs

interdisent de faire du cross-domain a$ec

GMLHtt+euest dont !e r%su!tat serait du

GML 8et donc du HML:,6mais +as +our des scri+ts Ja$ascri+t \

/ )"o] !"id%e de d%finir un mod7!e de donn%es

sous !a forme d"ob.et Ja$ascri+t♦J*ON


http://slidepdf.com/reader/full/cours-jquery-ajax 16/23Intefaces Hommes-Mac&ines - François Bonne$ 0>

J*ON 8Ja$a*cri+t Ob.ect Notation:/ format de donn%es te9tue!4 5%n%riue4 d%ri$% de !a notation des

ob.ets de Ja$a*cri+t/ +ermet de re+r%senter de !'information structur%e6

/ d%crit +ar !a F >(< de !"IEF6

/ E9em+!e 3

, "7mage": ,"8idth": 90

";eight": 0

"itle": "ue du 1?me @tage"0

"humbnail": ,

"Arl": "http://BBB.example.com/C91D9DDCE"0";eight": 1F0

"8idth": "1" 60

"7s": G110 DCE0 FEC0 E9HDEI

6 6


http://slidepdf.com/reader/full/cours-jquery-ajax 17/23Intefaces Hommes-Mac&ines - François Bonne$ 0<

Les a$anta5es de J*ON/ y+e de donn%es 5%n%riue et abstrait +ou$ant

♦ Ptre re+r%sent% dans n'im+orte ue! !an5a5e de +ro5rammation

♦ re+r%senter n'im+orte ue!!e donn%e concr7te6

/ sim+!e mettre ^u$re tout en %tant com+!et6

/ +eu $erbeu94 !isib!e aussi bien +ar un &umain ue +ar une

mac&ine

/ faci!e a++rendre4 synta9e r%duite

/ ty+es de donn%es sont connus et sim+!es d%crire

/ ind%+endant du !an5a5e de +ro5rammation 8bien u'uti!isant

une notation Ja$a*cri+t:

/ Le ty+e MIME a++!ication.son est uti!is% +our !e transmettre

+ar !e +rotoco!e HK 8notamment en =.a9:



Les a$anta5es de J*ON/ Vis--$is de Ja$a*cri+t4 un document J*ON

re+r%sente un ob.et4 d'o] son nom6 I! est donc +!us

faci!e inter+r%ter u'un GML6

var donnees eval('('*donnees+json*')');/ Le site .son6or5 fournit une !iste de +arseurs +our

d'autres !an5a5es

/ I! +eut aussi Ptre uti!is% +our 3

♦ !a s%ria!isation et d%seria!isation d'ob.ets Z

♦ !"encoda5e de documents Z



.Query et J*ONjuer".get-/0( url, 1 data 2,

1 call3ac4(data, tettatus) 2 )Exemple :

5html65head6

5script src7j8uer".min.js7659script6

59head6

53od"6 5div id7images7 st"le7height! :p7659div6

5script6$.get-/0(7http!99api.flic4r.com9services9feeds9photos+pu3lic.gnetags3esancon<formatjson7,

function(data){

$.each(data.items, function(i,item){

$(75img967).attr(7src7,item.media.m).append%o(7#images7);

);

);

59script6

593od"659html6



Intefaces Hommes-Mac&ines - François Bonne$ (A

.Query #I/ &tt+3.ueryui6com

/ #n ensemb!e de com+osants 5ra+&iues t%!%c&ar5eab!e

!'adresse &tt+3.ueryui6comdon!oad6

♦ un noyau 8ore:

♦ des com+ortements 8interactions:

draggable 3 +our 5!isser-d%+!acer un %!%ment&tt+3.ueryui6comdemosdra55ab!e

droppable 3 +our d%+oser un %!%ment

&tt+3.ueryui6comdemosdro++ab!e

resiJable 3 +our redimensionner un %!%ment

&tt+3.ueryui6comdemosresi@ab!e selectable 3 +our s%!ectionner des %!%ments !a souris

&tt+3.ueryui6comdemosse!ectab!e

sortable 3 +our trier des %!%ments

&tt+3.ueryui6comdemosse!ectab!e



Intefaces Hommes-Mac&ines - François Bonne$ (0

.Query #I♦ des id5ets

accord%on &tt+3.ueryui6comdemosaccordion

ca!endrier &tt+3.ueryui6comdemosdate+icDer

bo[te de dia!o5ue &tt+3.ueryui6comdemosdia!o5

barre de +ro5ression &tt+3.ueryui6comdemos+ro5ressbar

curseur &tt+3.ueryui6comdemoss!ider on5!ets &tt+3.ueryui6comdemostabs

♦ des effets

&tt+3.ueryui6comdemoseffect

!i5notement4 dis+arition4 a++arition4 %c!atement4 transition,/ #ne co!!ection de t&7mes

&tt+3.ueryui6comt&emero!!er



Intefaces Hommes-Mac&ines - François Bonne$ ((

.Query K!u5ins/ On +eut %tendre faci!ement .Query en uti!isant des +!u5ins

/ Les m%t&odes a.out%es sont au mPme ni$eau ue !es m%t&odesnati$es

/ I!s conser$ent !es mPmes s%mantiues ue !es m%t&odesnati$es3 retourner !'ob.et .Query4 a++!iuer !a m%t&ode tous

!es %!%ments re+r%sent%s/ )es centaines +!u5ins e9istent d'ores et d%.4 de ua!it%$ariab!eZ certains mis en a$ant +ar !'%ui+e de d%$e!o++ement

/ &tt+3+!u5ins6.uery6com♦ des menus

&tt+3a+ycom6com&tt+36i@@ud6com.)ocD

♦ Ca!erie +&oto 3 Visua!Li5&tbo9&tt+3$isua!!i5&tbo96com



Intefaces Hommes Mac&ines François Bonne$ (?

onc!usion/ .Query est un frameorD com+!et et faci!e uti!iser

/ Bib!iot&7ue !%57re c&ar5er

/ *im+!ifier et unifie !a synta9e d"acc7s au )OM

/ Kermet de faire des reu7tes =J=G sim+!ement

/ #I et nombreu9 +!u5ins com+!%mentaires

/ )"autres frameorDs sont dis+onib!es et ne sont +as

oub!ier 3 i! est +ossib!e de combiner !es frameorDs

cours jquery ajax

Documents