jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
2. 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 document Standard ECMA-262.
3. 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…
4. 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)
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
7. 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')
$ 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]'
10. Rappel sur le DOM
“Le Document Object Model (DOM) est une convention cross-platform et
independente du langage pour representier and interagir avec des objets
dans des documents en HTML, XHTML ou XML.
11. Exemple de manipulation du DOM
<html>
<script type="text/javascript" src="http://…/jquery.min.js”></script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#" onClick="$('#monDiv').hide();”>disparition</a>
</body>
</html>
12. 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 !
13. Nombreux exemples interactifs
Les selecteurs jQuery sont illustrés par de nombreux tutoriaux interactifs,
par exemple :
Ici : http://www.w3schools.com/jquery/jquery_examples.asp
Et là : http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery
14. jQuery example d’utilisation 1
$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});
<ul>
<li style=“background:red;”>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li style=“background:red;”>
<span>Changed</span>
Third item
</li>
</ul>
<ul>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ul>
<ul>
<li>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li>
<span>Changed</span>
Third item
</li>
</ul>
15. jQuery example d’utilisation 2
$(“div:hidden”).find(“.foo”).empty().text(“Changed”).end().show();
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:none”>
<span>
More text
</span>
<span class=“foo”>
</span>
</div>
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:none”>
<span>
More text
</span>
<span class=“foo”>
Goodbye cruel world.
</span>
</div>
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:none”>
<span>
More text
</span>
<span class=“foo”>
Goodbye cruel world.
</span>
</div>
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:block”>
<span>
More text
</span>
<span class=“foo”>
Changed
</span>
</div>
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:none”>
<span>
More text
</span>
<span class=“foo”>
Changed
</span>
</div>
<div>
<span class=“foo”>
Some text
</span>
</div>
<div style=“display:none”>
<span>
More text
</span>
<span class=“foo”>
Changed
</span>
</div>
16. 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
}
17. 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;
}
})
});
18. 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(‘’);
});
19. 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();
25. 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 +" - "+name+” : ”+price+"</li>”;
});
$("#cousesList").html(html);
}
});
26. 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
Voir : http://www.jsonpexamples.com/
27. 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]
}}
28. 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 oeuvre 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.
29. Les avantages de JSON
Vis-à-vis de 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 ;
30. 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://…/feeds/photos_public.gne? format=json”,
function(data) {
$.each(data.items, function(i,item) {
$("<img/>").attr("src",
item.media.m).appendTo("#images");
if ( i == 3 )
return false;
});
});
</script>
</body></html>
31. 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
32. 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’autres frameworks 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)