SlideShare une entreprise Scribd logo
Introduction
à
M. Abdoulaye DIENG Sept 2017
Objectif général
Prendre en main la bibliothèque JavaScript la
plus utilisée
2
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
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
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
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
Qu’est ce que jQuery ?
Position concurrentielle
7
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Documentation
http://api.jquery.com/
https://learn.jquery.com/
32

Contenu connexe

Tendances

Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
Abdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
Abdoulaye Dieng
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
Abdoulaye Dieng
 
cpp1 : Quelques elements de base du C++
cpp1 : Quelques elements de base du C++cpp1 : Quelques elements de base du C++
cpp1 : Quelques elements de base du C++
Abdoulaye Dieng
 
Csharp1 : quelques elements de base
Csharp1 :  quelques elements de baseCsharp1 :  quelques elements de base
Csharp1 : quelques elements de base
Abdoulaye Dieng
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Python For Data Science - French Course
Python For Data Science - French CoursePython For Data Science - French Course
Python For Data Science - French Course
Haytam EL YOUSSFI
 
Les fondamentaux du langage C
Les fondamentaux du langage CLes fondamentaux du langage C
Les fondamentaux du langage C
Abdoulaye Dieng
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
halleck45
 
Exploiter php 5
Exploiter php 5Exploiter php 5
Exploiter php 5
halleck45
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
TheBest Icanbe
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
Kristen Le Liboux
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 

Tendances (17)

Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
cpp1 : Quelques elements de base du C++
cpp1 : Quelques elements de base du C++cpp1 : Quelques elements de base du C++
cpp1 : Quelques elements de base du C++
 
Csharp1 : quelques elements de base
Csharp1 :  quelques elements de baseCsharp1 :  quelques elements de base
Csharp1 : quelques elements de base
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Python For Data Science - French Course
Python For Data Science - French CoursePython For Data Science - French Course
Python For Data Science - French Course
 
Les fondamentaux du langage C
Les fondamentaux du langage CLes fondamentaux du langage C
Les fondamentaux du langage C
 
Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4Programmation Orientée Objet et les Traits en PHP 5.4
Programmation Orientée Objet et les Traits en PHP 5.4
 
Part1
Part1Part1
Part1
 
Exploiter php 5
Exploiter php 5Exploiter php 5
Exploiter php 5
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 

Similaire à Introduction à jQuery

Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
StrasWeb
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
Voyelle Voyelle
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
PROFPROF11
 
Scrapez facilement et gratuitement
Scrapez facilement et gratuitementScrapez facilement et gratuitement
Scrapez facilement et gratuitement
Madeline Pinthon
 
JQuery
JQueryJQuery
HTML5
HTML5HTML5
HTML5
Neovov
 
Js part2
Js part2Js part2
Js part2
Romdhani Asma
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
Abdelouahed Abdou
 
Python.pptx
Python.pptxPython.pptx
Python.pptx
Jaouad Rachek
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
Vlad Posea
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
eric German
 
initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
Abdoulaye Dieng
 
JQuery
JQueryJQuery
Formation Jquery
Formation JqueryFormation Jquery
Formation Jquery
Abdelaziz Elbaze
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
Jean Michel
 
Extraction données web
Extraction données webExtraction données web
Extraction données web
parisraddicts
 
Cours C Avancé chapitre 2 et chapitre.pdf
Cours C Avancé  chapitre 2 et chapitre.pdfCours C Avancé  chapitre 2 et chapitre.pdf
Cours C Avancé chapitre 2 et chapitre.pdf
c79024186
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Présentation nouveauté java7
Présentation nouveauté java7Présentation nouveauté java7
Présentation nouveauté java7
Cynapsys It Hotspot
 

Similaire à Introduction à jQuery (20)

Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
Jquery : les bases
Jquery : les basesJquery : les bases
Jquery : les bases
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
Scrapez facilement et gratuitement
Scrapez facilement et gratuitementScrapez facilement et gratuitement
Scrapez facilement et gratuitement
 
JQuery
JQueryJQuery
JQuery
 
HTML5
HTML5HTML5
HTML5
 
Js part2
Js part2Js part2
Js part2
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
 
Python.pptx
Python.pptxPython.pptx
Python.pptx
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
 
initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
 
JQuery
JQueryJQuery
JQuery
 
Formation Jquery
Formation JqueryFormation Jquery
Formation Jquery
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
 
Extraction données web
Extraction données webExtraction données web
Extraction données web
 
Cours C Avancé chapitre 2 et chapitre.pdf
Cours C Avancé  chapitre 2 et chapitre.pdfCours C Avancé  chapitre 2 et chapitre.pdf
Cours C Avancé chapitre 2 et chapitre.pdf
 
Apprenez le jQuery
Apprenez le jQueryApprenez le jQuery
Apprenez le jQuery
 
Présentation nouveauté java7
Présentation nouveauté java7Présentation nouveauté java7
Présentation nouveauté java7
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
Abdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
Abdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
Abdoulaye Dieng
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
Abdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
Abdoulaye Dieng
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
Abdoulaye Dieng
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
Abdoulaye Dieng
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
Abdoulaye Dieng
 
Architecture des ordinateurs : microprocesseur
Architecture des ordinateurs : microprocesseurArchitecture des ordinateurs : microprocesseur
Architecture des ordinateurs : microprocesseur
Abdoulaye Dieng
 
Architecture des ordinateurs : memoires
Architecture des ordinateurs : memoiresArchitecture des ordinateurs : memoires
Architecture des ordinateurs : memoires
Abdoulaye Dieng
 
Introduction aux bases de données
Introduction aux bases de donnéesIntroduction aux bases de données
Introduction aux bases de données
Abdoulaye Dieng
 
Prise en main de Dreamweaver
Prise en main de DreamweaverPrise en main de Dreamweaver
Prise en main de Dreamweaver
Abdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 
Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15Cours référencement naturel supdeco techonologie avril-15
Cours référencement naturel supdeco techonologie avril-15
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
Architecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donneesArchitecture ordinateur-echange-de-donnees
Architecture ordinateur-echange-de-donnees
 
Architecture des ordinateurs : microprocesseur
Architecture des ordinateurs : microprocesseurArchitecture des ordinateurs : microprocesseur
Architecture des ordinateurs : microprocesseur
 
Architecture des ordinateurs : memoires
Architecture des ordinateurs : memoiresArchitecture des ordinateurs : memoires
Architecture des ordinateurs : memoires
 
Introduction aux bases de données
Introduction aux bases de donnéesIntroduction aux bases de données
Introduction aux bases de données
 
Prise en main de Dreamweaver
Prise en main de DreamweaverPrise en main de Dreamweaver
Prise en main de Dreamweaver
 

Introduction à jQuery

  • 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