cours jquery ajax
TRANSCRIPT
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%
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 2/23
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 3/23
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,
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 4/23
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:
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 5/23
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 6/23
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
7/23/2019 Cours Jquery Ajax
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
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j
s">
</script>
7/23/2019 Cours Jquery Ajax
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 '
7/23/2019 Cours Jquery Ajax
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':
7/23/2019 Cours Jquery Ajax
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'
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 11/23Intefaces Hommes-Mac&ines - François Bonne$ 00
E9em+!e<html>
<script type="text/javascript"
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>
7/23/2019 Cours Jquery Ajax
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 \
7/23/2019 Cours Jquery Ajax
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);
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 14/23Intefaces Hommes-Mac&ines - François Bonne$ 0
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)*
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 15/23Intefaces Hommes-Mac&ines - François Bonne$ 02
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
7/23/2019 Cours Jquery Ajax
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
7/23/2019 Cours Jquery Ajax
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:
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 18/23Intefaces Hommes-Mac&ines - François Bonne$ 0
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 19/23Intefaces Hommes-Mac&ines - François Bonne$ 01
.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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 20/23
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 21/23
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 22/23
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
7/23/2019 Cours Jquery Ajax
http://slidepdf.com/reader/full/cours-jquery-ajax 23/23
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