Transcript jquery

JQuery
Document original de François BONNEVILLE
[email protected], Laboratoire d'Informatique
de l’Université de Franche-Comté,
ajouts par Michel Buffa, [email protected], Université de Nice
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.
Cours applications web M1 Miage 2011
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)
Cours applications web M1 Miage 2011
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
Cours applications web M1 Miage 2011
5
JQuery
• Une bibliothèque javascript open-source et crossbrowser
• 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
Cours applications web M1 Miage 2011
6
John Resig
• John Resig est un développeur d’outils
JavaScript pour Mozilla Corporation et auteur
du livre Pro JavaScript Techniques. Il est
également le créateur et développeur principal
de la jQuery JavaScript library.
• Il vit à Boston, MA. Il a publié son second livre
: Secrets of the JavaScript Ninja, en 2009.
• Il a porté le langage processing en javascript
l’année dernière (http://processingjs.org/),
• Il a créé également jQuery Mobile
(http://jquerymobile.com/)
• Microsoft et Nokia incluent jQuery sur leurs
plateformes,[1] Microsoft dansVisual Studio[2]
pour l’utiliser avec les frameworks ASP.NET
AJAX et ASP.NET MVC Framework alors que
Nokia l’a intégré dans sa plateformeWeb RunTime.
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>
Cours applications web M1 Miage 2011
9
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 »
Cours applications web M1 Miage 2011
10
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')
Cours applications web M1 Miage 2011
11
$(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]'
Cours applications web M1 Miage 2011
12
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.
Exemple de manipulation du DOM
<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="$('#monDiv').hide();">
disparition</a>
</body>
</html>
Cours applications web M1 Miage 2011
14
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 !
Cours applications web M1 Miage 2011
15
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_jQuer
y
Cours applications web M1 Miage 2011
16
jQuery example d’utilisation 1
$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});
<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>
<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>
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”>
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: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”>
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:block”>
<span>
More text
</span>
<span class=“foo”>
Changed
</span>
</div>
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
$(“span.none”).click(
function(){
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);
$(“span.all”).click(
function(){
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
}
);
<div>
<span class=“all”>Select All</span>
<span class=“none”>Select None</span>
<input name=“chk1” type=“checkbox”/>
<input name=“chk2” type=“checkbox”/>
<input name=“chk3” type=“checkbox”/>
</div>
<div>
<span class=“all”>Select All</span>
or
<span class=“none”>Select None</span>
<input name=“chk4” type=“checkbox”/>
<input name=“chk5” type=“checkbox”/>
$(“span”).click(
function(){
if($(this).text()==“Select All”))
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
else if ($(this).attr(“class”)==“none”)
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);
<input name=“chk6” type=“checkbox”/>
</div>
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}
});
Cours applications web M1 Miage 2011
24
Tutorial ajax/jQuery très complet !
• Ici : http://viralpatel.net/blogs/2009/04/jquery-ajaxtutorial-example-ajax-jquery-development.html
Cours applications web M1 Miage 2011
25
jQuery AJAX Exemple
<html>
<head>
<title>AJAX Demo</title>
<script type=“text/javascript” src=“jquery.js”>
</script>
<script type=“text/javascript”>
var cnt = 0;
$(function(){
$.ajaxSettings({
error:function(){alert(“Communication error!”);}
});
$(“:button”).click(function(){
var input = {in:$(“:textbox”).val(),count:cnt};
$.getJSON(“ajax.php”,input,function(json){
cnt = json.cnt;
$(“.cnt”).text(cnt)
$(“.msg”).text(json.out);
});
});
});
</script>
</head>
<body>
<p>
Input:
<input type=“textbox”/>
<input type=“button” value=“Send”/>
Output #
<span class=“cnt”></span>:
<span class=“msg”></span>
</p>
</body>
</html>
<?php
$output = ‘’;
switch($_REQUEST[‘in’]) {
case ‘hello’:
$output = ‘Hello back.’;
break;
case ‘foo’:
$output = ‘Foo you, too.’;
break;
case ‘bar’:
$output = ‘Where Andy Capp can be found.’;
break;
case ‘foobar’:
$output = ‘This is German, right?’;
break;
default:
$output = ‘Unrecognized string.’;
}
$count = $_REQUEST[‘count’]+1;
echo json_encode(
array(
‘out’ => $output,
‘cnt’ => $count
)
);
exit;
?>
jQuery AJAX Fonctions
• $.ajax, $.ajaxSetup
• $.func(url[,params][,callback])





$.get
$.getJSON
$.getIfModified
$.getScript
$.post
• $(selector), inject HTML
 load
 loadIfModified
• $(selector), ajaxSetup alts






ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess














async
beforeSend
complete
contentType
data
dataType
error
global
ifModified
processData
success
timeout
type
url
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); }});
Cours applications web M1 Miage 2011
28
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/
Cours applications web M1 Miage 2011
29
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]
} }
Cours applications web M1 Miage 2011
30
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.
Cours applications web M1 Miage 2011
31
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 ;
Cours applications web M1 Miage 2011
32
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?tag
s=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>
Cours applications web M1 Miage 2011
33
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/
Cours applications web M1 Miage 2011
34
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/
Cours applications web M1 Miage 2011
35
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
Cours applications web M1 Miage 2011
36
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)
Cours applications web M1 Miage 2011
37
jQuery ressources intéressantes
• Site officiel
 http://www.jquery.com
• Learning Center




http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/
http://www.roseindia.net/ajax/jquery/
• Support
 http://docs.jquery.com/Discussion
 http://www.nabble.com/JQuery-f15494.html mailing list archive
 irc.freenode.net irc room: #jquery
• Documentation
 http://docs.jquery.com/Main_Page
 http://www.visualjquery.com
 http://jquery.bassistance.de/api-browser/
• jQuery Success Stories
 http://docs.jquery.com/Sites_Using_jQuery