JQuery
De JavaScript… à jQuery
La naissance de JavaScript
◦ 1995 : Brendan Eich développe pour
Netscape Communications Corporation, un
langage de script, appelé Mocha, puis
LiveScript et finalement JavaScript
◦ Javascript est intégré dans le navigateur
Netscape 2. Succès immédiat.
La guerre des navigateurs
◦ Netscape et Microsoft (avec JScript dans
Internet Explorer) ont développé leur propre
variante de JavaScript avec des
fonctionnalités supplémentaires et
incompatibles, notamment dans la
manipulation du DOM (modèle objet du
navigateur WEB)
◦ 1997 : Adoption du standard ECMAScript.
Les spécifications sont rédigées dans le 2
La naissance de la fondation
Mozilla
Netscape perd des parts de marché face à
Microsoft
Malgré un procès pour concurrence déloyale,
Netscape, racheté par AOL est dissoute en 2004
Netscape, dans ses dernières forces, fonde la
fondation principauté Mozilla, et lui livre le code
source de Netscape Navigator 5, qui contient les
premières briques du moteur de rendu Gecko
(aujourd’hui au coeur de Firefox).
Actuellement, les navigateurs web modernes
supportent tous les spécifications ECMAScript
Mais chacun a étendu les spécifications pour
utiliser au mieux son propre navigateur, ce qui a
amené à des différences d’implémentation
suivant le navigateur…
Cours applications web M1 Miage 2011 3
JavaScript devenu
incontournable
Les spécifications ECMAScript ont permis
de pérenniser JavaScript
JavaScript permet de contrôler quasiment
tous les paramètres d’une page WEB
C’est le seul langage, coté client, capable
de changer dynamiquement l’aspect
d’une page WEB
Avec l’arrivée de l’objet XMLHttpRequest
permettant le développement
d’applications AJAX, JavaScript est devenu
incontournable dans le développement
d’interfaces WEB évoluées (WEB2.0) 4
Les premiers
« Frameworks »
Comme il était devenu difficile de
coder du javascript pour tous les
navigateurs, sont apparus des
« Frameworks » permettant une
spécification unique, indépendante
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 5
JQuery
Une bibliothèque javascript open-
source et cross-browser
Elle permet de traverser et
manipuler très 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,
créer des animations, modifier des
attributs, etc.
Gérer les événements javascript
Faire des requêtes AJAX simplement
6
Ce que jQuery n’est pas
Un substitut pour apprendre JavaScript
◦ jQuery est très puissant et très pratique,
mais vous devez néanmoins connaitre les
bases de Javascript, notamment la partie
“objet” du langage.
◦ Voir des vlivres comme :
“Object Oriented Javascript de Stoyan Stefanov”
ou
“jQuery, novice to ninja” (google est votre ami)
Une réponse à tout
◦ Utilisez jQuery uniquement lorsque c’est
nécessaire. On commence toujours par
HTML+CSS avant de chercher des plugins
jQuery magiques.
◦ De nombreuses UI sont pures html+CSS
Une simple bibliothèque à
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.js">
</script>
8
La fonction jQuery()
jQuery repose sur une seule fonction :
jQuery() ou $().
C’est une fonction JavaScript
Elle accepte des paramètres
Elle retourne un objet
$ : Syntaxe issue de «
Prototype »
9
Selecteur magique : $
('anything') !
$ accepte un sélecteur CSS en
argument
$ accepte des ID :
◦ $('#nomID') retourne un élément <->
document.getElementById
$ accepte des classes :
◦ $('.nomClasse') retourne tous les
éléments qui correspondent à cette
classe
$ accepte plusieurs sélecteurs
◦ $('.article, .nouvelles, .edito')
10
$(anything)
$ accepte des sélecteurs
spécifiques :
◦ $(':radio'), $(':header'), $(':first-child')
des sélecteurs en forme de filtres :
◦ $(':checked'), $(':odd'), $(':visible')
◦ plus fort: $(':contains(du texte)')
des attributs
◦ $('a[href]'), $('a[href^=http://'), $
('img[src$=.png]'
11
jQuery: un objet
les méthodes s'appliquent généralement à tous
les éléments sélectionnés
◦ $('.classe').hide();
◦ $('.classe').show();
de nombreuses méthodes utilitaires
◦ parcourir le
DOM: .parent(), .next(), .children(), .parents()
◦ ajouter ou retirer des classes CSS: addClass,
removeClass
◦ manipuler: append, wrap, prepend
Intérêt fondamental: la plupart des méthodes de
l'objet retournent l'objet lui-même
◦ on peut chaîner les appels !
◦ $('anything').parent().find('still anything').show();
◦ Cette propriété est extrêmement puissante !
12
jQuery example
d’utilisation 1
jQuery example
d’utilisation 2
jQuery example d’utilisation 3
Determiner si une checkbox est cochée
If ($(‘#total’).attr(‘checked’)) {
//Traitement si cochée
}
else {
//Traitement si non cochée
}
jQuery example d’utilisation 4
Intercepter le bouton submit d’un
formulaire :
$(document).ready(function() {
$(‘#ok’).submit(function() {
if ($(‘#login’).val() ==‘’) {
alert (‘Entrer un login’);
return false;
}
})
});
jQuery example d’utilisation 5
Effacer le contenu d’un champs de texte
lorsqu’il a le focus
<input name=“nom” type=“text”
id=“nom” value=“Entrez votre
nom”>
$(‘#nom’).focus(function() {
var field = $(this);
field.val(‘’);
});
jQuery example d’utilisation 6
Tester le clic sur n’importe quel bouton
radio :
$(‘:radio’).click(function() {
//do stuff
});
Donner le focus au premier élément d’un
formulaire:
$(‘nom’).focus;
jQuery example
d’utilisation 7
Ajax
JQuery possède toute une panoplie de
fonctions permettant de simplifier les
requêtes Ajax
La plus simple :
$('#maDiv').load('page.html');
Plus complexe :
$.get('test.html',
function(data) {faire quelque chose);
Générale : $.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },
success: function(xml){faire quelque chose}
});
20
jQuery AJAX Fonctions
$.ajax, $.ajaxSetup
$.func(url[,params]
[,callback]) ◦ async
◦ $.get ◦ beforeSend
◦ $.getJSON ◦ complete
◦ $.getIfModified ◦ contentType
◦ $.getScript ◦ data
◦ $.post ◦ dataType
◦ error
◦ global
$(selector), inject HTML ◦ ifModified
◦ load
◦ processData
◦ loadIfModified
◦ success
◦ timeout
$(selector), ajaxSetup alts ◦ type
◦ ajaxComplete ◦ url
◦ ajaxError
◦ ajaxSend
◦ ajaxStart
◦ ajaxStop
◦ ajaxSuccess
Inconvénients d’AJAX / XML
XML est délicat à 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); }});
22
Inconvénients d’AJAX /
Sécurité
pour des raisons de sécurité, les
navigateurs interdisent de faire du
« cross-domain » avec
XMLHttpRequest dont le résultat
serait du XML (et donc du HTML)
….mais pas pour des scripts
Javascript !
D’où l’idée de définir un modèle de
données sous la forme d’objet
Javascript
◦ JSON
23
JSON (JavaScript Object
Notation)
format de données textuel, générique, dérivé de
la notation des objets de JavaScript
permet de représenter de l'information structurée.
décrit par la RFC 4627 de l’IETF.
Exemple :
{ "Image": {
"Width": 800,
"Height": 600,
"Title": "Vue du 15ème étage",
"Thumbnail": {
"Url":
"http://www.example.com/481989943",
"Height": 125,
"Width": "100" },
"IDs": [116, 943, 234, 38793]
} }
24
Les avantages de JSON
Type de données générique et abstrait pouvant
◦ être représenté dans n'importe quel langage de
programmation
◦ représenter n'importe quelle donnée concrète.
simple à mettre œuvre tout en étant complet.
peu verbeux, lisible aussi bien par un humain que
par une machine
facile à apprendre, syntaxe réduite
types de données sont connus et simples à décrire
indépendant 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)
◦ Standard dans les web services .Net, Java EE, etc.
25
Les avantages de JSON
Vis-à-visde JavaScript, un document
JSON représente un objet, d'où son
nom. Il est donc plus facile à
interpréter 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 sérialisation et déserialisation d'objets ;
◦ l’encodage de documents ;
26
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.gne?
tags=besancon&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
</script>
</body></html>
27
jQuery UI
http://jqueryui.com/
Un ensemble de composants graphiques
téléchargeable à l'adresse
http://jqueryui.com/download.
◦ un noyau (Core)
◦ des « comportements » (interactions)
draggable : pour glisser-déplacer un élément
http://jqueryui.com/demos/draggable/
droppable : pour « déposer » un élément
http://jqueryui.com/demos/droppable/
resizable : pour redimensionner un élément
http://jqueryui.com/demos/resizable/
selectable : pour sélectionner des éléments à la souris
http://jqueryui.com/demos/selectable/
sortable : pour trier des éléments
http://jqueryui.com/demos/selectable/ 28
jQuery UI
◦ des « widgets »
« accordéon » http://jqueryui.com/demos/accordion/
« calendrier »
http://jqueryui.com/demos/datepicker/
boîte 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 thèmes
http://jqueryui.com/themeroller/
29
jQuery Plugins
On peut étendre facilement jQuery en utilisant des
« plugins »
Les méthodes ajoutées sont au même niveau que
les méthodes natives
Ils conservent les mêmes sémantiques que les
méthodes natives: retourner l'objet jQuery,
appliquer la méthode à tous les éléments
représentés
Des centaines plugins existent d'ores et déjà, de
qualité variable; certains mis en avant par l'équipe
de développement
http://plugins.jquery.com/
◦ des menus
http://apycom.com/
http://www.wizzud.com/jqDock/
◦ Galerie photo : VisualLightbox
http://visuallightbox.com
30
Conclusion
jQuery est un framework complet et facile à
utiliser
Bibliothèque légère à charger
Simplifier et unifie la syntaxe d’accès au
DOM
Permet de faire des requètes AJAX
simplement
UI et nombreux plugins complémentaires
D’autresframeworks sont disponibles et ne
sont pas à oublier : il est possible de
combiner les frameworks
◦ Dojo recommandé pour application riche en
widgets et nécessitant une forte cohérence
(widgets MVC notamment)
31
