Vous êtes sur la page 1sur 23

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
Intefaces Hommes-Machines - Franois Bonnev

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)
Intefaces Hommes-Machines - Franois Bonnev

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
Intefaces Hommes-Machines - Franois Bonnev

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
Intefaces Hommes-Machines - Franois Bonnev

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


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j
s">
</script>

Intefaces Hommes-Machines - Franois Bonnev

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
Intefaces Hommes-Machines - Franois Bonnev

$('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')
Intefaces Hommes-Machines - Franois Bonnev

$(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]'

Intefaces Hommes-Machines - Franois Bonnev

10

Exemple
<html>
<script type="text/javascript"
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>
Intefaces Hommes-Machines - Franois Bonnev

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 !

Intefaces Hommes-Machines - Franois Bonnev

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}
});

Intefaces Hommes-Machines - Franois Bonnev

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); }});

Intefaces Hommes-Machines - Franois Bonnev

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
Intefaces Hommes-Machines - Franois Bonnev

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]

} }

Intefaces Hommes-Machines - Franois Bonnev

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)
Intefaces Hommes-Machines - Franois Bonnev

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 ;

Intefaces Hommes-Machines - Franois Bonnev

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>

Intefaces Hommes-Machines - Franois Bonnev

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/

Intefaces Hommes-Machines - Franois Bonnev

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/
Intefaces Hommes-Machines - Franois Bonnev

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

Intefaces Hommes-Machines - Franois Bonnev

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

Intefaces Hommes-Machines - Franois Bonnev

23