Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée Objectifs spécifiques : Inclure la bibliothèque Sélectionner du contenu Manipuler des éléments Mettre en forme du contenu Gérer des évènements Utiliser des effets Effectuer des requêtes AJAX

1. Introduction
à
M. Abdoulaye DIENG Sept 2017

2. Objectif général
Prendre en main la bibliothèque JavaScript la
plus utilisée
2

3. Objectifs spécifiques
• Inclure la bibliothèque
• Sélectionner du contenu
• Manipuler des éléments
• Mettre en forme du contenu
• Gérer des évènements
• Utiliser des effets
• Effectuer des requêtes AJAX
3

4. Sommaire
1. Qu’est ce que jQuery ?
a) Problématique
b) Présentation
c) Position concurrentielle
2. Préalables
a) Inclure la bibliothèque
b) Syntaxe
c) Disponibilité du DOM
3. Sélectionner du contenu
4. Manipuler du contenu
5. Gérer les évènements
6. Utiliser des effets
7. Effectuer des requêtes
AJAX
4

5. var d=Date.parse("Sun Jan 5 12:05:12 +0000 2014");
document.write(d);
1388923512000
1388923512000 NaN
var d= new Date("01-05-2014");
document.write(d);
Sun Jan 05 2014 00:00:00 GMT+0000 (Maroc)
Invalid Date
Sun Jan 5 00:00:00 UTC 2014
Qu’est ce que jQuery ?
problématique
5

6. Qu’est ce que jQuery ?
présentation
• Pb : incompatibilité du Javascript entre les navigateurs
• Sol : bibliothèque permettant une spécification unique,
indépendante du navigateur
• jQuery = bibliothèque javascript open-source et cross-browser
• Créée en 2006 par John Resig
• jQuery permet de :
– manipuler le DOM
– gérer des événements
– simplifier le dialogue client/serveur
– simplifier des commandes de JavaScript
• Possibilité d’étendre les fonctionnalités
de jQuery par l’ajout de plugins
6

7. Qu’est ce que jQuery ?
Position concurrentielle
7

8. Préalables
inclure la bibliothèque
• En local (dans le site)
– Télécharger la bibliothèque (fichier .js) à partir de
http://jquery.com/download/
– Inclure la biblio dans toute page :
<script src="chemin/vers/jquery.js"></script>
• En ligne via CDN (Content Delivery Networks) avec l’élément
script et l’attribut src valant l’une des URL suivantes :
– code.jquery.com/jquery-1.11.3.min.js
– ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
– ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js
– cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js
– cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js
8

9. Préalables
syntaxe
• jQuery repose sur une seule fonction javascript nommée
jQuery() et abrégée en $().
– Elle accepte des paramètres (élément DOM, sélecteur CSS
ou fonction)
– Elle retourne l’objet appelant
– Elle est chaînable
Ex : $('#element').hide().css('color', 'red').fadeIn('slow');
• Principale philosophie de jQuery
$('Trouver du contenu').EnFaireQuelqueChose();
9

10. Préalables
disponibilité du DOM
• DOM (Document Object Model ) est la modélisation objet d'un
document, fournissant une interface d'accès aux différents
éléments d'un document HTML.
• Avant toute action sur une page, il faut s’assurer que son
contenu est prêt à être manipulé.
• Pour ce faire, passer le code de l’action à $(document).ready()
comme suit :
$(document).ready(function() {
// le code ici
});
• Ou plus simplement :
$(function(){
// le code ici
});
10
tp1

11. Sélectionner du contenu
présentation
• Tout contenu est sélectionné avant d’être manipulé
• Un sélecteur permet de trouver du contenu en fonction
d’identifiants, de classes, de types, d’attributs ou d’autres
sélecteurs propres au CSS ou au jQuery.
• Tout sélecteur doit être passé, entre quotes, à la fonction $().
• Exemples
$('#valider')
$('ol > li:first')
• .length : propriété de l’objet sélectionné, permet de compter
le nombre d’éléments sélectionnés
Ex : $('ol > li').length; // nbre d’éléments d’une liste
ordonnée
11

12. Sélectionner du contenu
quelques sélecteurs CSS classiques
Expression Retour
A Tout contenu indiqué par l’élément HTML A
#nomId Tout contenu identifié par "nomId".
.nomClasse Tout contenu de la classe "nomClasse".
[attr] Tout contenu ayant l’attribut "attr".
[attr="val"] Tout contenu dont l'attribut "attr" vaut val.
[attr^="val"] Tout contenu dont l'attribut "attr" commence par val.
[attr$="val"] Tout contenu dont l'attribut "attr" se termine par val.
[attr*="val"] Tout contenu dont l'attribut "attr" contient val.
12

13. Sélectionner du contenu
quelques sélecteurs CSS classiques
Expression Retour
X Y
Tout contenu sélectionné par Y avec Y descendant d’un contenu
sélectionné par X
X > Y
Tout contenu sélectionné par Y avec Y fils direct d’un contenu
sélectionné par X
X + Y
Tout contenu sélectionné par Y avec Y suivant immédiat d’un contenu
sélectionné par X.
X ~ Y
Tout contenu sélectionné par Y avec Y suivant un contenu sélectionné
par X.
13

14. Sélectionner du contenu
sélecteurs pour formulaires
Expression Retour
:input Tout champ input, textarea, select ou button
:button Tout élément button.
:checkbox ou :radio Tout champ de type checkbox ou de type radio
:checked ou :selected Tout élément coché ou sélectionné
:file Tout champ de type file
:image Tout bouton de type image
:submit ou :reset Tout bouton de soumission ou de réinitialisation
:text ou :password Tout champ de type text ou de type password
:enabled Tout élément activé
:focus Tout élément qui a le focus
14

15. Sélectionner du contenu
filtres
Expression Retour
elt:hidden ou elt:visible Éléments cachés ou Éléments visibles
elt:parent Éléments qui ont des éléments enfants.
elt:header Balises de titres : h1, h2, h3, h4, h5 et h6.
elt:not(s) Éléments qui ne sont pas sélectionnés par le sélecteur s.
elt:has(s) Élts qui contiennent des éléments sélectionnés par le sélecteur s.
elt:contains(t) Éléments qui contiennent du texte t.
elt:empty Éléments dont le contenu est vide.
elt:eq(n) ou elt:nth(n) Le n-ième élément, en partant de zéro.
elt:gt(n) Éléments dont l'index est plus grand que n.
elt:lt(n) Éléments dont l'index est plus petit que n.
elt:first ou elt:last Le premier élément (équivaut à :eq(0)) ou le dernier élément
elt:even ou elt:odd Éléments dont l'index est pair ou éléments dont l'index est impair15
tp2

16. Manipuler du contenu
quelques méthodes
• $("balise",{attr1: val, attr2: val}) crée un élément DOM
• .html() renvoie le code HTML du contenu du 1er élément trouvé
• .html(str) modifie le contenu de tout élément trouvé
• .text() renvoie la valeur textuelle du contenu du 1er élément trouvé
• .text(str) modifie le contenu de tout élément trouvé
• .val() récupère la valeur (chaîne ou tableau de chaînes) d’un champ
• .val(str |[str1,str2, …] ) définit la ou les valeur(s) de champs
• .prepend(str) et .append(str) permettent d'ajouter un élément ou du
texte à l'intérieur de la balise.
• .before(str) et .after(str) permettent d'ajouter un élément ou du
texte à l'extérieur de la balise.
• .attr('nomAttr') récupère la valeur d’un attribut nomAttr du 1er
élément
• .attr(‘nomAttr’,valeur) modifie la valeur d’un attribut de tout 16

17. Manipuler du contenu
quelques méthodes de mise en forme
• .css('propriété') récupère la valeur d'une propriété CSS
Ex : $('h1').css('fontSize'); // retourne par exemple "19px"
• .css('propriété',valeur) définit une propriété CSS
• .css({prop1: val1, prop2: val2, …}) définit +sieurs
propriétés CSS
Ex : $('h1').css({ 'fontSize' : '100px', 'color' : 'red' });
• .addClass(str) / .removeClass(str) ajoute / enlève une ou +sieurs
classes. Plusieurs classes sont séparées par des espaces.
Ex : $("p").removeClass("maClasse
taClasse").addClass("saClasse");
• .width() et .height() récupèrent les dimensions du 1er élément
• .width(val) et .height(val) définissent les dimensions de tout
élément 17

18. Manipuler du contenu
exemple
Code HTML
<p> Le texte ci-dessus a été créé dynamiquement.</p>
Code jQuery
var newDiv =$("<div>");
newDiv.html("<h1>Salutation !</h1>");
newDiv.css("font-style","italic");
$("p").before(newDiv);
18
tp3

19. Gérer des événements
présentation
• Syntaxe
– .nomEvent(fn) attache la fonction fn à l’événement nomEvent
– .nomEvent() déclenche l’événement nomEvent dans le code
• Quelques événements :
focus : avoir le focus; blur : perte du focus;
change : modif du contenu; load : chargement d’un élément;
click : clic de souris; mouseenter : survol superficiel de souris;
mousehover : survol (même les enfants) de souris;
submit : soumission d’un formulaire;
• Exemple
$('p').click(function() {
alert("Pourquoi cliquez-vous sur un paragraphe ?");
});
19

20. Gérer des événements
quelques méthodes
• .on("nomEvent1", fn) lie un gestionnaire à un seul évènement
Ex : $("p").on("click", function(){ alert("Pourquoi cliquez-vous …");
});
• .on("nomEvent1 nomEvent2 …", fn) lie un gestionnaire à +sieurs
events
Ex : $("h1").on( "mouseenter mouseleave", function() {
console.log( "La souris a survolé ou a quitté le titre" ); });
• .on({event1: fn1, event2: fn2, …}) permet plusieurs liaisons
Ex : $( "h2" ).on({
mouseenter: function() { console.log( " sous-titre survolé …" ); },
mouseleave: function() { console.log( " sous-titre quitté …" ); },
click: function() { console.log( " sous-titre cliqué" ); } });
• .hover(fn_over, fn_out ) appelle successivement 2 fonctions quand
la souris survole puis quitte un élément
Ex : $( "h3" ).hover( function() { console.log( " sous-titre survolé …"20
Tp4&5

21. Utiliser des effets
quelques méthodes de base
• .show() / .hide() affiche / cache les éléments en question.
Ex : $("p").hide();
• .toggle() affiche l’élément s’il est caché, sinon le cache
• .slideDown() /.slideUp() déroule/enroule verticalement
• .slideToggle() déroule l’élément s’il est enroulé, sinon l’enroule
• .fadeIn() / .fadeOut() fait apparaître / disparaître les éléments en
question en modifiant l'opacité de manière progressive.
• .fadeToggle() fait apparaître ou disparaître des éléments
• Ces méthodes peuvent prendre comme paramètres :
– une durée - entier (en ms) ou chaîne (normal, fast ou slow)-
– une fonction de rappel exécutée à la fin de l'animation.
Ex : $( "p.hidden" ).fadeIn( 3000, function() {
console.log( " paragraphe on stage !!!" );
}); 21

22. Utiliser des effets
animation personnalisée
animate(style [,durée] [,modèle] [,fonction])
• style (objet contenant des couples propriété/valeur CSS) :
style de l’élément à la fin de l’animation
NB : Seules les propriétés CSS ayant des valeurs numériques
sont autorisées. Ex : width, left, height, opacity, fontSize
• durée (entier (en ms) ou chaîne (normal, fast ou slow)) :
durée de l'animation
• modèle (chaîne (swing ou linear)) : modèle de progression
de l'animation.
• fonction : fonction de rappel à exécutée lorsque l'animation
sera terminée
22

23. Utiliser des effets
animation personnalisée - exemple
Code HTML
<style>
div { width: 100px; background: red; border: 1px solid green;
}
</style>
<button>Run</button>
<div>Hello !</div>
Code jQuery
$("button").click(function() {
$( "div" ).animate({width: "70%", opacity: 0.4,
marginLeft: "0.6in", fontSize: "3em",
borderWidth: "+=10px" }
, 1500 ); 23
Tp6&7

24. Effectuer des requêtes AJAX
présentation d’AJAX
• AJAX (Asynchronous JavaScript and XML) : technologie qui
permet à un navigateur d’échanger des données avec un
serveur, et de mettre à jour des parties d'une page Web sans la
recharger entièrement.
• Intérêts
– Économie de la bande passante
– Non blocage de l’application pendant le traitement de la
requête
– Augmentation de la réactivité de l’application
24

25. Effectuer des requêtes AJAX
fonctionnement d’AJAX
1) Évènement déclencheur
2) Création de l’objet
XMLHttpRequest
3) Envoi de la requête HTTP
4) Traitement de la requête
5) Réponse du serveur
6) Traitement de la réponse
25
1
2
3
4
5
6

26. Effectuer des requêtes AJAX
méthode $.ajax()
• $.ajax()
– Reçoit des options sous la forme {clef1:val1, clef2:val2, …}
– envoie une requête
– retourne l'objet jqXHR (contenant les infos sur la requête),
sur-ensemble de l'objet XMLHttpRequest
• Principales clefs
– url:"URL_cible", URL du script qui reçoit la requête
– method:"GET|POST|PUT|DELETE", méthode HTTP
– data:{key1:value1, key2:value2, …}, données à envoyer
• Exemple
var jqXHR = $.ajax({ method:"POST", url: "accueil.php",
data: { test: "Bonjour le backend ! " }
}) 26

27. Effectuer des requêtes AJAX
méthodes done() et fail() de l’objet jqXHR
• Méthodes alternatives et différées
• .done() reçoit la fonction de rappel à exécuter en cas de succès
de la requête et retourne l’objet jqXHR (=> chaînabilité)
• La callback reçoit la réponse puis une chaîne (« success »)
indiquant l’état de l’opération et enfin l’objet jqXHR
• .fail() reçoit la fonction de rappel à exécuter en cas d’échec de la
requête et retourne l’objet jqXHR
• La callback reçoit l’objet jqXHR puis une chaîne (« timeout », «
error », « abort » ou « parsererror ») indiquant l’état de
l’opération et enfin un texte (« Not Found », « Internal Server
Error ») donnant l'information sur l'erreur.
27

28. Effectuer des requêtes AJAX
méthodes done() et fail() de l’objet jqXHR - Exemple
• Dans le Webroot d’un serveur, créez le sous-rep jquery-
backend qui contiendra les fichiers hello.html et exemple-
ajax.html
• Contenu de hello.html
<p>hello front-end !!!</p>
• Contenu de exemple-ajax.html
$.ajax({
method:"GET",
url: "http://localhost/jquery-backend/hello.html"
})
.done(function(data) { alert("Données reçues : "+data); })
.fail(function(jqXHR, textStatus,errorThrown) {
alert( "Echec de la requete");
console.log( "Error: " + errorThrown );
console.log( "Status: " + textStatus ); console.dir( 28

29. Effectuer des requêtes AJAX
$.get() et $.post()
• $.get( url [, data ] [, success(rslt,statut,xhr) ] [, dataType ] )
raccourci de $.ajax() avec une méthode GET
• Exemple
$.get("http://example.com", function (data) {
alert("Données reçues : "+data);
} );
• $.post( url [, data ] [, success(rslt,statut,xhr) ] [, dataType ]
)
raccourci de $.ajax() avec une méthode POST
• Exemple
$.post("http://example.com", { test: 'Bonjour le backend !' })
• done() et fail() peuvent être utilisées avec $.get() et $.post()
car celles-ci retournent l'objet jqXHR 29
Tp8

30. Effectuer des requêtes AJAX
load()
$('selecteur').load( url [, data ] [, complete(rslt, statut, xhr) ])
– charge des données à partir de url et place le code HTML
renvoyé dans l'élément identifié par selecteur.
– "url selecteur" permet d’affiner le contenu à charger
– complete() : fonction de rappel à exécuter lorsque les
données sont chargées
30

31. Effectuer des requêtes AJAX
load() - exemple
• Dans hello.html et avant le paragraphe, rajoutez le contenu
<h1>Salutation pour le front-end</h1>
• Dans le sous-rep jquery-backend, créez exemple-ajax-
load.html
• Contenu HTML de exemple-ajax-load.html
<h1>Salutation venant du back-end</h1>
<p id="backHello"></p>
• Contenu jQuery de exemple-ajax-load.html
$( "#backHello" ).load( "hello.html h1 + p", function(rslt, status,
xhr){
if ( status == "error" ) {
alert("Erreur "+xhr.status + " " + xhr.statusText)
} else {
alert("Chargement accompli n"+rslt)
}
31
Tp9

32. Documentation
http://api.jquery.com/
https://learn.jquery.com/
32