jQuery

Votre formateur
var formateur = {
prenom : "Franck",
nom : "SIMON",
formation : "ingénieur",
competences : ["Java","Java EE","C - C++", "web",
"Javascript","PHP","MySql","etc."],
emploi : "consultant independant",
email : "franck.simon@antislashn.org",
web : "www.franck-simon.com"
};

http://www.linkedin.com/pub/franck-simon/49/584/b73
http://www.viadeo.com/fr/profile/franck.simon16
https://plus.google.com/u/0/103522587535315941799/posts
@antislashn

antislashn.org JQuery 2 / 128

jQuery
● Objectifs de la formation
● revoir les principes du Web 2.0
– JSON, Ajax
● savoir utiliser les outils de debug des navigateurs
● revoir les principes d'utilisation de JavaScript en
programmation objet
● revoir les principes de chargement du DOM
● savoir utiliser jQuery


Web 2.0
● Évolution conceptuelle du Web
● expression inventée par Dal Dougherty, et reprise par
Tim O'Reilly
– terme largement accepté maintenant
● ensemble de techniques, fonctionnalités
● objectifs
– utilisation plus naturelle du Web
– meilleurs expérience utilisateur
● fluidité de la navigation, attente minime, ...
– web social


Web 2.0
● Application Web "traditionnelle"

URL : 1ére requête
génération
envoi page complète page
affichage
page requête + données
génération
affichage
génération
affichage envoi page complète page
page


Web 2.0
● Application Web 2,0

URL : 1ére requête
génération
affichage
génération
envoi données données
injection
données requête + données
génération
injection envoi donnée données
données


Web 2.0
● Le Web 2.0 est donc un mode de développement
des sites web
● une page est envoyée à la première connexion
– avec fichiers CSS et JavaScript
● chaque action de l'utilisateur sur la page provoque des
demande de au serveur
– le serveur ne renvoie que des données
● pas de page complète à envoyer
● nécessite une fonctionnalité spécifique qui permet au
navigateur de faire ds requêtes au serveur via
JavaScript
– l'objet XMLHttpRequest

Deboguer JavaScript
● Tous les navigateurs actuels fournissent nativement
ou par plugin des outils de debug
● suivi des requêtes, avec temps de réponse
● console de log JavaScript
– avec
● affichage du DOM, des CSS, etc.
● Ces outils ne sont pas activés par défaut
● il faut d'abord charger l'éventuel plugin
● puis activer l'outil de debug


Deboguer JavaScript
● Deboguer avec IE
● IE est livré avec des outils de debug
● activation par le menu Outils de développement
– touche F12


Deboguer JavaScript
● Console IE


Deboguer JavaScript
● Deboguer avec Firefox
● ajouter le plugin Firebug
– menu Modules complémentaires


Deboguer JavaScript
● Deboguer avec Firefox
● installer FireBug
● puis dans le menu Développement Web, activer les
outils


Deboguer JavaScript
● Console de FireBug
● bien noter qu'il existe la console par défaut et la console
de FireBug


Deboguer JavaScript
● Deboguer avec Google Chrome
● ajouter via Chrome Web Store le plugin FireBug Lite
● activer le mode développeur dans le extensions
– menu Outils … Options


Deboguer JavaScript
● Deboguer avec Google Chrome
● activer le mode développeur
– menu Outils … Outils de développement


Deboguer JavaScript
● Console de Google Chrome


Deboguer JavaScript
● Si la console est supportée par le navigateur
● vous pouvez utiliser l'objet console
console.log("Hello");
console.error("ERREUR");
● si la console n'existe pas, vous pouvez l'émuler par un
affichage dans des balises div sur votre page
if(!console)
{
console = {};
console.log = function(message){
document.getElementById("__console_log__").innerHtml += message;
}
console.error = function(message){
document.getElementById("__console_error__").innerHtml += message;
}
}


JSon
● JSon : JavaScript Object Notation
● format d'échange humainement compréhensible
● RFC 4627
● souvent utilisé pour la sérialisation et la transmission
d'objets
● la fonction eval() de JavaScript permet ensuite
d'évaluer la chaîne de caractères JSon
json_1.html
var r = eval("2+2");
console.log(r);
var json = '{civilite:"M",...,adresse:{rue:"Rue de Bruxelles",...}}';
var obj = eval("("+json+")");
console.log(obj.adresse.ville);


JSon
● Syntaxe de base
● cf le site de référence http://www.json.org/


POO et JavaScript
● JavaScript offre un support limité des concepts
objets
● la classe en tant que telle n'existe pas
– le mot clé class est réservé mais n'est pas utilisé
● la programmation est orienté prototype
– le prototype est un objet permettant la création d'autres objets
par clonage
● la POO en JavaScript se base sur les mécanismes de
– prototype
– function
– concept de closure (fermeture)


POO et JavaScript
● Tout est objet en JavaScript
● sauf null et undefined
● JavaScript utilise deux types d'objets
● les objets natifs (Native Object)
● les objets du conteneur d'exécution (Host Object)
● Les objets natifs utilisent des collections
dynamiques de propriétés
● contient un référence vers un autre objet, null ou
undefined
● la fonction delete permet de supprimer un propriété

POO et JavaScript
● Création d'une classe
● les classe sont définie via des fonctions
function foo(){
var message = "Hello";
this.getMessage = function(){
return message;}
alert(message);
}

● le mot clé new permet de créer une instance
var f = new foo();
alert(f.getMessage());


POO et JavaScript
● Dans l'exemple de la page précédente
● foo est une fonction, foo peut-être vu comme une
classe
● l'instanciation par new va :
– exécuter la fonction
– créer un espace de stockage pour les variables locales
stockées dans la fonction
● la variable message est "privée" à la classe
● la méthode getMessage est ajoutée à l'instance
– this référencie l'objet lui-même
● alert() est exécuté


POO est JavaScript
● Contexte d'exécution des fonctions
● le mot-clé this dans un contexte non objet fait
référence à window
– si la fonction foo est exécutée en tant que fonction,
getMessage est ajouté à window
● this fait référence à window
foo();
alert(window.getMessage());
– si une instance de foo est créée, this fait référence à l'objet
créé
● getMessage devient une méthode de foo
var f = new foo();
alert(f.getMessage());


POO et JavaScript
● Le type natif Object est une collection de
propriétés
● Les propriétés sont crées dynamiquement lors de
l'assignation d'une valeur
● la propriété est mise à jour si elle existe
var o = new Object();
o.couleur = "vert";
console.log(o.couleur);
console.log(o['couleur']);


POO et JavaScript
● Par défaut Object ne possède que la propriété
prototype
● prototype est de type Object
● une fonction est aussi de type Object
● La programmation par prototype ne fait pas la
distinction entre une propriété de type donnée ou
code
● la structure de l'objet peut changer dynamiquement


POO et JavaScript
● Évaluation d'une propriété par l'interpréteur :
● l'interpréteur vérifie si la propriété existe au sein de
l'objet
● si la propriété n'existe pas l'interpréteur la recherche
auprès du prototype
– le prototype étant un objet il possède lui-même un prototype
– l'interpréteur interroge la chaîne des prototypes jusqu'à ce qu'il
trouve la propriété ou que le chaînage des prototypes soit fini


POO et JavaScript
prototype.html
function Toto(val){
this.valeur = val;
}

function Titi(message){
this.message = message;
}

Titi.prototype = new Toto(15);

var o = new Titi("Hello");
console.log(o.valeur);
console.log(o.message);


POO et JavaScript
● Il est courant d'utiliser un objet littéral pour créer un
espace de nommage
● évite les collisions de nommage
● n'est pas une spécification
● n'est pas un package
namespace.html
var antislashn = {};
antislashn.Personne = function(n){
var nom = n;
this.getNom = function(){return nom};
}

var p1 = new antislashn.Personne("Titi");
var p2 = new antislashn.Personne("Toto");
console.log(p1.getNom());
console.log(p2.getNom());


POO et JavaScript
● Une closure (fermeture) est formée par le retour
d'un objet de type function
● cet objet ayant été créé dans le contexte d'exécution
lors de l'appel de la fonction externe
– on peut donc le voir comme une fonction interne à une fonction

function foo(nb){
function add(val){
return nb+val;
}
return add;
}

var f = foo(10);
console.log(f(5));


DOM
● Document Object Model
● représentation objet sous forme d'arbre
● Recommandation du W3C
● décrit une interface (API) indépendante de tout langage
permettant de parcourir et mettre à jour la structure du
document
● DOM navigateur
● historiquement permet de manipuler les éléments
"importants" d'une page HTML
– formulaires, images, etc
– mais pas les div, h, ...

DOM
● Le DOM de niveau 2 permet de parcourir tout les
éléments du document HTML
● entre autre par getElementById sur l'objet document
● l'objet document possède aussi
– createElement, createTextNode, createAttribute, …
● méthodes pour manipuler un nœud
– appendChild, insertBefore, replaceChild,
cloneNode, …
● méthodes pour naviguer dans le DOM
– parentNode, childNodes, firstChild, lastChild, ...


DOM
● Attention au différences entre navigateurs
● certains navigateurs ajoutent des nœuds de type texte
● Un nœud est de type Element, et possède les
propriétés
– nodeType : type de nœud (entier)
– nodeName : nom du nœud
– nodeValue : valeur du nœud (ou null)
– attributes : tableau des attributs (ou null)
● JQuery facilitera le recherche dans le DOM


Gestion des événements
● Un événement est un changement d'état de
l'environnement qui peut-être intercepté par
JavaScript
● clic sur un élément, clavier, souris, survol, …
● Un objet Event est créé par le navigateur
● objet global sous IE, ou passé à la fonction de gestion
de l'événement dans les autres navigateur
● les propriétés de l'objet Event décrivent l'événement
– source, cible, etc,


● Principales propriétés de l'objet Event
● target : cible de l'événement
– srcElement sous IE
● type : type d'événement
– focus, load, click, …
● stopPropagation : stoppe la remontée de l'événement
– cancelBubble sous IE
● preventDefault : annule les actions implicites sur les
événements
– submit par exemple
● currentTarget : nœud sur lequel se trouve l'événement
lors de sa capture

● La gestion des événements est différente selon les
navigateurs
● Un bonne pratique est de mettre la gestion des
événements hors du code HTML
● ne pas employer l'attribut onClick par exemple
● le code est alors très différents entre IE et Mozilla
● JQuery permet de standardiser le code de gestion
des événements


XMLHttpRequest
● Permet d'envoyer une requête HTTP vers le
serveur et d'en contrôler la réception
● la récupération d'une instance de XHR diffère selon les
navigateurs
– avec IE 6 et moins :
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

– avec IE 7 + et les autres navigateurs
var xhr = new XMLHttpRequest();

● l'utilisation de l'objet est ensuite homogène


XMLHttpRequest
● Les étapes d'utilisation de XHR
● récupérer une instance de XMLHttpRequest
● brancher une fonction de surveillance de la réponse sur
l'événement onreadystatechange
● ouvrir la connexion vers la ressource
– méthode open(...)
● envoyer la requête
– méthode send(...)
● surveiller l'état de la réponse dans la fonction callback
● traiter la réponse lorsque celle-ci est valide
– propriété responseText ou responseXML


XMLHttpRequest
● Exemple de code (extrait)
Complétion/index.jsp
function recupererXMLHttpRequest()
{ Fonction retournant un objet
if (window.XMLHttpRequest) { XHR, ou null s'il n'existe pas
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
variable définie pour la page,
contenant une instance XHR
function executeRequete(url,fonction) {
if (xhr) { fonction callback
xhr.onreadystatechange = fonction;
xhr.open("GET", url, true);
xhr.send(null);
} ouverture de la ressource en
mode asynchrone
}


XMLHttpRequest
● Exemple de code (extrait)
● fonction callback
Complétion/index,jsp
function majListeVille() vaut 4
{
var rep = ""; on vérifie la validité de la
if (xhr.readyState==READY_STATE_COMPLETE réponse
&& xhr.status == 200){
réponse du serveur
rep = xhr.responseText;
document.getElementById('liste_villes').innerHTML =
"<select onclick='majChamps(this)'>"+rep+"</select>";
}
}


CSS – modèle en boite
● Chaque élément HTML est représenté par une boite
● les valeurs de hauteur (height) et largeur (width) sont
celles du contenu (content)


jQuery – introduction
● JQuery est un framework open source
● écrit en JavaScript
● utilisé côté client
● Développé à l'origine par John RESIG
● première version en 2006
● Projet soutenu par une communauté nombreuse
● Utilisé par de nombreux grands groupes
● IBM, Google,


jQuery - introduction
● jQuery est un ensemble de fonctionnalités
JavaScript permettant de manipuler le DOM d'une
page HTML
● site de référence : jquery.com
● la bibliothèque est disponible sous la forme d'un simple
fichier .js
– compressé ou non
– peut aussi être remplacée par un lien vers Google
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>


● Principales fonctionnalités
● parcours et modification du DOM
● gestion des événements
● effets et animations
● manipulation de CSS
● usage facilité d'AJAX
● ajout de fonctionnalités par plugins
● divers utilitaires


● La documentation jQuery est très explicite, avec de
nombreux exemples
● http://jquery.com/
● quelques exemples de base sont disponibles à l'adresse
http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery


jQuery – the big picture


jQuery - bases
● jQuery repose sur une seule fonction
● jQuery() ou plus simplement $()
– admet des paramètres qui peuvent être
● une fonction qui sera exécutée lorsque le DOM sera chargé
● une chaîne de caractères appelée "query" qui permettra de sélectionner des
nœuds du DOM
– retourne un résultat : objet jQuery
● ce qui permet de chaîner les appels de méthode
● Un query peut correspondre à
● un sélecteur CSS
● un sélecteur XPath
● un sélecteur jQuery


jQuery - bases
● Classiquement les développement JavaScript font
appels à window.onload = function(){...} ;
● l'événement sera déclenché lorsque toute la page aura
été chargée
– html, images, css, …
● L'utilisation de jQuery permet de lancer la fonction
dès que le DOM est prêt
$(document).ready(function(){
console.log("boujour document");
});


jQuery – les bases
● Le sélecteur $(this) correspond à l'objet en cours
de manipulation
● Un grand nombre de méthodes de jQuery accepte
une fonction comme paramètre
● souvent ces fonctions reçoivent des paramètres
positionnés par jQuery
– comme each() ou addClass()
● il est possible d'utiliser $(this) dans ces fonctions
pour travailler sur l'élément courant


jQuery - bases
● Une bonne pratique de codage JavaScript se doit
de séparer la partie HTML de la partie JavaScript
● par de JavaScript dans les balises au niveau des
attributs d'événements
● Utiliser jQuery avec $(document).ready()
permet de simplifier le suivi de cette bonne pratique
● peut être simplifié en
$(function(){
console.log("bonjour jQuery");
});

– mais moins parlant

jQuery - bases
● Exemple de base jQuery 01 – Base/exemple_01.html
<html>
<head>
<title>Formation jQuery</title>
<style type="text/css">
#box{
color: red;
font-size: xx-large;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> exécuté lorsque le DOM sera
$(document).ready(function(){ chargé
$("#box").click(function(){
console.log($("#box").text());
}); défini la fonction qui sera invoquée
}); lorsque l'utilisateur cliquera sur
</script> l'élément
</head>
<body> sélectionne l'élément dont
<div id="box">Bonjour</div> l'id est box (sélection CSS)
</body>
</html>


jQuery – les sélecteurs de base
● Fonctionnalité la plus importante de jQuery
● Notation très concise
● cf. http://www.codylindley.com/jqueryselectors/
● Les sélecteurs de base correspondent aux
fonctions getElementById et
getElementsByTagName
● $("#box") sélectionne l'élément selon sont id
● $("div") sélectionne tous les éléments de type <div>


● Sélection par la classe $(".menu")

● sélectionne tous les éléments de classe CSS menu
● Les sélections peuvent être cumulées au sein d'un
même appel à la fonction jQuery
$("box, div, .menu")

● sélectionnera
– l'élément identifié par box
– toutes les balises <div>
– tous les éléments de classe CSS menu


● Sélection hiérarchique
● comme avec CSS (http://reference.sitepoint.com/css/generalsiblingselector)
● $("#box p")sélectionne tous les descendants <p> de
l'élément identifié par box
● sélectionne tous les <p> immédiats
$("#box > p")

contenus dans l'élément identifié par box
● $("#box ~ p") sélectionne tous les <p> frères de l'élément
identifié par box
● $("#box ~ p")sélectionne le <p> frère immédiat de
l'élément identifié par box


jQuery – sélection par filtres
● $("li:first") sélectionne le premier élément de la
liste <li>
● $("li:last") sélectionne le dernier élément de la
liste <li>
● $("li:even") sélectionne les éléments pairs de la
liste <li> - index commence à 0
● $("li:odd") sélectionne les éléments impairs de la
● $("li:eq(3)")sélectionne le troisième élément de la

jQuery – sélection par filtres
● $("li:gt(2)")sélectionne les éléments suivant l'index
2 de la liste <li> - donc à partir du 4ème éléments
● $("li:lt(2)")sélectionne éléments dont l'indice est
inférieur à 2 de la liste <li> - donc les 2er éléments
● $(":header") sélectionne toutes les balises <h>
● sélectionne tous les éléments de
$("li:not(li:eq(1))")

la liste <li>, sauf celui d'indice 1
● on peut cumuler les exclusions $("li:not(:first,:last)")


jQuery – sélection par filtres enfants
● sélectionne les premiers éléments
$("ul:first-child")

fils <li> de tous les <ul>
● sélectionne les derniers éléments
$("ul:last-child")

fils <li> des <ul>
●
sélectionne tous les 2ème éléments
$("li:nth-child(2)")

fils – ne commence pas à 0
● la valeur peut être remplacée par odd ou even
● sélectionne tous les éléments qui
$("p:only-child")

sont enfants uniques de leur parent <p>


jQuery – sélection par filtre de contenu
● sélectionne les <div> qui
$("div:contains('toto')")

contiennent le texte 'toto'
● $("div:empty") sélectionne les <div> qui n'ont pas
de de contenu (pas d'enfants ni de texte)
● $("div:parent") sélectionne les <div> qui sont
parents (qui ont des enfants et/ou du texte)
$("div:has(p)")
● sélectionne les <div> qui
possèdent au moins un enfant <p>


jQuery – sélection par filtre de visibilité
● $("div:visible") sélectionne les <div> qui sont
visibles
● $("div:hidden") sélectionne les <div> qui sont
cachés


jQuery – sélection par filtre d'attribut
● L'attribut est manipulé par [attr]
● jusqu'à la version 1.3, il l'était par [@attr]
● $("div[id]") sélectionne les <div> possédant un id
● Il est possible de sélectionner les attributs ayant (ou
non) une certaine valeur
● $("div[name='adresse']") sélectionne les <div> dont l'attribut
name vaut 'adresse'
● de manière générale la forme est [attr OP valeur]
– les opérateurs OP sont détaillées page suivante


jQuery – sélection par filtre d'attribut
● Opérateurs
● = : égalité
● != : différent
● ^= : commence par
● $= : finit par
● *= : contient
● On peut filtrer sur plusieurs attributs
● retrouve les <input> ayant
$("input[id][name='adresse']")
un id et dont le name vaut 'adresse'


jQuery – méthodes utilitaires
●
$.each(collection,callback(index,value)) :
applique une fonction sur chaque élément de la
sélection
●
data(key,value) : associe une paire clé/valeur à
un élément sélectionné
●
data(key) : lit une valeur par sa clé sur l'élément
sélectionné
● cf. http://api.jquery.com/category/utilities/


jQuery – gestion des attributs
● attr() possède plusieurs signatures permettant
● de connaître la valeur d'un attribut $(this).attr('name')

● de changer la valeur d'un attribut $(this).attr('name','toto')

● de changer la valeur de plusieurs attributs
– la collection est alors passée sous la forme d'un objet JSon
● de changer l'attribut à l'aide d'une fonction
– les paramètres reçus sont l'indice de l'élément et la valeur de
l'attribut


● Exemple d'utilisation de attr()
jQuery 02 – CSS/attr.html
function attrLecture(){
alert($("#b1").attr('type'));
}

function attrEcriture(){
$("li:first").attr('value','premier');
}

function attrMap(){
$("li:eq(1)").attr({value:'deuxième',id:'li2'});
}

function attrFonction(){
$("li").attr('value',function(index, value){
if(index>1)
return "item "+index;
});
}

● removeAttr() supprime un attribut
● val() retourne la valeur (attribut value) d'un élément
– permet aussi de changer la valeur, deux signatures
● paramètre correspondant à la nouvelle valeur
● fonction retournant une valeur et prenant en paramètre l'indice de
l'élément dans une collection et sa valeur
● Les attributs de classe CSS seront vus plus loins
● Attention : jQuery évolue, en fonction des versions,
attr() peut renvoyer une String ou un Boolean
● sur une propriété checked d'un checkbox par exemple
– cf. http://api.jquery.com/prop/


jQuery – contenu d'un élément
● La méthode text() permet de lire et modifier le contenu
d'un élément sous forme textuelle
● text() : lit le contenu texte d'un élément et de ces
descendants
● text(textString) : met à jour le contenu d'un élément
● text(function(index,text)) : met à jour le contenu
d'un élément par une fonction recevant l'indice de l'élément
dans la collection et sa valeur actuelle
● si des balises sont incluses dans les mises à jour, les
marques de balisage < et > seront transformés en entité
< et >


jQuery – contenu d'un élément
● La méthode html() permet de lire et modifier le contenu
HTML d'un élément
● html() : lit le contenu texte d'un élément et de ces
descendants
● html(htmlString) : met à jour le contenu d'un élément
● html(function(index,html)) : met à jour le contenu
d'un élément par une fonction recevant l'indice de l'élément
dans la collection et sa valeur actuelle
● cette méthode utilise la propriété innerHTML des
navigateurs


JQuery – gestion des CSS
● Différentes méthodes permettent de gérer les
feuilles de style
● addClass : ajout d'une ou plusieurs classes
– si plusieurs classes sont ajoutée, elles sont séparées par un
espace
– une fonction peut être utilisée pour retourner une ou plusieurs
classes, cette fonction reçoit l'indice de l'élément et le nom des
classes de cet élément
● removeClass : suppression d'une ou plusieurs
classes
– mêmes paramètres possibles que addClass


jQuery – gestion des CSS
● Exemple addClass et removeClass
jQuery 02 – CSS/addRemoveClass.html
$("li").mouseover(function(){
$(this).addClass("surligne");
});
$("li").mouseout(function(){
$(this).removeClass("surligne");
});
});


● hasClass : vérifie la présence d'une classe CSS
– renvoie true ou false
● toggleClass : ajoute ou supprime une classe
– ajoute la classe si elle n'est pas présente
– supprime la classe si elle est présent
– si plusieurs classes sont spécifiées, elles sont séparées par
des virgules
● plusieurs signatures existent


● Un grand nombre de méthodes permettent de
retrouver (et changer) les positions et dimensions
d'un élément
● la signature sans paramètre retourne un nombre sous
forme de String
● la signature avec paramètre change la valeur
● la méthode css() permet de retrouver la valeur
d'un attribut de style en gardant l'indication d'unité
● $(this).css('width') pourrait renvoyer 100px
● $(this).width() pourrait renvoyer 100


● La méthode css()
● $(this).css('color') permet de récupérer la valeur d'une
propriété de style
● permet de mettre à jour les styles au moyen d'un
paramètre JSon $(this).css({color :'red', border:'solid 1px'})

– ou une seule propriété $(this).css('color','blue')

● permet au aussi de mettre à jour les styles au moyen
d'une fonction qui reçoit en paramètre l'indice de
l'élément dans la collection et la valeur du style
– css(propertyName,function(index,value))


● Dimensionnement avec jQuery
● height(), width() : hauteur et largeur
– interrogation ou mise à jour
– signature avec fonction de calcul recevant l'indice dans la
sélection et la valeur actuelle
● innerHeight(), innerWidth() : dimension interne
– padding inclus et bordure exclue
● outerHeight(), outerWidt() : dimension externe
– un booléen est passé à la méthode pour préciser s'il faut
inclure le margin ou non
● false (margin non inclus) par défaut


● Positionnement avec jQuery
● position() : retourne sous forme d'objet {top,left} la
position par rapport à l'élément parent
● offset() : retourne sous forme d'objet {top,left} la
position relative au document
● scrollTop(), scrollLeft() : modifie le décalage
entre un bord du document et l'élément sélectionné


jQuery – les événements
● Les gestionnaires d'événements de jQuery sont similaires
aux événements DHTML
● syntaxe simplifiée
– onclick devient click, onmouseover devient mouseover, ...
● par les sélecteurs il est aisé de mettre le même gestionnaire
d'événement sur tout un ensemble d'éléments
● facilité de mettre en place du code non intrusif
– les différences entre navigateurs sont gommées
● possibilité de passer des données aux événements
– format JSon


● Les événements possèdent deux signatures
● eventName(handler(eventObject))
● eventName([eventData],handler(eventObject))
– eventName : nom de l'événement
● click, submit, …
– handler : fonction qui sera invoquée lors du déclenchement
de l'événement
● doit renvoyer false pour arrêter la remontée de l'événement
– eventObject : objet de type jQuery.Event qui est
automatiquement passé au gestionnaire d'événement
● eventData : données sous forme JSon qui peut être
passé au gestionnaire d'événements

● L'objet jQuery Event
● normalise les différentes implémentation des objets
événement des navigateurs
● propriétés normalisée
– target, relatedTarget, pageX, pageY, wich, metaKey
● d'autres propriétés sont copiées, qui peuvent être
undefined selon l'événement
– altKey, bubbles, button, cancelable, charCode,
clientX, clientY, screenX, …
● documentation :
http://api.jquery.com/category/events/event-object/


● Événements du navigateur
● error() : événement invoqué en cas d'erreur
JavaScript
● resize() : événement invoqué lors du
redimensionnement de la fenêtre du navigateur
● scroll() : événement invoqué lors de l'utilisation des
barres de scolling


● Chargement du document
● load() : invoqué lorsqu'un élément et ses fils ont été
complètements chargés
– concerne les éléments associés à une URL : image, script,
frame, iframe, window
● ready() : invoqué lorsque le DOM est construit
– incompatible avec <body onload="...">
– syntaxes équivalentes :
● $(document).ready(handler)
● $().ready(handler)
● $(handler)
● unload() : invoqué lorsque l'utilisateur quitte la page

● Les événements du formulaire
● blur() : invoqué lors de la perte de focus
● change() : invoqué lors du changement d'un élément
de formulaire
– changement entre la prise et perte de focus
● focus() : invoqué lors de la prise de focus
● select() : invoqué lors de la sélection d'un texte dans
un <input type='text'> ou un <textarea>
● submit() : invoqué lors de la soumission d'un
formulaire


● Les événements clavier
● focusin() : invoqué si un élément ou un de ses fils
gagne le focus
● focusout() : invoqué si un élément ou un de ses fils
pert le focus
● keydown() : invoqué lors de l'appui d'une touche du
clavier
● keypressed() : invoqué lors de l'appui d'une touche
du clavier, avec gestion de la répétition
● keyup() : invoqué lors du relâchement d'une touche du
clavier

● Les événements souris
● clic de souris : click(), dblclick()
– ces deux événements ne doivent pas être utilisés ensemble
sur le même élément
● mouvements de la souris : mousedown(), mouseup(),
mousemove(), mouseover()
– certains événement IE sont émulés : mouseenter(),
mouseleave()
● hover() permet de positionner un handler pour l'entrée
et la sortie d'un élément
● toggle() gère les cycles de sélection et dé-selection
d'un élément par le clic souris

● bind() permet de lier un (ou plusieurs)
événement, des données et un gestionnaire
d'événement à une sélection d'élément
● les éléments du DOM doivent exister lors de la liaison
– voir delegate(), ou live() pour attacher des pour des
éléments qui ne sont pas encore créer
– cf. on() depuis la version 1.7
● d'autres méthodes jQuery existe pour lier des
événements, ou supprimer des événements
● faire attention aux versions de jQuery
● http://api.jquery.com/category/events/event-handler-attachment/
–

jQuery – les formulaires
● jQuery n'ajoute rien de nouveau dans la gestion des
formulaires
● Un ensemble de sélecteurs de formulaire permet de
sélectionner rapidement un ensemble d'éléments
d'un formulaire
● :input, :text, :password, :radio, ...
● Filtres de sélection
● :checked, :selected


jQuery – les effets
● jQuery offre la possibilité d'automatiser certains effets et
animations
● à utiliser à bon escient et avec modération
● La plupart des fonctions sur les effets utilise des paramètres
optionnels
● speed: 'slow', 'normal' ou 'fast' – ou un nombre en millisecondes
● easing : effet prédéfini personnalisé par plugin
● function : une fonction callback qui sera invoquée à la fin de
l'effet
● L'ensemble des effets peut être désactivé par l'instruction
jQuery.fx.off = true


● Effets de base
● hide() : cache la sélection
● show() : affiche la sélection
● Glissements
● slideDown() : fait apparaître, par glissement vers le
bas, un élément
● slideUp() : fait disparaître, par glissement vers le
haut, un élément


● Effets de fondu
● fadeIn() : fait apparaître un élément avec effet de
fondu
● fadeOut() : fait disparaitre un élément avec effet de
fondu
● fadeTo() : modifie l'opacité de l'élément sélectionné
● Différer un effet
● la méthode delay() permet de différer un effet
$("div.effet").slideUp(300).delay(2000).fadeIn(600);


● Passer d'un effet à l'autre
● toggle() : bascule un élément d'invisible à visible, et
inversement
● toggle(function1,fucntion2) : bascule d'une
fonction à l'autre à chaque clic sur l'élément
● slideToggle() : bascule de slideUp vers
slideDown et inversement
● fadeToggle() : bascule de visible à invisible par effet
de fondu, et inversement


● animate() permet de créer une animation
● un paramètre obligatoire sous forme d'objet JSon fournit
les styles à animer
● en plus des paramètres optionnels de vitesse, easing et
fonction callback

animate({fontSize:"24px", left:300, width: "200px", opacity: 0.5},1000 )


jQuery – parcourir le DOM
● Le parcours du DOM est conforme à ce qui est
habituellement utilisée avec l'API DOM 3
● traversée en Java, JavaScript ou XPath
● On retrouve donc l'ensemble des fonctionnalités
usuelles
● retrouver les enfants, parents, …
● mais avec un vocabulaire qui n'est pas le même que
l'API du W3C


● L'ensemble des méthodes jQuery de parcours du
DOM renvoie un objet jQuery, ce qui permet de
chaîner les appels
● La documentation complète est accessible sur le
lien : http://api.jquery.com/category/traversing/tree-traversal/
● Les pages suivantes résument les méthodes de
parcours du DOM


● children() : renvoie une collection d'éléments
enfants immédiats de chaque élément sélectionné
● parent() : renvoie le parent immédiat de chaque
élément sélectionné
● parents() : renvoie une collection d'éléments
ancêtres de chaque élément sélectionné
● parentUntil() : renvoie une collection
d'éléments ancêtres de chaque élément
sélectionné, jusqu'à un élément (ou sélecteur)
passé à la fonction
●

● siblings() : renvoie les frères de chaque
élément de la sélection
● prev() : renvoie le frère immédiatement précédent
de chaque élément de la sélection
● prevAll() : renvoie les frères précédents de
chaque élément de la sélection
● prevUntil() : renvoie les frères précédents de
chaque élément de la sélection, jusqu'à un élément
désigné par le sélecteur


● next() : renvoie le frère immédiatement suivant de
● nextAll() : renvoie les frères suivants de chaque
élément de la sélection
● nextUntil() : renvoie les frères suivants de
chaque élément de la sélection, jusqu'à un élément
désigné par le sélecteur


● content() : renvoie tous les nœuds enfants de
● closest(selecteur) : renvoie le parent le plus
proche de chaque élément sélectionné répondant
au sélecteur
● find(selecteur) : renvoie les descendants de
chaque élément sélectionné répondant au sélecteur
● find(param) : ajoute les éléments fournis en
agruments (élément, sélecteur ou HTML)


jQuery – manipuler le DOM
● Nous avons déjà vu les méthodes text() et html()
● Les pages suivantes présente les méthodes de
manipulation du DOM, sans les détailler
● comme habituellement sous jQuery, la plupart des
méthodes prennent en paramètre un contenu ou une
fonction renvoyant un contenu
● cf. http://api.jquery.com/category/manipulation/


● text() et html() : modification du contenu
● append() : ajout à l'intérieur de l'élément sélectionné, en
mode ajout
● after() : ajout après l'élément sélectionné
● before() : ajout avant l'élément sélectionné
● wrap() : ajout autour de l'élément sélectionné
● wrapAll() : ajout autour tous les éléments de la sélection
● wrapInner() : ajout autour des enfants de l'élément
sélectionné
● unwrap() : annule l'action de wrap()

● replaceWith() : remplace l'élément sélectionné par le
contenu spécifié
● remove() : supprime du DOM tous les éléments
répondant aux critères de sélection
● detach() : comme remove(), mais en conservant les
données associées
● clone() : copie les éléments


jQuery – filtres sur le DOM
● filter(expression) : réduit l'ensemble des éléments
sélectionnés à ceux qui passe le filtre
● eq(index) : réduit l'ensemble des éléments sélectionnés à celui
correspond à la position
● slice(debut[,fin]) : réduit l'ensemble des éléments
sélectionnés à ceux qui sont entre deux positions
● is(expression) : indique si la sélection répond à un critère,
renvoie true ou false
● first() et last() : réduit l'ensemble des éléments sélectionnés
au premier ou dernier item
● has(selecteur) : réduit l'ensemble des éléments sélectionnés à
ceux qui ont un descendant correspondant au sélecteur


jQuery – les caractères spéciaux
● jQuery utilise un certain nombre de caractères
comme éléments de syntaxe
● Si ces caractères sont utilisés dans des
expressions littérales, il faut les échapper avec
deux caractères backslash -
● Liste des caractères spéciaux
● # ; & , . + * ~ ' : ! ^ $ [ ] ( ) = > | /


jQuery - AJAX
● jQuery facilite l'écriture du code AJAX
● AJAX nécessite aussi de la programmation côté serveur
● ce qui signifie :
– un langage : PHP, ASP, .NET, Java, …
– un serveur : Apache, IIS, Tomcat, Jboss, …
– une base de données : MySql, Oracle, SQLServer, Derby, …
● La programmation côté serveur n'est pas abordée ici
● Il est intéressant, si ce n'est essentiel, de mettre en place
des outils de suivi des requêtes AJAX dans le navigateur


jQuery - AJAX
● load(url [,datas] [,function])
● charge une ressource dans la sélection
– url : url de la ressource
– datas : pairs clé/valeur envoyées au serveur
● si aucune données la méthode GET est utilisée
– function : fonction à exécuter en cas de réussite de la
requête
●retourne un objet jQuery
● loadIfModified(url [,datas] [,function])
● ne charge la ressource que si celle si est modifiée
● même fonctionnement que load()

jQuery - AJAX
● Exemple de code load()
● onglet Network de Chrome
jQuery 04 – Ajax/load.html
$("#conteneur").load("test.html");
})

ressource à charger

<div id='conteneur></div>


jQuery - AJAX
● $.get(url [,datas] [,function] [,type])
● effectue une requête AJAX avec une méthode HTTP
GET
– url : ressource à charger
– datas : paires clé/valeur envoyées au serveur
requête
– type : type de la réponse fournie à la fonction callback
● String pouvant être : xml, html, script, json, jsonp, text
● renvoie un objet XMLHttpRequest


jQuery - AJAX
● $.post(url [,datas] [,function] [,type])
● effectue une requête AJAX avec une méthode HTTP
POST
– url : ressource à charger
– datas : paires clé/valeur envoyées au serveur
requête
– type : type de la réponse fournie à la fonction callback
● String pouvant être : xml, html, script, json, jsonp, text


jQuery - AJAX
● $.getSrcipt(url[,function])
● charge une script via la méthode HTTP GET et l'exécute
– url : script à charger
requête

$.getScript("hello.js");
});


jQuery - AJAX
● Les méthodes précédentes sont des raccourcis de
l'utilisation de la méthode $.ajax()
● La méthode ajax() permet de maîtriser
complètement le fonctionnement de l'objet
XMLHttpRequest
● Les paramètres de la fonction sont fournis sous la
forme d'un objet JSon
● cf. http://api.jquery.com/jQuery.ajax/


jQuery - AJAX
● La méthode ajax() permet de s'adapter à tous les
cas de figure
● authentification, cross domaine, ajout dans le header de
la requête, …
● bien étudier la documentation
$.ajax({
url: 'teste.html',
success: function(data){
$('#conteneur').html(data);
},
error: function(xhr,status,error){
console.log(status);
console.log(error);
},
});
});


jQuery - AJAX
● Événements associés à la requête AJAX
● ajaxSend(function) : assigne une fonction callback qui sera
exécutée avant l'envoi de la requête
● ajaxStart(function) : assigne une fonction callback qui sera
exécutée lors du début de la requête
● ajaxStop(function) : assigne une fonction callback qui sera
exécutée à la fin de toutes les requêtes
● ajaxSuccess(function) : assigne une fonction callback qui
sera exécutée en cas de succès de la requête
● ajaxComplete(function) : assigne une fonction callback qui
sera exécutée à la fin complète de la requête
● ajaxError(function) : assigne une fonction callback qui sera
exécutée en cas de d'erreur sur la requête

jQuery - AJAX
● Fonctions utilitaires (helpers)
● serialize() : encode un formulaire en String pouvant
être soumis au serveur
● serializeArray() : encode un formulaire en un
tableau JSon de clé/valeurs


jQuery – construction d'une popup
● Pour illustrer la prise en main de jQuery, nous
allons créer une popup d'identification
● deux champs de saisie : user et password
● Pour valider la saisie un script vallidation.js vérifie si
le champ est remplit ou non
● ce script créé un événement personnalisé qui sera
appelé ensuite sur des événement du DOM


● script de validation
● le fichier validation.js doit être ajouter avant le script AuthPopup.js
$(":text,:password").live('validation',function(){
var val = $.trim($(this).val());
var errorMessage=[];
if($(this).hasClass('required') && val=="")
errorMessage.push("Champ obligatoire");

var isOk = errorMessage.length==0;
var msg;
if(!isOk)
msg = "<div class='error'>"+errorMessage.join('<br/>')+"</div>";
if($(this).next().is("div.error"))
$(this).next().remove();

$(this).after(msg);
$(this).data("isValid",isOk);
});


● Création d'un objet JavaScript AuthPopup qui
permettra
● de créer le code HTML
● d'ajouter des événements
– pour la validation du formulaire
● d'afficher le formulaire
● d'envoyer les informations au serveur
● de cacher le formulaire


● Structure de base JavaScript
var AuthPopup = {
create: function(){},

addEvents: function(){},

show: function(){},

sendToServer: function(){},

hide: function(){}
};


● La mise en place du HTML est confiée à la fonction create()
create: function(){
var html=[];
var i=0;
html[i++] = "<div id='authPopup'>";
html[i++] = "<form>";
html[i++] = "<div id='header'>Identifiez-vous<div id='cmdCancel'>x</div></div>";
html[i++] = "<div id='body'>";
html[i++] = "<div><label for='user'>User </label>";
html[i++] = "<input type='text' id='user' class='required'/></div>";
html[i++] = "<div><label for='pswd'>Password </label>";
html[i++] = "<input type='password' id='pswd' class='required'/></div>";
html[i++] = "<div><input type='submit' id='cmdSend' value='OK'/></div>"
html[i++] = "</form>";
html[i++] = "</div>";

$('body').append(html.join(""));
$('body').append("<div id='overlay'></div>");
},


● L'affichage de la popup est confiée à la méthode
show()
show: function(){
if($("#authPopup").size() == 0){
this.create();
this.addEvents();
}

var top = $(window).scrollTop()+($(window).height() - $('#authPopup').height())/2;
var left = $(window).scrollLeft()+($(window).height() - $('#authPopup').height())/2;

$("#authPopup")
.css('top',Math.max(0,top))
.css('left',Math.max(0,left))
.slideDown('slow')
.find(':text,textarea').first().focus();

$("#overlay").fadeIn();
},


● La fermeture de la popup est gérée par la méthode
hide()

hide: function(){
$("#authPopup").slideUp('slow',function(){
$("#overlay").fadeOut();
});
}


● Les événements sont ajoutés par la méthode
addEvents()
● la méthode de validation est liée à l'événement du DOM
par la méthode trigger()
● la croix doit fermer la popup
– le proxy est utilisé pour garder de la popup lors de l'appel de
hide()
● l'appui sur la touche OK doit soumettre le formulaire


● Code de la fonction addEvents()
addEvents: function(){
$(":text, :password").live("blur",function(){
$(this).trigger("validation");
});
$("#cmdCancel").click($.proxy(this.hide,AuthPopup));
$("#authPopup").children("form").submit(
{"popup":this},
function(event){
if($('#user').val()=="" || $('#pswd').val()==""){
alert("Formulaire incomplet");
}
else{
event.data.popup.sendToServer();
event.data.popup.hide();
}
return false;
});
},


● Code de la méthode addEvents()
● Enregistrement de l'événement click
– une première approche aurait pu donner ceci :
$("#cmdCancel").click(this.hide);
●

● mais dans le contexte de l'appel de l'événement this est le bouton
submit !!!
– jQuery fournit $.proxy() qui permet de définir le contexte
d'exécution d'une fonction
$("#cmdCancel").click($.proxy(this.hide,AuthPopup));
●

● lors de l'appel de $.proxy() this fait référence à AuthPopup
– le 2nd paramètre est le contexte dans lequel doit être appelée la
méthode, AuthPopup qui est l'objet aurait pu être remplacé par
this


● Code de la méthode addEvents()
● soumission du formulaire (extraits de code)
$("#authPopup").children("form").submit({"popup":this},function(event)...
–
– un objet est passé à submit(), cet objet référencie dans la
propriété popup l'objet AuthPopup
– cet objet est lié à l'objet event qui sera passé à la fonction
callback
– il devient alors d'appeler les méthode de l'objet AuthPopup
avec le bon contexte
event.data.popup.sendToServer();
event.data.popup.hide();
● la méthode addEvent() retourne false pour stopper
la soumission

● L'envoi des données au serveur est confiée à la
méthode sendToServer()
sendToServer: function(){
$.ajax({
'url':'authentification',
'type':'POST',
'context':this,
'data':{
'user':$("#user").val(),
'pswd':$("#pswd").val()
},
'success':function(){
console.log("envoi réussi");
}

});
},


● Pour l'instant aucune feuille de style n'a été définie
● Notre popup ressemble à cela

● la feuille de style AuthPopup.js permet d'obtenir


jQuery – les plugins
● jQuery peut être étendu à l'aide de plugin
● le développement des plugins n'entre pas dans cette
présentation
● largement documenté sur le web
● jQuery possède une large gamme de plugins
● Tous les plugins se basent sur jQuery, il faut donc
inclure la bibliothèque jQuery, et les bibliothèques
des plugins
● Deux plugins sont maintenus par le projet jQuery
● jQuery UI et jQuery mobile

UI
● Permet d'ajouter au projet des effets visuels, des
widgets
● onglets, calendriers, boites de dialogue, barre de
progression, …
● Le téléchargement des bibliothèques peut être
personnalisé
● cf. http://jqueryui.com/download
– les composants peuvent êtes ajoutés un par un


UI
● Les widgets sont contrôlés par :
● le fichier JavaScript
● le fichier des CSS
● un répertoire des images
● Il faut donc ajouter à la page
● adapter les chemins et noms de fichier si nécessaire
<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css"
rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>


Bibliographie
● AJAX – Le guide complet
● auteurs : Bruno CATTEAU et Nicolas FAUGOUT
● éditeur : Micro Application
● JQuery – Découverte du framework JavaScript
● auteur : Luc VAN LANCKER
● éditeur : ENI éditions
● JQuery – Le guide complet
● auteurs : Guillaume ALLAIN et Timothy STUBBS
● éditeur : Micro Application


Ressources web
● Sites officiels
● http://jquery.com/
● http://www.json.org/
● http://www.w3.org/
● http://www.w3schools.com/
● Blogs
● http://www.codylindley.com/jqueryselectors/
● www.mathieurobin.com/category/devweb/javascript/jquery/


jQuery

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à jQuery

Similaire à jQuery (20)

Plus de Franck SIMON

Plus de Franck SIMON (18)

jQuery