JQuery

jjQQuueerryy
Par : Abdelhakim Bachar
DAVEO

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.

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…

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)

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

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>

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 »

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

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://…/jquery.min.js”></script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#" onClick="$('#monDiv').hide();”>disparition</a>
</body>
</html>

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 !

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

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;”>
Third item
</li>
</ul>
<ul>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ul>
<ul>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ul>

$(“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>
</div>
<div>
Some text
</span>
</div>
<span>
More text
</span>
Goodbye cruel world.
</span>
</div>
<div>
Some text
</span>
</div>
<span>
More text
</span>
Goodbye cruel world.
</span>
</div>
<div>
Some text
</span>
</div>
<div style=“display:block”>
<span>
More text
</span>
Changed
</span>
</div>
<div>
Some text
</span>
</div>
<span>
More text
</span>
Changed
</span>
</div>
<div>
Some text
</span>
</div>
<span>
More text
</span>
Changed
</span>
</div>

 Determiner si une checkbox est cochée
if ($(‘#total’).attr(‘checked’)) {
//Traitement si cochée
} else {
//Traitement si non cochée
}

 Intercepter le bouton submit d’un formulaire :
$(document).ready(function() {
$(‘#ok’).submit(function() {
if ($(‘#login’).val() ==‘’) {
alert (‘Entrer un login’);
return false;
}
})
});

 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(‘’);
});

 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();

<div>
<span class=“all”>Select All</span>
<span class=“none”>Select None</span>
<input name=“chk1” type=“checkbox”/>
</div>
<div>
<span class=“all”>Select All</span>
<span class=“none”>Select None</span>
</div>
$(“span.none”).click(
function(){
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);
$(“span.all”).click(
function(){
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
}
);
$(“span”).click(
function(){
Ou
if($(this).text()==“Select All”))
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
else if ($(this).attr(“class”)==“none”)
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);

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

Tutorial ajax/jQuery très complet !
 Ici : http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-
development.html

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
 $.func(url[,params][,callback])
 $.get
 $.getJSON
 $.getIfModified
 $.getScript
 $.post
 $(selector), inject HTML
 load
 loadIfModified
 $(selector), ajaxSetup alts
 ajaxComplete
 ajaxError
 ajaxSend
 ajaxStart
 ajaxStop
 ajaxSuccess
 $.ajax, $.ajaxSetup
 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 +" - "+name+” : ”+price+"</li>”;
});
$("#cousesList").html(html);
}
});

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/

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]
}}

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.

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 ;

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>

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

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)

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

JQuery

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à JQuery

Similaire à JQuery (20)

JQuery