Cours Jquery Ajax

IHM
JQuery
Franois BONNEVILLE
aricia - francois@aricia.fr
Laboratoire d'Informatique
de lUniversit de Franche-Comt
De JavaScript jQuery
La naissance de JavaScript
1995 : Brendan Eich dveloppe pour Netscape
Communications Corporation, un langage de script, appel
Mocha, puis LiveScript et finalement JavaScript
Javascript est intgr dans le navigateur Netscape 2. Succs
immdiat.
La guerre des navigateurs

Netscape et Microsoft (avec JScript dans Internet Explorer) ont
dvelopp leur propre variante de JavaScript avec des
fonctionnalits supplmentaires et incompatibles, notamment
dans la manipulation du DOM (modle objet du navigateur
WEB)
1997 : Adoption du standard ECMAScript.
Les spcifications sont rdiges dans le document Standard
ECMA-262.
Intefaces Hommes-Machines - Franois Bonnev
La naissance de la fondation Mozilla

Netscape perd des parts de march face Microsoft
Malgr un procs pour concurrence dloyale, Netscape,
rachet par AOL est dissoute en 2004
Netscape, dans ses dernires forces, fonde la fondation
principaut Mozilla, et lui livre le code source de Netscape
Navigator 5, qui contient les premires briques du moteur de
rendu Gecko (aujourdhui au coeur de Firefox).
Actuellement, les navigateurs web modernes supportent tous
les spcifications ECMAScript
Mais chacun a tendu les spcifications pour utiliser au mieux
son propre navigateur, ce qui a amen des diffrences
dimplmentation suivant le navigateur
JavaScript devenu incontournable

Les spcifications ECMAScript ont permis de
prenniser JavaScript
JavaScript permet de contrler quasiment tous les
paramtres dune page WEB
Cest le seul langage, cot client, capable de changer
dynamiquement laspect dune page WEB
Avec larrive de lobjet XMLHttpRequest
permettant le dveloppement dapplications AJAX,
JavaScript est devenu incontournable dans le
dveloppement dinterfaces WEB volues (WEB2.0)
Les premiers Frameworks

Comme il tait devenu difficile de coder du javascript
pour tous les navigateurs, sont apparus des
Frameworks permettant une spcification unique,
indpendante du navigateur
PrototypeJS - www.prototypejs.org
script.aculo.us
Mootools - mootools.net
DoJo Toolkit - www.dojotoolkit.org
Yahoo UI - developer.yahoo.com/yui/
ExtJS - www.extjs.com
UIZE - www.uize.com
JQuery
Une bibliothque javascript open-source et crossbrowser
Elle permet de traverser et manipuler trs facilement
l'arbre DOM des pages web l'aide d'une syntaxe
fortement similaire celle d'XPath.
JQuery permet par exemple de changer/ajouter une
classe CSS, crer des animations, modifier des
attributs, etc.
Grer les vnements javascript
Faire des requtes AJAX simplement
une simple bibliothque importer

Disponible sur le site de Jquery
http://jquery.com/
<script type="text/javascript"
src="jquery.js"></script>
Ou directement sur Google code

src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j
s">
</script>
La fonction jQuery()
jQuery repose sur une seule
fonction :
jQuery() ou $().
Cest une fonction JavaScript
Elle accepte des paramtres
Elle retourne un objet
$ : Syntaxe issue de
Prototype
$('anything')
$ accepte un slecteur CSS en argument
$ accepte des ID :
$('#nomID') retourne un lment <->
document.getElementById
$ accepte des classes :

$('.nomClasse') retourne tous les lments qui
correspondent cette classe
$ accepte plusieurs slecteurs

$('.article, .nouvelles, .edito')
$(anything)
$ accepte des slecteurs spcifiques :
$(':radio'), $(':header'), $(':first-child')
des slecteurs en forme de filtres :

$(':checked'), $(':odd'), $(':visible')
plus fort: $(':contains(du texte)')
des attributs
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
10
Exemple
<html>
src="http://ajax.googleapis.com/ajax/libs/
jquery/1/jquery.min.js">
</script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#"
onClick="jQuery('#monDiv').hide();">
disparition</a>
</body>
</html>
11
jQuery: un objet
les mthodes s'appliquent gnralement tous les lments
slectionns
$('.classe').hide();
$('.classe').show();
de nombreuses mthodes utilitaires

parcourir le DOM: .parent(), .next(), .children(), .parents()
ajouter ou retirer des classes CSS: addClass, removeClass
manipuler: append, wrap, prepend
Intrt fondamental: la plupart des mthodes de l'objet

retournent l'objet lui-mme
on peut chaner les appels !
$('anything').parent().find('still anything').show();
Cette proprit est extrmement puissante !
12
Ajax
JQuery possde toute une panoplie de fonctions
permettant de simplifier les requtes Ajax
La plus simple :
$('#maDiv').load('page.html');
Plus complexe :
$.get('test.html',
function(data) {faire quelque chose);
Gnrale :
$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },
success: function(xml){faire quelque chose}
});
13
Inconvnients dAJAX / XML

XML est dlicat parser en Javascript/jQuery
$.ajax({ type: "GET", url: "courses.xml",
dataType: "xml",
complete : function(data, status)
{ var products = data.responseXML;
var html = "";
$
(products).find('product').each(function(){
var id = $(this).attr('id');
var name = $(this).find('name').text();
var price =$(this).find('price').text();
html += "<li>#"+id
+" - <strong>"+name+"</strong> : "
+price+"</li>"; }); $
("#cousesList").html(html); }});
14
Inconvnients dAJAX / Scurit

les fichiers de configuration.
pour des raisons de scurit, les navigateurs

interdisent de faire du cross-domain avec
XMLHttpRequest dont le rsultat serait du
XML (et donc du HTML)
.mais pas pour des scripts Javascript !
Do lide de dfinir un modle de donnes
sous la forme dobjet Javascript
JSON
15
JSON (JavaScript Object Notation)

format de donnes textuel, gnrique, driv de la notation des
objets de JavaScript
permet de reprsenter de l'information structure.
dcrit par la RFC 4627 de lIETF.
Exemple :
{ "Image": {
"Width": 800,
"Height": 600,
"Title": "Vue du 15me tage",
"Thumbnail": {
"Url": "http://www.example.com/481989943",
"Height": 125,
"Width": "100" },
"IDs": [116, 943, 234, 38793]
} }
16
Les avantages de JSON

Type de donnes gnrique et abstrait pouvant
tre reprsent dans n'importe quel langage de programmation
reprsenter n'importe quelle donne concrte.
simple mettre uvre tout en tant complet.

peu verbeux, lisible aussi bien par un humain que par une
machine
facile apprendre, syntaxe rduite
types de donnes sont connus et simples dcrire
indpendant du langage de programmation (bien qu'utilisant
une notation JavaScript)
Le type MIME application/json est utilis pour le transmettre
par le protocole HTTP (notamment en Ajax)
17
Les avantages de JSON

Vis--vis de JavaScript, un document JSON
reprsente un objet, d'o son nom. Il est donc plus
facile interprter qu'un XML.
var donnees = eval('('+donnees_json+')');
Le site json.org fournit une liste de parseurs pour

d'autres langages
Il peut aussi tre utilis pour :
la srialisation et dserialisation d'objets ;
lencodage de documents ;
18
jQuery et JSON
jQuery.getJSON( url, [ data ],
[ callback(data, textStatus) ] )
Exemple :
<html><head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="images" style="height: 300px"></div>
<script>$.getJSON("http://api.flickr.com/services/feeds/photos_public.g
ne?tags=besancon&format=json",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src",
item.media.m).appendTo("#images");
});
});
</script>
</body></html>
19
jQuery UI
http://jqueryui.com/
Un ensemble de composants graphiques tlchargeable
l'adresse http://jqueryui.com/download.
un noyau (Core)
des comportements (interactions)
draggable : pour glisser-dplacer un lment
http://jqueryui.com/demos/draggable/
droppable : pour dposer un lment
http://jqueryui.com/demos/droppable/
resizable : pour redimensionner un lment
http://jqueryui.com/demos/resizable/
selectable : pour slectionner des lments la souris
http://jqueryui.com/demos/selectable/
sortable : pour trier des lments
http://jqueryui.com/demos/selectable/
20
jQuery UI
des widgets
accordon http://jqueryui.com/demos/accordion/
calendrier http://jqueryui.com/demos/datepicker/
bote de dialogue http://jqueryui.com/demos/dialog/
barre de progression http://jqueryui.com/demos/progressbar/
curseur http://jqueryui.com/demos/slider/
onglets http://jqueryui.com/demos/tabs/
des effets
http://jqueryui.com/demos/effect/
Clignotement, disparition, apparition, clatement, transition
Une collection de thmes

http://jqueryui.com/themeroller/
21
jQuery Plugins
On peut tendre facilement jQuery en utilisant des plugins
Les mthodes ajoutes sont au mme niveau que les mthodes
natives
Ils conservent les mmes smantiques que les mthodes
natives: retourner l'objet jQuery, appliquer la mthode tous
les lments reprsents
Des centaines plugins existent d'ores et dj, de qualit
variable; certains mis en avant par l'quipe de dveloppement
http://plugins.jquery.com/
des menus
http://apycom.com/
http://www.wizzud.com/jqDock/
Galerie photo : VisualLightbox
http://visuallightbox.com
22
Conclusion
jQuery est un framework complet et facile utiliser

Bibliothque lgre charger
Simplifier et unifie la syntaxe daccs au DOM
Permet de faire des requtes AJAX simplement
UI et nombreux plugins complmentaires
Dautres frameworks sont disponibles et ne sont pas

oublier : il est possible de combiner les frameworks
23

Cours Jquery Ajax

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cours Jquery Ajax

Uploaded by

Copyright:

Available Formats

IHM

La guerre des navigateurs

Intefaces Hommes-Machines - Franois Bonnev

La naissance de la fondation Mozilla

JavaScript devenu incontournable

Les premiers Frameworks

une simple bibliothque importer

Ou directement sur Google code

Intefaces Hommes-Machines - Franois Bonnev

$ accepte des classes :

$ accepte plusieurs slecteurs

des slecteurs en forme de filtres :

Intefaces Hommes-Machines - Franois Bonnev

de nombreuses mthodes utilitaires

Intrt fondamental: la plupart des mthodes de l'objet

Intefaces Hommes-Machines - Franois Bonnev

Intefaces Hommes-Machines - Franois Bonnev

Inconvnients dAJAX / XML

Intefaces Hommes-Machines - Franois Bonnev

Inconvnients dAJAX / Scurit

pour des raisons de scurit, les navigateurs

JSON (JavaScript Object Notation)

Intefaces Hommes-Machines - Franois Bonnev

Les avantages de JSON

simple mettre uvre tout en tant complet.

Les avantages de JSON

Le site json.org fournit une liste de parseurs pour

Intefaces Hommes-Machines - Franois Bonnev

Intefaces Hommes-Machines - Franois Bonnev

Intefaces Hommes-Machines - Franois Bonnev

Une collection de thmes

Intefaces Hommes-Machines - Franois Bonnev

jQuery est un framework complet et facile utiliser

Dautres frameworks sont disponibles et ne sont pas

Intefaces Hommes-Machines - Franois Bonnev

You might also like