Cours2 JS JQuery
Cours2 JS JQuery
Cours2 JS JQuery
JavaScript - jQuery
1
Introduction
JavaScript
– Langage de script incorporé dans le HTML
– Historiquement, premier langage de script pour le Web
– Apporte des améliorations au HTML
• HTML permet d'écrire
• JavaScript permet de programmer, c'est-à-dire de
gérer l'information
Qualités :
– Disponible sur les navigateurs actuels et gratuit
Défauts :
– Interprété et donc très lent, pas de débogueur
© A. Belaïd 2
Introduction
A quoi ressemble un script ?
– C’est une portion de code qui vient s'insérer dans une
page HTML
– Le code du script n'est toutefois pas visible dans la
fenêtre du navigateur car il est compris entre des balises
(ou tags) spécifiques qui signalent au navigateur qu'il
s'agit d'un script écrit en langage JavaScript
– Balises annonçant le code Javascript :
<SCRIPT language="Javascript">
Placez ici le code de votre script
</SCRIPT>
3
Variables
Déclaration
<script language="JavaScript">
var date; // Déclaration sans affectation
var compteur=0; // Déclaration avec affectation
toto='coucou'; // Déclaration implicite par affectation
var prem, second; // variables séparées par des virgules
monNombre = new Number(); // Déclaration typée sans
affectation
e = new Number(2.71828); // Déclaration typée avec
affectation
var maChaine = new String(); //Déclaration de chaîne
var toto = new Boolean(true); //Déclaration de booléen
</script>
© A. Belaïd 4
Tableau
Array
– Le type des éléments : nombres, chaînes, booléens, ...
– La dimension 1, 2, ou 3, ... : tab(7) ; tab(x,y) ; tab(A,B,C) ; ...
– Les indices : souvent des nombres entiers
<script language=JavaScript>
// Tableau de chaînes, de dimension 1, indicé de 0 à 6 :
Jour=new Array(7);
Jour[0]='Dimanche' ;
Jour[1]='Lundi' ;
Jour[2]='Mardi' ; //...
Jour[6]='Samedi' ;
// En énumérant les éléments :
jour=new Array('dimanche','lundi','mardi', ...
,'vendredi','samedi');
</script>
© A. Belaïd 5
Exemple
temp=new Array(30);
function relever() {
for (i=1;i<=30;i++) {
temp[i-1]=17+Math.floor(5*Math.random()); // Math.floor
donne l'entier le plus proche
};
};
function moyenner() {
som=0;
for (i=1;i<=30;i++) {
som+=temp[i-1];
};
return Math.round(som/30);
};
relever();
alert('la moyenne du tableau est ='+ moyenner());
© A. Belaïd 6
Association avec un formulaire
Utilisation dans un formulaire
– Schéma d’utilisation
• body :
Contient la définition du formulaire
Il fait appel aux variables et fonctions définies
dans le head
• head :
Contient les fonctions
© A. Belaïd 7
Association avec un formulaire
Lire/Écrire
Exemple 1 : appel à une fonction de lecture en cliquant sur
un bouton du formulaire
<html>
<head>
<title>Programme In2</title>
<script language="JavaScript">
function lireAnnee() {
annee=prompt('En quelle année sommes-nous ? ', 2000);
alert('Vous avez répondu : ' + annee) }
</script>
</head>
<body>
<form>
<input type="button" value="En quelle annee ? "
> </form>
</body>
</html>
© A. Belaïd 8
Association avec un formulaire
Lire/Écrire : lire-ecrire-form0.html
Exemple 1 :
© A. Belaïd 9
DOM
Notion d’objet en Javascript
– Le Javascript traite les éléments qui s'affichent dans
votre navigateur comme des objets, c'est-à-dire des
éléments :
• classés selon une hiérarchie pour pouvoir les
désigner précisément
• auxquels sont associées des propriétés et des
actions (méthodes)
10
Les objets
Comment JavaScript définit les objets ?
– Javascript divise la page du navigateur en éléments (objets),
afin de permettre d'accéder à n'importe lequel d'entre eux et de
pouvoir les manipuler par l'intermédiaire de leurs propriétés
– On commence généralement par l'objet le plus grand (celui
contenant tous les autres) puis on descend dans la hiérarchie
jusqu'à arriver à l'objet voulu
• L'objet le plus grand est l'objet fenêtre : window
• Dans la fenêtre s'affiche une page, c'est l'objet document
• Cette page peut contenir plusieurs objets, comme
des formulaires,
des images, etc.
11
Les objets
L’objet Navigator
– a plusieurs propriétés concernant votre navigateur
• appName :
connaître le nom : Netscape, IE, Mozilla
• appVersion :
connaître la version
• language :
FR, AN
• platform :
windows, Linux…
– Pour le savoir : exécuter :
<script language="Javascript">
document.write(navigator.propriété); //où propriété =
//platform…
</script>
© A. Belaïd 12
L’objet Navigator
Exemple d’utilisation de Navigator
Nom = navigator.appName;
if (Nom == 'Netscape') {
placer ici les instructions à exécuter s'il s'agit de
Netscape Navigator 4 ou supérieur }
if (Nom == 'Microsoft Internet Explorer') {
placer ici les instructions à exécuter s'il s'agit de
Microsoft Internet Explorer 4 ou supérieur
}
13
Les objets
L’objet Window
– est l'objet par excellence dans Javascript, car il est le
parent de chaque objet qui compose la page web
– il contient donc :
• l'objet document :
la page elle-même
• l'objet location :
le lieu de stockage de la page
• l'objet history :
les pages visitées précédemment
• l'objet frames :
les cadres (division de la fenêtre en sous-
fenêtres)
14
L’objet Window
L’objet Window
– Propriétés :
• Frames[] : tableau de cadres contenus
• Length : nombre de cadres (nombre d'éléments du tableau
frames
• Name : nom de la fenêtre dans laquelle on se trouve
• Parent : fenêtre qui englobe celle dans laquelle on se
trouve
– Méthodes :
• alert(), confirm() et prompt() : font apparaître une boîte de
dialogue
• open(), et close() : permettent l'ouverture et la fermeture de
fenêtres
15
L’objet Window
Propriété defaultStatus
– affiche dans la barre d'état de la fenêtre d'affichage la valeur
"Ma page d'accueil"
– Exemple
<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.defaultStatus = "Ma page d'accueil";
</script>
</head>
<body>
</body>
</html>
http://fr.selfhtml.org/javascript/objets/window.htm#closed
16
L’objet Window
Propriétés innerHeight, innerwidth
– permettent de fixer au cours de l’exécution la hauteur et
la largeur de la fenêtre
<html>
<head><title>Test</title>
<script type="text/javascript">
window.innerHeight = 300;
</script>
</head>
<body>
</body>
</html>
17
L’objet Window
La méthode open ()
– Cette fonction ouvre une nouvelle fenêtre
• window.open(" test.html","nom_de_la_fenetre","options_de_la_fenetre")
Ouvre « secondefenetre » et y affiche le fichier test.html.
Secondefenetre peut être utilisé comme target pour l’affichage de
l’extérieur
– Exemple
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function nouvellefenetre() {
mafenetre = window.open("window0.html",
"secondefenetre", "width=300, height=200, scrollbars"); }
</script>
</head>
<body>
<a href="javascript:nouvellefenetre()"> nouvelle fenêtre </a><br>
</body>
</html>
– Pour ouvrir une fenêtre à une position donnée : ajouter les attributs:
top=px, et left=px
18
L’objet Window
la méthode close () :
<a href="javascript:mafenetre.close()">fermer la
fenêtre</a>
– En cliquant sur ce lien, cela ferme la fenêtre
précédemment ouverte avec le nom « mafenetre »
19
L’objet Window
Vérification de l’état de la fenêtre
– Exemple
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var InfoWin = window.open("fichier1.htm", "secondefenetre");
function CheckOpen() {
if(InfoWin.closed == true) alert("La fenêtre a été fermée"); else
alert("La fenêtre est encore ouverte"); }
//-->
</script>
</head>
<body>
<a href="javascript:CheckOpen()">La fenêtre est-elle
fermée?</a>
</body>
</html>
20
L’objet Window
Fermeture automatique d’une fenêtre, après 2’
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var InfoWin = window.open("exercice1.html",
"secondefenetre");
InfoWin.setTimeout("top.close()",2000);
</script>
</head>
<body>
</body>
</html>
21
Les objets
L’objet document
– élément majeur, permet de récupérer des informations d'un
formulaire, créer des calques et les déplacer, écrire du texte...
– Propriétés :
• document.fgColor, permet de récupérer et de changer la
couleur du texte de votre page HTML
document.fgColor = "#993333";
• document.bgColor, permet de récupérer et de changer la
couleur de fond de votre page HTML
• document.lastModified, permet de savoir quand la page
html a été modifiée
document.lastModified;
Internet explorer renvoie : 11/07/2000 19:41:00
Netscape renvoie : Tuesday, November, 7 /2000
19:41:00
22
L’objet document
– document.linkColor
• permet de récupérer et de changer la couleur des liens de
votre page HTML
– document.location
• permet de récupérer et changer l'url de votre page HTML,
ce qui revient à charger une autre page HTML
document.location = "URL/monDoc.HTML";
– document.write()
• permet d'écrire dans votre page HTML
– document.images[ ]
• permet de récupérer et changer les images de votre page
HTML
– document.forms[ ]
• permet de récupérer et changer les informations de votre
formulaire
23
L’objet document
Dernière date de modification
– Donne la date de la dernière modification du document
<html>
<head><title>Test</title></head>
<body>
<script type="text/javascript">
document.write("dernière mise à jour: " +
document.lastModified);
</script>
</body>
</html>
24
L’objet document
Contenu d’une balise
– Permet de récupérer le contenu de la balise <title>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>
<script type="text/javascript">
<!--
document.write(document.title);
//-->
</script>
</h1>
</body>
</html>
25
L’objet document
Récupération de l’URL où se trouve le document
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Ce fichier: " + document.URL);
//-->
</script>
</body>
</html>
26
Le formulaire
L’objet : forms
– Avec l'objet forms, qui se trouve sous l'objet document
dans la hiérarchie JavaScript, vous avez accès aux
formulaires définis dans un fichier HTML
– Syntaxe :
• document.forms["nom_formulaire"].propriété
• document.forms["nom_formulaire"].méthode
– Plusieurs exemples sous :
• http://fr.selfhtml.org/javascript/objets/forms.htm
27
Le formulaire
Exemple
– Il s’agit d’accéder à la case à cocher pour modifier le
contenu de la zone du texte en inscrivant : case cochée ou
case non cochée
– La modification se fera par la fonction ModifChamp();
– On déclare la case à cocher et la zone texte comme suit :
<form name="form1"> <br>
<input type="checkbox" name="checkbox"
<br>
<input type='TEXT' name='champ_text' value='Essai du
javascript' size='24'>
</form>
28
Le formulaire
– Ensuite, on se réfère à la case à cocher et à la zone de
texte à travers forms :
<script language="Javascript">
function ModifChamp() {
if (document.forms["form1"].checkbox.checked) {
document.forms["form1"].champ_text.value='Bouton
coché' }
else {
document.forms["form1"].champ_text.value='bouton
non coché' } }
</script>
29
Le formulaire
Le champ form a plusieurs propriétés :
– Action ()
• Définit l'URL où le formulaire sera envoyé
– Elements
• Tableau représentant les éléments du formulaire
– Length
• Nombre d'éléments à l'intérieur du formulaire
– Method
• Définit le type d'envoi du formulaire (get ou post)
– Name
• Définit le nom du formulaire
– Target
• Définit la page (fenêtre ou frame) de réponse
– Parent
• Indique une fenêtre d'un cadre (frame)
30
Le formulaire
La propriété action ()
– Pour réaliser l’action qui accompagne le formulaire
<html>
<head><title>Test</title>
<script type="text/javascript">
function confirmation() {
window.confirm("Ce formulaire est envoyé à
" + document.formulaire_test.action); }
</script>
</head>
<body>
<form name="formulaire_test" action="mailto:toi-
meme@cheztoi.com" > <input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
31
Le formulaire
La propriété length
– donne le nombre de formulaires définis
<body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Daniel">
<input type="submit" value="Daniel">
</form>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Antoine">
<input type="submit" value="Antoine">
</form>
<script type="text/javascript">
document.write(document.forms.length + " formulaires");
</script>
</body>
32
Le formulaire
La propriété method :
– Sauvegarde la valeur qui figure lors de la définition du formulaire dans
l'attribut method, en principe égale à "get" ou "post"
– Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi la
fonction Methode() est appelée
<body>
function Methode() {
if(document.formulaire_test.action.indexOf("@") > 0)
document.formulaire_test.method = "post";
else
document.formulaire_test.method = "get";
return true;
}
…
<form name="formulaire_test" action="mailto:toi-
meme@cheztoi.com" Methode()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
33
Le formulaire
La propriété name :
– Sauvegarde le nom d’un formulaire
<html>
<head><title>Test</title>
</head>
<body>
<form name="formulaire_test" action="mailto:toi-
meme@cheztoi.com">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
<script type="text/javascript">
<!--
document.formulaire_test.saisie.value =
document.formulaire_test.name;
//-->
</script>
</body>
</html> 34
Le formulaire
L’envoi de mail :
– On ne peut pas envoyer un formulaire tel qu’il est par mail (il
faut utiliser php)
– Cependant, on peut utiliser la formule suivante pour composer
totalement un mail :
• window.open("MAILTO:" + sDestinataire + " ?subject= " +
sObjet + " &body=" +
document.forms[0].elements["ta_commentaires"]) ;
mailto : pour l’adresse
?subject : pour le sujet
&body : pour le texte du mail
ta_commentaires : est une chaîne de caractères qui
rassemble l’information à mettre dans le corps du mèl
35
Le formulaire
La propriété target :
– Précise la cible (cadre) dans laquelle l’affichage sera fait :
<html>
<head><title>Test</title>
<script type="text/javascript">
function cible() {
document.formulaire_test.target = "bas";
return true; }
</script>
</head>
<body>
<form name="formulaire_test" action="fichier.htm"
cible()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
36
Le formulaire
L’action submit() :
– Permet l’envoi du formulaire : JavaScript lance un compte à rebours
avec la méthode setTimeout(). Après 60000 millièmes de secondes,
donc après une minute, la fonction on_y_va() est appelée. Celle-ci
envoie le formulaire avec submit()
<html>
<head><title>Test</title></head>
<body>
<form name="formulaire_test" action="/cgi-bin/estime.pl"
method="get">
<input type="text" size="40" name="champ1"><br>
<input type="text" size="40" name="champ2"><br>
</form>
<script type="text/javascript">
function on_y_va() {
document.formulaire_test.submit(); }
window.setTimeout("on_y_va()",60000);
</script>
</body></html>
37
Les elements
Le champ elements : sous-objet de forms
– Propriétés :
• checked (coché)
• defaultChecked (coché par défaut)
• defaultValue (valeur entrée par défaut)
• form (nom du formulaire)
• name (nom de l'élément)
• type (type de l'élément)
• value (valeur/contenu de l'élément)
– Méthodes :
• blur() (quitter l'élément)
• click() (cliquer sur l'élément)
• focus() (positionner sur l'élément)
• handleEvent() ((traiter l'événement)
• select() (sélectionner du texte)
38
Le formulaire
Checked : exemple: Sauvegarde si oui ou non une case à cocher ou une
case d'option est activée. Les valeurs possibles sont true ou 1 ou false ou 0.
<script type="text/javascript">
<!-- function Ensuite() {
if(document.formulaire_test.mode[0].checked == true)
window.location.href="fichierfrm.htm"; else
if(document.formulaire_test.mode[1].checked == true)
window.location.href="fichier.htm";
else alert("Veuillez faire un choix"); }
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<input type="radio" name="mode" value="avec"> avec cadres
<input type="radio" name="mode" value="sans"> sans cadres <br>
<input type="button" value="Lancer" > </form>
</body>
</html>
39
Le formulaire
defaultValue : Sauvegarde le texte par défaut d'un champ de saisie
<html><head><title>Test</title> </head>
<body>
<form name="formulaire_test" action=""> uri: <input size="40" name="uri"
value="http://www.xy.fr/">
<input type="button" value="Vas-y"
> </form>
<script type="text/javascript">
<!--
if(navigator.userAgent.indexOf("en") > 0) {
document.formulaire_test.url.defaultValue = "http://www.xy.com/";
document.formulaire_test.url.value =
document.formulaire_test.url.defaultValue; }
//-->
</script>
</body>
</html>
40
Javascript
Gestion des événements
41
Les évènements
Présentation
– Les événements sont l’intérêt du JS en matière de
programmation Web
– Ils donnent une interactivité à la page que vous consultez, ce
qui n’existe pas avec le HTML, si on excepte bien entendu le
lien hypertexte
– Le JS permet de réagir à certaines actions de l’utilisateur
Pour cela, on précise :
– L’événement (Event)
• Clic de souris, survol de zones, chargement de la page…
– Le gestionnaire de l’événement (OnEvent)
• OnClick, onMouseOver… : appel de fonction pour agir en
conséquence
42
Les évènements
Syntaxe du gestionnaire d’événement :
>
<a href="URL"
" > Lien
</a>
43
Les évènements
Le clic de souris
– Gestionnaire d’événement
• onClick
– Exemple :
• <input type=”button” avez cliqué sur
le bouton’) ;">
– Balises supportées :
• <input type="button">
• <input type="checkbox">
• <input type="radio">
• <input type="reset">
• <input type="submit">
• <a href..>
44
Les évènements
Le chargement
– Gestionnaire d’événement
• onLoad
– Exemple :
• <body page est chargée !’) ;">
– Balises supportées :
• <body>
• <frameset>
– Effets :
• Au chargement, réaliser tel événement
© A. Belaïd 45
Les évènements
Error
– Gestionnaire d’événement
• onError
– Exemple :
• <img src="pix.gif" de
chargement !’) ;">
– Balises supportées :
• <body>
• <frameset>
• <img>
– Effets :
• Prévient l’erreur au chargement
46
Les évènements
Abort
– Gestionnaire d’événement
• onAbort
– Exemple :
• <img src="pix.gif" avez
interrompu le chargement de l’image !’) ;">
– Balises supportées :
• <img>
– Effets :
• Prévient l’erreur au chargement
47
Les évènements
Le passage de la souris
– Gestionnaire d’événement
• onMouseOver
– Exemples : onmouseover.html
<div style="width:50; height:50; background:lightsteelblue;"
curseur entre dans la zone
bleue');"></div>
<div> <P > Move the mouse pointer
over this text, then move it elsewhere in the document.</div>
<a href="http://www.google.fr" aller sur
google.fr, cliquer ici');">http://www.google.fr</a><a
href="http://www.google.fr" aller sur
google.fr, cliquer ici’) ;">http://www.google.fr</a>
– Balises supportées :
• Presque toutes
– Effets :
• Prévient quand on survole la cible : zone, texte, lien
48
Les évènements
Le passage de la souris
– Gestionnaire d’événement
• onMouseOut
– Exemples :
• <a href="http://www.google.fr" > ne voulez pas y aller ?’) ;">http://www.google.fr</a>
– Balises supportées :
• Presque toutes
– Effets :
• Prévient quand on s’éloigne de la cible
49
Les évènements
Le focus
– Gestionnaire d’événement
• onFocus
• se déclenche lorsque l'élément reçoit le focus (devient actif) soit
par action de l'outil de pointage (souris), soit par la navigation
tabulée (touches du clavier)
L'événement onfocus est l'opposé de l'événement onblur
– Exemple :
<input type="text" size="40" maxlength="50" name="pharma_name"
> > > er="1"' > – Balises supportées :
• Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,
Select, Submit, Text, TextArea, window
– Effets : tester
50
Les évènements
Le blur :
– Gestionnaire d’événement
• onBlur
– Exemple :
• <input type="text" = 20"
= 50">
– Balises supportées :
• <input type="text">
• <select>
• <textarea>
• <input type="password">
– Effets :
• onBlur : permet de savoir lorsque le champ perd le focus
• onFocus : permet de savoir lorsque le champ a le focus
51
Les évènements
Les changements
– Gestionnaire d’événement
• onChange
– Exemples :
<input type="text" value="votre nom" name="nom"
avez changé votre nom')">
– Balises supportées :
• <input type="text">
• <select>
• <textarea>
• <input type="password">
– Effets :
• Avertit du changement par rapport à ce qu’il y avait d’écrit dans
la zone d’écriture
52
Les évènements
La sélection
– Gestionnaire d’événement
• onSelect
– Exemples :
<form>
Select text: <input type="text" value="Hello world!"
have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
have selected some of the text.')">
Hello world!</textarea>
</form>
– Balises supportées :
• <input type="text">
• <textarea>
– Effets :
• Avertit de la sélection d’un champ
53
Les évènements
L’envoi
– Gestionnaire d’événement
• onSubmit
– Exemple :
<form name="testform" action=“function()" ' +
testform.fname.value +'!')"> What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
– Balises supportées :
• <input type="submit">
– Effets :
• L’événement se produit quand le bouton de soumission est
actionné
54
Les évènements
Le reset
– Gestionnaire d’événement
• onReset
– Exemple :
• <input type="reset" value="Effacer" name=”effacer”
efface tout !’) ;">
– Balises supportées :
• <input type="reset">
– Effets :
• En appuyant sur le bouton effacer, il remet dans la
zone de texte : votre nom
55
jQuery
Éléments du langage
56
jQuery
Introduction
– Bibliothèque JavaScript libre
– Permet de traverser et de manipuler facilement l'arbre
DOM des pages web à l'aide d'une syntaxe fortement
similaire à celle de Xpath
– Permet par exemple de changer/ajouter une classe
CSS, créer des animations, modifier des attributs, etc.
– Gère les événements JavaScript
– Fait des requêtes AJAX simplement
57
jQuery
Installation
– jQuery est tout simplement un fichier JavaScript
– Il vous suffit donc de le télécharger sur le site
officiel http://jquery.com
– Intégration dans la page Web
<script type="text/javascript" src="jquery.js"></script>
– Ou directement sur Google code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jqu
ery.min.js">
</script>
58
Squelette du fichier HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<!-- le contenu -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// c'est ici que l'on va tester jQuery
</script>
</body>
</html>
59
Exemple : helloworld.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Hello World avec jQuery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
Salut tout le monde !
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$('body').html('Hello World');
</script>
</body>
</html>
60
Commentaires
– Si « Hello World » s'affiche, tout va bien
– Si « Salut tout le monde ! » s'affiche, JavaScript est peut
être désactivé, jquery.js n'est pas dans le même dossier
que le code HTML, ou vous avez fait une erreur en
recopiant
61
jQuery
Fonction principale
– jQuery repose sur une seule fonction
: jQuery() (abrégée $())
– C'est une fonction JavaScript
– Elle accepte des paramètres
– Elle retourne un objet
C'est une fonction clé
– Elle focalise le traitement sur l'objet en paramètre :
• permet de le trouver
• d'appliquer dessus des propriétés et des méthodes
62
jQuery
$('tout-objet')
– $ accepte un sélecteur CSS en argument
– Le sélecteur peut être un identifiant :
• $('#nomID') // retourne un élément
document.getElementById
– Le sélecteur peut être une classe sélecteur
• $('.nomClasse') //retourne tous les éléments qui
correspondent à cette classe
– $ accepte plusieurs classes
• $('.article,.nouvelles,.edito') //retourne tous les
éléments qui correspondent à ces classes
63
jQuery
– $ accepte des sélecteurs spécifiques
• $(':radio'), $(':header'), $(':first-child')
– des sélecteurs en forme de filtres
• $(':checked'), $(':odd'), $(':visible')
– Plus fort :
• $(':contains(du texte)')
– des attributs
• $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
64
Exemple
65
Manipulation du contenu
Quelques méthodes sur l'objet sélectionné
– html()
• permet d'accéder au contenu de l'objet si on l'appelle
sans aucun argument,
• et permet de modifier le contenu de l'objet si on
l'appelle avec comme premier argument une chaîne
de caractères (représentant le contenu)
66
Exemple
– Pour ce code :
• <div id="titre">J'aime les frites.</div> :
– La méthode suivante :
• $('#titre'); // Sélectionne notre balise mais ne fait rien
• alert($('#titre').html()); // Affiche le contenu "J'aime les
frites."
• $('#titre').html('Je mange une pomme'); // Remplace
le contenu ("J'aime les frites.") par "Je mange une
pomme"
• $('#titre').html($('title').html()); // Remplace le contenu
par le titre de la page (contenu dans la balise <title>)
67
– text() :
• soit le code HTML suivant
<p id="premier">
<span class="texte">
Salut tout le monde
</span>
<img src="photo_1.jpg" alt="Premiere Photo !" />
</p>
• $('#premier').text()
renvoie "Salut tout le monde" (avec tous les
retours à la ligne et les espaces)
• $('#premier').text('<strong>les pommes</strong>')
change le contenu du paragraphe en :
<strong>les pommes</strong>
68
– replaceWith()
• permet de remplacer la balise et son contenu
• On peut lui passer du code html ou encore un objet
jQuery
• Ainsi
$('div').replaceWith('<span>Salut!</span>')
• transformera
<div>Bonsoir.. :)</div>
• en
<span>Salut!</span>.
69
– replaceWith()
• Plus complet !
// Remplace les liens <a>...</a> par <em>censuré</em>
$('a').replaceWith('<em>censuré</em>');
$('h1').replaceWith($('.titre:first'));
$('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>');
$('.recherche').replaceWith('<a
href="http://google.com">Google</a>');
– replaceAll
// Tous les <h1> vont être remplacés
$('#titre').replaceAll($('h1'));
// Revient à faire :
$('#titre').replaceAll('h1');
70
Insertion à l'intérieur et à l'extérieur : prepend() et append()
– $('span').prepend('balise span » ') transformera
<span>Hello World!</span>
– en
<span>balise span » Hello World !</span>
– $('span').append(' « balise span') : transformera
<span>Hello World !</span>
– en
<span>Hello World ! « balise span</span>.
71
– append ( contenu )
• Ajoute du contenu à l'intérieur des éléments spécifiés
• Exemple 1
Ajoute un objet jQuery à la suite du contenu de chaque
paragraphe
$("p").append( $("b") );
Code de test:
<p>I would like to say: </p><b>Hello</b>
Résultat:
<p>I would like to say: <b>Hello</b></p>
• Exemple 2
Ajoute du contenu HTML à la suite du contenu de
chaque paragraphe
$("p").append("<b>Hello</b>");
Code de test:
<p>I would like to say: </p>
Résultat:
<p>I would like to say: <b>Hello</b></p> 72
– After ( contenu )
• Insère du contenu après chaque élément de la sélection
• Exemple 1
Insère un élement à la suite des paragraphes.
$("p").after( $("#foo")[0] );
Code de test:
<b id="foo">Hello</b><p>I would like to say: </p>
Résultat:
<p>I would like to say: </p><b id="foo">Hello</b>
• Exemple 2
Insère un objet jQuery a la suite des paragraphes
$("p").after( $("b") );
Code de test:
<b>Hello</b><p>I would like to say: </p>
Résultat:
<p>I would like to say: </p><b>Hello</b>
73
– Before /after
• Insère du contenu avant les éléments retournés par la
recherche
• Exemple
Insère un objet jQuery (similaire à un tableau
d'élements DOM) avant tous les paragraphes
$("p").before( $("b") );
Code de test:
<p>I would like to say: </p><b>Hello</b>
Résultat:
<b>Hello</b><p>I would like to say: </p>
74
– insertAfter()/insertBefore()
• Insère tous les éléments définis par A après ceux définis
par B dans l'expression $(A).insertAfter(B). Equivaut à
$(B).after(A)
• Exemple
$("p").insertAfter("#foo");
Code de test:
<p>I would like to say: </p> <div id="foo">
Hello</div>
Résultat:
<div id="foo">Hello</div><p>I would like to say: </p>
75
– remove
• Supprime tous les élements de la DOM répondant aux
critères de sélection. Mais ne supprime PAS les élements
de l'objet jQuery, ce qui permet une utilisation de ces
élements même si ceux ci ne figurent plus dans le
document
• Exemple
$("p").remove();
Code de test:
<p>Hello</p> how are <p>you?</p>
Résultat:
how are
76
– Exemple : contenu-jquery-correction.html
• Soit le document HTML : contenu-jquery.html
• Proposez du code jQuery pour faire ces manipulations
enlever les liens ;
enlever le texte en gras ;
enlever le texte en italique ;
enlever le texte décoré ;
vider les boutons ;
voir le code ;
transformer les liens en boutons ;
dupliquer le texte ;
regrouper les liens ;
mettre des titres ;
regrouper les titres ;
colorer le texte ;
organiser sémantiquement le texte ;
77
– Exemple : contenu-jquery-correction.html
• <button sémantiquement le
texte</button>
• <button le texte</button>
• <button des titres</button>
• <button les liens en
boutons</button>
• <button le texte</button>
• <button les titres</button>
• <button les liens</button>
• <button les boutons</button>
• <button les liens</button>
• <button le texte en
gras</button>
• <button le texte en
italique</button>
• <button le texte
décoré</button>
• <button le code</button>
78
– Exemple : contenu-jquery-correction.html
function enleverLiens() {
$('#contenu a').remove();
}
function enleverGras() {
$('#contenu strong,#contenu b').remove();
}
function enleverItalique() {
$('#contenu em,#contenu i').remove();
}
function enleverDecor() {
$('#contenu *:not(html):not(body):not(p):not(button)').remove();
}
function viderBoutons() {
$('#contenu button').empty();
} 79
function voirCode() {
$('#contenu p').text($('p').html());
}
function liensEnBoutons() {
$('#contenu a').wrap('<button></button>');
}
function dupliquerTexte() {
$('#contenu p').clone().appendTo('#contenu');
}
function regrouperLiens() {
$('#contenu a').wrapAll('<div></div>');
}
function mettreTitres() {
$('#contenu .titre1').wrap('<h1></h1>');
$('#contenu .titre2').wrap('<h2></h2>');
} 80
function regrouperTitres() {
$('h1').wrapAll('<div></div>');
$('h2').wrapAll('<div></div>');
}
function colorer() {
$('#contenu .rouge').wrap('<span style="color:red"></span>');
$('#contenu .vert').wrap('<span style="color:green"></span>');
$('#contenu .orange').wrap('<span style="color:orange"></span>');
$('#contenu .bleu').wrap('<span style="color:blue"></span>');
}
function semantique() {
$('#contenu .italique').wrap('<i></i>');
$('#contenu .gras').wrap('<b></b>');
$('#contenu .souligne').wrap('<u></u>');
$('#contenu .barre').wrap('<del></del>');
}
81
jQuery et le DOM
Objet jQuery
– La fonction principale ($()) renvoie un objet jQuery à
partir duquel on peut naviguer dans l'arborescence
Élément du DOM
– $('body')[0] désigne le premier élément de l'objet
jQuery résultant de l'appel à la fonction principale
– Exemple
// Renvoie 'body'
$('body')[0].tagName.toLowerCase();
82
Exemple complet
// Déclaration d'un objet // Ce sont des variables comme les autres
var objet = {}; // donc je mets ce que je veux !
// Déclaration d'attributs objet.length = 'Moi aimer frites !';
objet.variable1 = 'Hello'; objet.selector = 89;
objet['variable2'] = 'World';
// Affiche 'Hello World'. Les éléments ([0], [1] etc.) contenus dans
alert(objet.variable1+' '+objet.variable2); un objet jQuery sont donc des attributs
de cet objet
// On ne peut pas utiliser le point
// car une variable ne commence
// jamais par un chiffre
objet[0] = 'premier élément';
// [0] ou ['0'] reviennent au même
objet['1'] =
document.getElementById('titre');
// Affiche 'premier élément'.
alert(objet[0]);
// Affiche 'titre' si la balise existe
alert(objet[1].id);
83
Quelques méthodes
Parents et enfants
– parents() renvoie l'ensemble des éléments parents
– parent() l'élément parent direct
– children() renvoie les éléments enfants directs
84
Exemple // Affiche 'HTML'.
<html> alert($('body').parent()[0].tagName);
<head> // Affiche 'HEAD'.
<script type="text/javascript" alert($('title').parents()[0].tagName);
src="http://ajax.googleapis.com/aj
ax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
</div>
</body>
</html>
85
jQuery et le DOM
Créer des éléments
– Au lieu de
• document.createElement('balise') ;
– On utilise
• $('<balise/>')
– Par exemple
• $('<h1 />') crée un titre de niveau 1
86
Exemple $(function(){
<html> document._createElement =
<head> document.createElement;
<script type="text/javascript" document.createElement = function(balise){
src="http://ajax.googleapis.com/ajax/lib alert(balise+' créée !');
s/jquery/1.3.2/jquery.min.js"></script> document._createElement(balise);
<style type="text/css" media="all"> };
</style> });
</head> function essai1(){
<body> $('<span/>');
<div id="contenu"> }
<button function essai2(){
1</button>
$('<span />');
<button > }
2</button>
function essai3(){
<button > 3</button> $('<span></span>');
<button }
4</button> function essai4(){
</div> $('<span>Super contenu :p </span>');
</body> }
</html>
87
jQuery et le DOM
Les attributs
// Renvoie l'attribut 'title'
// de l'élément ayant comme id 'titre'
$('#titre').attr('title');
// Écrit après #titre son attribut 'title'
$('#titre').after($('#titre').attr('title'));
//donne la valeur 'le site…' à l'attribut 'title'
$('div.header_gauche img').attr('title','le Site du Zér0');
88
jQuery et le DOM
Les formulaires
<input type="text" id="texte" value="Salut!" />
<textarea id="zonetexte">Ceci est une
zone de texte !</textarea>
<input type="radio" name="choixradio" value="Radio 1" />Radio 1
<input type="radio" name="choixradio" value="Radio 2" />Radio 2
<input type="radio" name="choixradio" value="Radio 3" />Radio 3
<select id="choixselect">
<option>Select 1</option>
<option>Select 2</option>
<option>Select 3</option>
</select>
89
jQuery et le DOM
Les formulaires
// Renvoie 'Salut!'.
$("#texte").val();
90
jQuery et le DOM
Boucler sur des éléments
– each() sur un objet jQuery
– Exemple
91
Exemple
<html>
<head>
<script type="text/javascript" //fonction anonyme
src="http://ajax.googleapis.com/ajax/lib
$(function(){
s/jquery/1.3.2/jquery.min.js"></script>
$('#contenu a').each(function(i){
<style type="text/css" media="all">
$(this)
</style>
.prepend('<small>Lien n°'+(i+1)+'
</head>
»</small> ')
<body>
.append(' <small>«
<div id="contenu"> '+$(this).attr('href')+'</small>');
<a href="http://www.google.fr">Google });
France</a>
});
<a href="http://www.siteduzero.fr">Site du
Zéro</a>
<p>Paragraphe.<br />Comment allez-
vous ?
<q>petite citation</q>
</p>
<a href="http://jquery.com">Faites un tour
sur jQuery.com !</a>
</div>
</body>
</html> 92
Exemple
<html>
<head>
<script type="text/javascript" //each() avec des données
src="http://ajax.googleapis.com/ajax/lib $.each([
s/jquery/1.3.2/jquery.min.js"></script>
0,1,1,2,3,5,8,13,21
<style type="text/css" media="all">
],function(n){
$('#contenu').append(n+'ème nombre
de Fibonacci : '+this+'<br />');
</style>
});
</head>
//Résultats
<body>
0ème nombre de Fibonacci : 0
<div id="contenu">
1ème nombre de Fibonacci : 1
2ème nombre de Fibonacci : 1
3ème nombre de Fibonacci : 2
</div> 4ème nombre de Fibonacci : 3
</body> 5ème nombre de Fibonacci : 5
6ème nombre de Fibonacci : 8
</html>
7ème nombre de Fibonacci : 13
8ème nombre de Fibonacci : 21
93
Exemple
<html> /each() avec un tableau
<head> var tableau = [
<script type="text/javascript" 'Bonjour, comment vas-tu ?',
src="http://ajax.googleapis.com/ajax/lib "Aujourd'hui, il fait beau !",
s/jquery/1.3.2/jquery.min.js"></script> $('q:first').text()
<style type="text/css" media="all"> ]
,chaine = '';
$.each(tableau,function(n,texte){
</style>
chaine += 'Texte n°'+(n+1)+' :
</head> '+texte+'\n';
<body> });
<div id="contenu"> $(function(){
$('<pre></pre>')
<q>Un petit pas pour .html(chaine)
l'<strong>homme</strong> !</q>
.appendTo('#contenu');
<q>Et un grand pas pour
});
l'<strong>humanité</strong> !</q>
</div> //Résultat
</body> Un petit pas pour l'homme ! Et un
grand pas pour l'humanité !Texte
</html> n°1 : Bonjour, comment vas-tu ?
Texte n°2 : Aujourd'hui, il fait beau !
Texte n°3 : Un petit pas pour
l'homme ! 94
Les événements
Fonctionnement
– jQuery dispose de méthodes simples pour attacher des
événements à des fonctions (ou « écouter un
événement »)
95
Les événements
Ce qu'on utilisait avant :
element.addEventListener('evenement',function(){
// Action
});
// ou
element. > // Action
};
En jQuery
– Les événements seront créés grâce à des méthodes ayant pour nom
le type de l'événement, l'argument étant lafonction de retour
// Écoute d'un événement
elements_jQuery.evenement(function(){
// Action
});
96
Les événements
Toutes les fonctions que l'on va voir sont sans argument
Utilisation dans un formulaire
– Sélection
• select est déclenché lorsque du texte est sélectionné
dans un <input type="text" /> ainsi que dans
un <textarea></textarea>
– Exemple
$(':text,textarea').select(function(){
alert($(this).val());
});
97
– Changement
• Change est déclenché lorsque un champ <input …> est
changé
– Exemple
$(':input').change(function(){
alert($(this).val());
});
98
– Soumission du formulaire
• submit est déclenché lorsqu'un formulaire est soumis par,
par ex. <input type="submit" />
– Exemple
$('form[name="inscription"]').submit(function(){
if($('form[name="inscription"] :password:first').val().length < 6){
alert('Veuillez rentrer au moins 6 caractères dans votre mot de
passe');
return false;
}
});
99
Focalisation
– focus est déclenché lorsqu'un élément d'un formulaire est «
focalisé » par l'utilisateur, soit en cliquant dessus, soit grâce
aux raccourcis du navigateur qui permettent de parcourir la
page (les tabulations par exemple)
– Syntaxe
$(':input').focus(function(){
$(this).css('background-color','#00f');
});
$(':input').blur(function(){
$(this).css('background-color','#f00');
});
100
Événements
Touches
– L'appui sur une touche se décompose en trois étapes successives :
• keydown : enfoncement de la touche
• keypress : maintien de la touche enfoncée
• keyup : relâchement de la touche
– Le premier argument de la fonction de retour passée en paramètre est
un objet contenant des informations sur la touche appuyée
– Un attribut which ou keyCode (dépend du navigateur) désigne le
numéro de la touche appuyée
– Syntaxe
$(document).keypress(function(evenement){
// Si evenement.which existe, codeTouche vaut celui-ci.
// Sinon codeTouche vaut evenement.keyCode.
var codeTouche = evenement.which || evenement.keyCode;
alert(codeTouche);
});
101
Événements
Souris
– Clics de souris
• Un clic de souris se décompose en trois étapes
successives :
mousedown : enfoncement de la souris
mouseup : relâchement de la souris ;
click : clic de la souris
• Le premier argument de la fonction de retour passée en
paramètre est un objet contenant des informations sur la
touche appuyée, pageX pour la position X et pageY pour la
position Y
102
– Exemple
• Récupérer la position du clic
jQuery
$(function(){
$(document).mousedown(function(clic){
$('#posX').text('Position X : '+clic.pageX);
$('#posY').text('Position Y : '+clic.pageY);
});
});
HTML
<span id="posX"></span>
<span id="posY"></span>
103
Autre exemple $(function(){
<html>
<head> $(document).mousedown(function(c
<script type="text/javascript" lic){
src="http://ajax.googleapis.com/a $('#posX').text('Position X :
jax/libs/jquery/1.3.2/jquery.min.js" '+clic.pageX);
></script>
$('#posY').text('Position Y :
<style type="text/css" '+clic.pageY);
media="all">
});
</style>
</head>
});
<body>
Résultat
<div id="contenu">
Position X : 238 Position Y : 157
<span id="posX"></span>
<span id="posY"></span>
</div>
</body>
</html>
104
Autre exemple $(function(){
<html> $('*')
<head> .mousedown(function(){
<script type="text/javascript" $('#contenu')
src="http://ajax.googleapis.com/ajax/l .css('background-color','#f00')
ibs/jquery/1.3.2/jquery.min.js"></scrip .append('<span style="color: #f00">
t> Down!</span>'); })
<style type="text/css" media="all"> .mouseup(function(){
body{cursor: pointer;} $('#contenu')
#contenu{padding: 24px; .css('background-color','#00f')
cursor: pointer;} .append('<span style="color: #00f">
#contenu span{ Up!</span>');})
background-color: #fff;} .click(function(){
</style> $('#contenu')
</head> .css('background-color','#f0f')
<body> .append('<span style="color: #f0f">
<div id="contenu"> Clique!</span>');})
</div> .dblclick(function(){
</body> $('#contenu')
</html> .css('background-color','#0ff')
.append('<span style="color: #0ff">
Double Clique!</span>');
});
105
Résultat
106
Mouvements de souris
– La souris peut entrer au dessus d'un élément, bouger sur cet
élément et enfin partir de cet élément.
– On distingue donc :
• mouseenter : la souris entre au-dessus de l'élément ;
• mouseleave : la souris quitte l'élément
• mouseover : la souris entre au-dessus de l'élément ou un de
ses enfants
• mouseout : la souris quitte l'élément ou un de ses enfants
• mousemove : la souris bouge sur l'élément
– Le premier argument de la fonction de retour passée en paramètre
est un objet contenant des informations sur la touche
appuyée, pageX pour la position X et pageY pour la position Y
107
Exemple jQuery
<html> $(function(){
<head> $(document).mousemove(functio
<script type="text/javascript" n(clic){
src="http://ajax.googleapis.co $('#posX').text('Position X :
m/ajax/libs/jquery/1.3.2/jquery. '+clic.pageX);
min.js"></script>
$('#posY').text('Position Y :
<style type="text/css" '+clic.pageY);
media="all">
});
</style>
});
</head>
<body>
<div id="contenu">
<span id="posX"></span>
<span id="posY"></span>
</div>
</body>
</html>
108
Gérer des événements
Fenêtre
– Défilement
• scroll est déclenché lorsque l'utilisateur utilise un ascenseur
horizontal ou vertical
$(document).scroll(function(){
alert('Arrête de me défiler !');
});
– Redimensionnement
• resize est déclenché lorsque l'utilisateur redimensionne la
fenêtre en utilisant les poignées par exemple, mais aussi
en réduisant sa fenêtre
• Pour l'utiliser sur la fenêtre principale du navigateur il faut
appliquer la méthode sur $(window) et non $(document)
$(window).resize(function(){
alert('Arrête de me redimensionner !');
});
109
D'autres événements utiles
– Quand le document est prêt
• Code
$(document).ready(function(){
alert('Le document est prêt !');
});
– Quand on quitte la page
• unload est déclenché lorsque l'utilisateur quitte la page.
Vous ne pouvez pas faire grand chose à ce stade là au
niveau de l'utilisateur à part envoyer une alerte
• Code
$(document).unload(function(){
alert('Au revoir et à bientôt !');
});
•
110
Créer des animations
animate(style, [duration], [easing], [complete])
– Permet d'animer le style CSS de vos éléments
– Paramètres
• style (objet contenant des couples attribut/valeur CSS) :
le style de l'élément à la fin de l'animation
• duration (entier ou chaîne de caractères) (durée) :
un entier positif qui est le nombre de millisecondes
représentant la durée de l'animation
• easing (chaîne de caractères) (évolution) :
"swing" , "linear"
• complete (fonction) (fonction de retour) :
une fonction appelée quand l'animation d'un élément
est finie
– Exemple : animate.html, animate-jq.html
111
jQuery HTML
<html>
$('#anim1').click(function(){
<head>
$('#contenu p')
<script type…"></script>
.css('width','400px') <style type="text/css" media="all">
.animate({width : '500px'}); #contenu p{
}); width: 400px;font-size: 20px;color: #d22;
line-height: 30px;border: 1px dashed #00f;}
#contenu p span{ padding: 2px;
$('#anim2').click(function(){
background-color: #aaa;color: #000;}
$('#contenu p span').animate({
#contenu p strong {text-decoration:
padding : '50px', opacity : 0.4}, underline;
'slow','linear'); padding: 0;border-left: 2px solid #00f;}
}); </style>
</head>
$('#anim3').click(function(){ <body>
$('#contenu p strong') <div id="contenu">
<p>jQuery est une <span>bibliothèque
.animate({fontSize : '2em', <strong>JavaScript</strong>…
paddingLeft : '50px' }, </p>
2000,function(){ <button id="anim1">Animation 1</button>
alert('fini ! '); <button id="anim2">Animation 2</button>
}); <button id="anim3">Animation 3</button>
}); </div>
</body>
</html> 112
Créer des animations
Agir sur le style CSS
– On peut agir sur les paramètres CSS pour les modifier
dynamiquement
113
Agir sur le style CSS
On peut agir sur les paramètres CSS pour les modifier
dynamiquement
jQuery HTML
$('#plus').click(function(){ #rectangle
$('#rectangle').animate({ {
width : '+=32px' position: relative; display: block;
width: 512px;height: 48px;
},1000,'linear');
padding: 8px;color: #fff;
}); background-color: rgb(144,96,128);
}
$('#moins').click(function(){ </style>
$('#rectangle').animate({ </head>
width : '-=32px' <body>
},1000,'linear'); <div id="contenu">
}); <div id="rectangle">Salut
!</div><br />
<button id="plus">Plus !</button>
<button id="moins">Moins
!</button>
</div> 114
– Animer des ascenseurs
Utiliser attributscrollTop et / ou scrollLeft afin de faire
défiler le contenu de l'élément
Ceci ne marche qu'avec des éléments qui ont un
ascenseur et qui peuvent défiler
115
jQuery HTML
$('body') <html>
.animate({ scrollTop : '800px'}, <head>
<script …"></script>
5000);
<style type="text/css" media="all"></style>
</head>
<body>
<div id="contenu">
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
…
</div>
</body>
</html> 116
Créer des animations
Agir sur l'évolution d'une animation
– On agit sur les attributs de styles pour les faire évoluer au
cours du temps
– linear :
• les attributs évoluent proportionnellement par
rapport au temps
– swing :
• les attributs démarrent de façon moins
brusque que linear pendant la première moitié de
l'animation puis arrivent de façon moins
brusque vers leurs valeurs finales
117
jQuery HTML
<html>
$('#go').click(function(){ <head>
$('#linear') <script …"></script>
.css('width','0px') <style type="text/css" media="all">
#conteneur{position: relative;display: block;
.animate({ width : '90%' }, margin: 24px;}
4000,'linear' #conteneur div{position: relative; display: block;
width: 100%;margin: 0;color: #fff;width: 90%;
); border: 1px solid #000;}
$('#swing') #linear{background-color: rgb(144,96,128);
padding: 16px;}
.css('width','0px')
#swing{background-color: rgb(96,128,144);
.animate({ width : '90%' }, padding: 16px;}
4000,'swing' </style>
</head>
); <body>
}); <div id="contenu">
<div id="conteneur">
<div id="linear">Linear</div>
<div id="swing">Swing</div>
</div>
<button id="go">Lancer les animations
</button>
</div>
</body>
</html> 118
Créer des animations
Agir sur la durée
– En jQuery, la durée de l'animation est toujours
définie (sinon c'est "normal", soit 400 millisecondes)
– Pour modifier cette durée, il faut agir sur l'attribut
correspondant
– On appelle cela : évolution par l'attribut
– Une des nouveautés de la version 1.4 est de
pouvoir attribuer une évolution à chaque attribut CSS
119
Créer des animations
Agir sur la durée
– Exemple
$('p')
.css('width','400px')
.animate({
width : [ '800px' , 'linear' ], opacity : 0.5
},
'linear');
$('p span')
.animate({padding : '50px', fontSize : '28px'},
{ duration : 'slow', easing : 'swing',
specialEasing : {fontSize : 'linear'}
});
120
Gérer les animations
Utiliser les effets
– Tous les effets utilisent l'évolution swing
– Visibilité
• show()
permet d'afficher les éléments en question
• hide()
permet de cacher les éléments en question
• toggle()
permet de jongler entre la présence ou l'absence de
l'élément (si l'élément est caché, l'afficher, sinon le
cacher)
• Exemple
// Utilisé pour afficher / cacher une balise secret.
$('blockquote.secret').toggle('normal');
121
– Ces trois méthodes peuvent
• ne prendre aucun argument
pas d'animation et tout se fait de façon brute
• ou les arguments classiques cités plus haut :
la hauteur, la largeur et l'opacité changent de
manière progressive
– On peut utiliser toggle() avec les arguments classiques
ou avec un seul argument, un booléen qui, à true affiche
l'élément avec show(), mais qui à false cache l'élément
avec hide()
– Exemple
• $('a').toggle( true ); // affiche les liens
• $('textarea').toggle( false ); // cache les zones de texte
• // affiche ou cache les paragraphes selon que la checkbox
soit cochée ou non
• $('p').toggle( $('#afficherParagraphes').attr( 'checked' ) );
122
Glissement
– slideDown() permet de dérouler verticalement les
éléments en question
– slideUp() permet d'enrouler verticalement les éléments
en question
– slideToggle() permet de jongler entre la présence ou
l'absence de l'élément (si l'élément est caché, le
dérouler, sinon l'enrouler)
Disparition
– fadeIn() : fait apparaître les éléments en modifiant
l'opacité de manière progressive
– fadeOut() : fait disparaître les éléments en modifiant
l'opacité de manière progressive
– fadeTo() : modifie l'opacité des éléments sélectionnés et
permet de lancer une fonction à la fin de l'animation
123
Exemple sur les HTML
paramètres CSS <html>
jQuery <head>
<script …"></script>
$('#boite').animate({
<style type="text/css" media="all">
// width ? => width 0
#boite{width: 800px;
width : 'toggle'
background-color: #000;
// height ? => height 200 color: #fff;
, height : '200px' }
},4000); </style>
</head>
$('#boite').animate({ <body>
// width 0 => width 800 <div id="contenu">
width : 'toggle' <div id="boite">Une boite
!</div>
// height 0 => height 200
</div>
, height : 'toggle' </body>
},2000); </html>
124
Contrôler les animations
Sélecteur d'animations
– Le sélecteur :animated permet de filtrer les éléments qui
sont animés au moment où la fonction s'exécute
125
jQuery HTML
function ajouterEtEnleverClasseAnime(){ #contenu div{
// ajouter la classe 'anime' aux éléments background-color: #fff; position: absolute;
animés width: auto;height: 64px; top: 200px;left: 200px;
$('#contenu border: 1px solid #000;z-index: 50;}
div:animated').addClass('anime');
#contenu div button {width: 100%; height: 40px;
$('#contenu margin: 12px 0; color: #000; padding: 0 12px;
div:not(:animated)').removeClass('ani cursor: pointer;}
me'); #contenu div.anime{ background-color: #00f;
} border-color: #fff;}
function animerBoite( n ){
#contenu div.anime button{ background-color: #00f;
var
border-color: #00f; color: #fff;}
x = Math.floor( Math.random() * 500 )
</style>
// nombres aléatoires entre 0 et 499,
</head>
y = Math.floor( Math.random() * 500);
<body>
$( '#boite' + ~~n ).animate({
<div id="contenu">
top : y, left : x
<button
} , 2000 ); // l'animation dure 2 secondes
à
} jour</button>
// met à jour tous les 500 millisecondes <div id="boite1"><button 1
setInterval( );">Animer!</button></div>
ajouterEtEnleverClasseAnime , 500 ); <div id="boite2"><button 2
);">Animer!</button></div>
<div id="boite3"><button 3
);">Animer!</button></div>
</div>
126
Gérer les animations
Stopper les animations
– stop([ viderLaQueue, allerALaFin ])
• viderLaQueue (booléen) :
Si à true : stoppe l'animation en cours et celles à venir
(qui sont présentes dans la queue)
Si à false : (par défaut), stoppe seulement la première
animation de la queue. Les autres animations dans la
queue commenceront tout de suite
• allerALaFin (booléen) :
Si à true : ne stoppe pas l'animation, mais la fait aller à
sa fin : l'élément concerné aura donc son style final et
la fonction de retour sera appelée
Si à false (par défaut) : stoppe l'animation et ne fait
rien de spécial
– Exemple : stpper-anim.html
127
Gérer les animations
Gestion de files d'attente
– On peut gérer une ou plusieurs files d'attentes par lancement,
mise en attente de plusieurs animations
– Explorer cela par vous-mêmes
128
Gérer les événements
Vocabulaire des événements
– Quand un événement est déclenché sur un élément, et qu'il
faut associer une fonction à appeler lors de ce
déclenchement, on dit qu'on « écoute » un événement
– On lie, ou on attache (« to bind ») une fonction à un type
d'événement bien déterminé sur un élément. L'élément en
question est alors « écouté » sur ce type d'événement
– On supprime, on délie ou on détache (« to unbind ») une
fonction à un type d'événement sur un élément lorsqu'on
enlève l'appel à la fonction lors du déclenchement de
l'événement sur cet élément
– La fonction de retour est appelée un « écouteur » d'événement
(addEventListener() signifie « ajouter un écouteur d'événement
» !).
129
Gérer les événements
Écouter
– Les méthodes vues, comme click() ou mouseenter(),
permettent de lier un événement à une fonction :
• on appelle ça un écouteur d'événement.
• bind() permet de généraliser cela en lui passant en
premier argument une chaîne de caractères
représentant tous les événements (séparés par des
espaces) à lier avec la fonction passée en
paramètre
130
jQuery HTML
$(function(){
<html>
$('#contenu p, #contenu textarea')
<head>
.bind('mouseenter focus',function(){
<script …></script>
$(this).css('border-color','#222');
<style …>
})
#contenu p, #contenu textarea{
.bind('mouseleave blur',function(){
border: 1px solid #bbb;}
$(this).css('border-color','#bbb');
</style>
});
</head>
$('#contenu q').bind('dblclick',function(){
<body>
if($(this).attr('auteur')){
<div id="contenu">
alert("L'auteur de cette citation est
"+$(this).attr('auteur')+' !'); <p>Yipii!</p>
} <q auteur="Martin Luther King">I
have a dream</q>
}); <br /><br />
}); Appuyer sur
<code>[TAB]</code><br />
<textarea>
</div>
</body>
</html>
131
Gérer les événements
Supprimer
– unbind() permet d'enlever l'écouteur d'événement créé
préalablement avec bind()
– nom de l'événement ( unbind('click')) : supprime tous les
écouteurs du type de l'événement
– nom de l'événement et fonction ( unbind('click',fonction)):
supprime juste un écouteur bien précis pour ce type
d'événement
132
jQuery HTML
$(function(){
$('#contenu a:not(.interne)').click(function(){ <html>
alert('adresse du lien : '+$(this).attr('href')); <head>
$(this).unbind('click'); <script type="text/javascript"
return false;}); src="http://ajax.googleapis.com/ajax/l
$('#contenu textarea') ibs/jquery/1.3.2/jquery.min.js"></scrip
.focus(zoneTexte) t>
.focus(function(){$(this).after('<br />Clic !'); }) <style type="text/css" media="all">
.blur(function(){$(this).css('background- </style>
color','#ff8');})
</head>
.one('dblclick',function(){$(this).after('<br
/>Double Clic !'); <body>
$(this) <div id="contenu">
.unbind('focus',zoneTexte) <button
.unbind('blur');});}); > tenu textarea').unbind() !</button><br
function zoneTexte(){ />
$(this).css('background-color','#f8f'); <a
} href="http://www.siteduzero.com/">Si
te du Zér0</a><br />
function unbindZoneTexte(){ <textarea>
$('#contenu textarea').unbind(); </div>
}
</body>
</html>
133
Gérer des événements
Attacher plusieurs événements en même temps
– Une des nouveautés de la version 1.4 est de pouvoir
donner un objet en argument à bind(), contenant
des couples nom de l'événement / fonction de retour
attachée
– Exemple
$('h1')
.bind({ mouseenter: function(){$(this).css('color','#000');
}
, mouseleave: function(){$(this).css('color','#00f');
}
, click: function(){ $(this).css('color','#ff0');
}
});
134
Gérer des événements
Déclencher
– On peut déclencher virtuellement des événements
sur des éléments sans avoir pour autant l'aval de
l'utilisateur
– trigger()
• trigger() permet de déclencher un événement,
produisant l'action par défaut du navigateur ainsi
que celle que vous avez définie
• Les méthodes utilisées plus haut qui pouvaient être
appelées sans argument sont donc le raccourci
d'un appel à trigger()
135
jQuery HTML
$(function(){
<html>
$('#contenu :text') <head>
.focus(function(){ <script type="text/javascript"
$(this).trigger('click'); src="http://ajax.googleapis.com/ajax/l
}) ibs/jquery/1.3.2/jquery.min.js"></scrip
.click(function(){ t>
$(this).after('<br />clic !'); <style type="text/css" media="all">
});
});
</style>
</head>
<body>
<div id="contenu">
136
Gérer des événements
– triggerHandler()
• triggerHandler() agit presque de la même manière
que trigger() sauf qu'elle n'actionne pas le
mécanisme par défaut du navigateur (par exemple
quand un champ gagne le « focus », le texte du
champ est sélectionné et on peut écrire), mais
appelle seulement la fonction qu'on a définie
137
Gérer des événements
Nos propres événements
– On peut créer nos propres événements
138
jQuery HTML
$(function(){
<html>
$('#contenu a') <head>
.bind('lien',function(){ <script …"></script>
alert('Vous aller vers '+$(this).attr('href')+' !'); <style type="text/css" media="all">
}) </style>
.click(function(){
</head>
if(!$(this).hasClass('interne')){
$(this).trigger('lien'); <body>
} <div id="contenu">
}); <a
href="http://www.siteduzero.com">Sit
}); e du Zér0</a><br />
<a href="http://www.jquery.com">Site
officiel de jQuery</a>
<a href="http://www.google.fr">Google.fr
!</a> <a class="interne"
href="http://moi.free.fr">Mon
site!!!</a>
</div>
</body>
</html>
139