Vous êtes sur la page 1sur 139

Langages ct Client

JavaScript - jQuery

Introduction

JavaScript

Qualits :

Disponible sur les navigateurs actuels et gratuit

Dfauts :

A. Belad

Langage de script incorpor dans le HTML


Historiquement, premier langage de script pour le Web
Apporte des amliorations au HTML
HTML permet d'crire
JavaScript permet de programmer, c'est--dire de
grer l'information

Interprt et donc trs lent, pas de dbogueur

Introduction

A quoi ressemble un script ?

A. Belad

Cest une portion de code qui vient s'insrer dans une


page HTML
Le code du script n'est toutefois pas visible dans la
fentre du navigateur car il est compris entre des balises
(ou tags) spcifiques qui signalent au navigateur qu'il
s'agit d'un script crit en langage JavaScript
Balises annonant le code Javascript :
<SCRIPT language="Javascript">
Placez ici le code de votre script
</SCRIPT>

Variables

Dclaration
<script language="JavaScript">
var date; // Dclaration sans affectation
var compteur=0; // Dclaration avec affectation
toto='coucou'; // Dclaration implicite par affectation
var prem, second; // variables spares par des virgules
monNombre = new Number(); // Dclaration type sans
affectation
e = new Number(2.71828); // Dclaration type avec
affectation
var maChaine = new String(); //Dclaration de chane
var toto = new Boolean(true); //Dclaration de boolen
</script>

A. Belad

Tableau

Array

A. Belad

Le type des lments : nombres, chanes, boolens, ...


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 chanes, de dimension 1, indic de 0 6 :
Jour=new Array(7);
Jour[0]='Dimanche' ;
Jour[1]='Lundi' ;
Jour[2]='Mardi' ; //...
Jour[6]='Samedi' ;
// En numrant les lments :
jour=new Array('dimanche','lundi','mardi', ...
,'vendredi','samedi');
</script>

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. Belad

Association avec un formulaire

Utilisation dans un formulaire

A. Belad

Schma dutilisation

body :
Contient la dfinition du formulaire
Il fait appel aux variables et fonctions dfinies
dans le head

head :
Contient les fonctions

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 anne sommes-nous ? ', 2000);
alert('Vous avez rpondu : ' + annee) }
</script>
</head>
<body>
<form>
<input type="button" value="En quelle annee ? "
onClick="lireAnnee()">
</form>
</body>
</html>

A. Belad

Association avec un formulaire


Lire/crire : lire-ecrire-form0.html

A. Belad

Exemple 1 :

DOM

Notion dobjet en Javascript

A. Belad

Le Javascript traite les lments qui s'affichent dans


votre navigateur comme des objets, c'est--dire des
lments :
classs selon une hirarchie pour pouvoir les
dsigner prcisment
auxquels sont associes des proprits et des
actions (mthodes)

10

Les objets

Comment JavaScript dfinit les objets ?

A. Belad

Javascript divise la page du navigateur en lments (objets),


afin de permettre d'accder n'importe lequel d'entre eux et de
pouvoir les manipuler par l'intermdiaire de leurs proprits
On commence gnralement par l'objet le plus grand (celui
contenant tous les autres) puis on descend dans la hirarchie
jusqu' arriver l'objet voulu
L'objet le plus grand est l'objet fentre : window
Dans la fentre s'affiche une page, c'est l'objet document
Cette page peut contenir plusieurs objets, comme
des formulaires,
des images, etc.

11

Les objets

Lobjet Navigator

A. Belad

a plusieurs proprits concernant votre navigateur


appName :
connatre le nom : Netscape, IE, Mozilla
appVersion :
connatre la version
language :
FR, AN
platform :
windows, Linux
Pour le savoir : excuter :
<script language="Javascript">
document.write(navigator.proprit); //o proprit =
//platform
</script>
12

Lobjet Navigator

Exemple dutilisation de Navigator


Nom = navigator.appName;
if (Nom == 'Netscape') {
placer ici les instructions excuter s'il s'agit de
Netscape Navigator 4 ou suprieur }
if (Nom == 'Microsoft Internet Explorer') {
placer ici les instructions excuter s'il s'agit de
Microsoft Internet Explorer 4 ou suprieur
}

A. Belad

13

Les objets

Lobjet Window

A. Belad

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-mme
l'objet location :
le lieu de stockage de la page
l'objet history :
les pages visites prcdemment
l'objet frames :
les cadres (division de la fentre en sousfentres)

14

Lobjet Window

Lobjet Window

A. Belad

Proprits :
Frames[] : tableau de cadres contenus
Length : nombre de cadres (nombre d'lments du tableau
frames
Name : nom de la fentre dans laquelle on se trouve
Parent : fentre qui englobe celle dans laquelle on se
trouve
Mthodes :
alert(), confirm() et prompt() : font apparatre une bote de
dialogue
open(), et close() : permettent l'ouverture et la fermeture de
fentres
Plusieurs exemples sous :
http://fr.selfhtml.org/javascript/objets/window.htm

15

Lobjet Window

Proprit defaultStatus

affiche dans la barre d'tat de la fentre 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>

A. Belad

http://fr.selfhtml.org/javascript/objets/window.htm#closed

16

Lobjet Window

Proprits innerHeight, innerwidth

A. Belad

permettent de fixer au cours de lexcution la hauteur et


la largeur de la fentre
<html>
<head><title>Test</title>
<script type="text/javascript">
window.innerHeight = 300;
</script>
</head>
<body>
</body>
</html>

17

Lobjet Window

La mthode open ()

Cette fonction ouvre une nouvelle fentre

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 laffichage de
lextrieur

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 fentre </a><br>
</body>
</html>

A. Belad

Pour ouvrir une fentre une position donne : ajouter les attributs:
top=px, et left=px
18

Lobjet Window

la mthode close () :

A. Belad

<a href="javascript:mafenetre.close()">fermer la
fentre</a>
En cliquant sur ce lien, cela ferme la fentre
prcdemment ouverte avec le nom mafenetre

19

Lobjet Window

Vrification de ltat de la fentre

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 fentre a t ferme"); else
alert("La fentre est encore ouverte"); }
//-->
</script>
</head>
<body>
<a href="javascript:CheckOpen()">La fentre est-elle
ferme?</a>
</body>
</html>

A. Belad

20

Lobjet Window

Fermeture automatique dune fentre, aprs 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>

A. Belad

21

Les objets

Lobjet document

A. Belad

lment majeur, permet de rcuprer des informations d'un


formulaire, crer des calques et les dplacer, crire du texte...
Proprits :
document.fgColor, permet de rcuprer et de changer la
couleur du texte de votre page HTML
document.fgColor = "#993333";
document.bgColor, permet de rcuprer et de changer la
couleur de fond de votre page HTML
document.lastModified, permet de savoir quand la page
html a t modifie
document.lastModified;
Internet explorer renvoie : 11/07/2000 19:41:00
Netscape renvoie : Tuesday, November, 7 /2000
19:41:00

22

Lobjet document

A. Belad

document.linkColor
permet de rcuprer et de changer la couleur des liens de
votre page HTML
document.location
permet de rcuprer 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 rcuprer et changer les images de votre page
HTML
document.forms[ ]
permet de rcuprer et changer les informations de votre
formulaire

23

Lobjet document

Dernire date de modification

A. Belad

Donne la date de la dernire modification du document


<html>
<head><title>Test</title></head>
<body>
<script type="text/javascript">
document.write("dernire mise jour: " +
document.lastModified);
</script>
</body>
</html>

24

Lobjet document

Contenu dune balise

A. Belad

Permet de rcuprer 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

Lobjet document

Rcupration de lURL 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>

A. Belad

26

Le formulaire

Lobjet : forms

A. Belad

Avec l'objet forms, qui se trouve sous l'objet document


dans la hirarchie JavaScript, vous avez accs aux
formulaires dfinis dans un fichier HTML
Syntaxe :
document.forms["nom_formulaire"].proprit
document.forms["nom_formulaire"].mthode
Plusieurs exemples sous :
http://fr.selfhtml.org/javascript/objets/forms.htm

27

Le formulaire

Exemple

A. Belad

Il sagit daccder la case cocher pour modifier le


contenu de la zone du texte en inscrivant : case coche ou
case non coche
La modification se fera par la fonction ModifChamp();
On dclare la case cocher et la zone texte comme suit :
<form name="form1"> <br>
<input type="checkbox" name="checkbox"
onClick="ModifChamp();"> <br>
<input type='TEXT' name='champ_text' value='Essai du
javascript' size='24'>
</form>

28

Le formulaire

A. Belad

Ensuite, on se rfre 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 proprits :

A. Belad

Action ()
Dfinit l'URL o le formulaire sera envoy
Elements
Tableau reprsentant les lments du formulaire
Length
Nombre d'lments l'intrieur du formulaire
Method
Dfinit le type d'envoi du formulaire (get ou post)
Name
Dfinit le nom du formulaire
Target
Dfinit la page (fentre ou frame) de rponse
Parent
Indique une fentre d'un cadre (frame)

30

Le formulaire

La proprit action ()

A. Belad

Pour raliser laction 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:toimeme@cheztoi.com" onSubmit="confirmation()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
31

Le formulaire

La proprit length

A. Belad

donne le nombre de formulaires dfinis


<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 proprit method :

A. Belad

Sauvegarde la valeur qui figure lors de la dfinition 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 appele
<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:toimeme@cheztoi.com" onSubmit="return Methode()">


<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>

33

Le formulaire

La proprit name :

A. Belad

Sauvegarde le nom dun formulaire


<html>
<head><title>Test</title>
</head>
<body>
<form name="formulaire_test" action="mailto:toimeme@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

Lenvoi de mail :

A. Belad

On ne peut pas envoyer un formulaire tel quil 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 ladresse
?subject : pour le sujet
&body : pour le texte du mail
ta_commentaires : est une chane de caractres qui
rassemble linformation mettre dans le corps du ml

35

Le formulaire

La proprit target :

A. Belad

Prcise la cible (cadre) dans laquelle laffichage 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"
onSubmit="return cible()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
36

Le formulaire

Laction submit() :

A. Belad

Permet lenvoi du formulaire : JavaScript lance un compte rebours


avec la mthode setTimeout(). Aprs 60000 millimes de secondes,
donc aprs une minute, la fonction on_y_va() est appele. 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

A. Belad

Proprits :
checked (coch)
defaultChecked (coch par dfaut)
defaultValue (valeur entre par dfaut)
form (nom du formulaire)
name (nom de l'lment)
type (type de l'lment)
value (valeur/contenu de l'lment)
Mthodes :
blur() (quitter l'lment)
click() (cliquer sur l'lment)
focus() (positionner sur l'lment)
handleEvent() ((traiter l'vnement)
select() (slectionner du texte)

38

Le formulaire

Checked : exemple: Sauvegarde si oui ou non une case cocher ou une


case d'option est active. 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" onClick="Ensuite()">
</form>
</body>
</html>
A. Belad

39

Le formulaire

defaultValue : Sauvegarde le texte par dfaut 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"
onClick="window.location.href=document.formulaire_test.uri.value">
</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>

A. Belad

40

Javascript
Gestion des vnements

A. Belad

41

Les vnements

Prsentation

Pour cela, on prcise :

A. Belad

Les vnements sont lintrt du JS en matire de


programmation Web
Ils donnent une interactivit la page que vous consultez, ce
qui nexiste pas avec le HTML, si on excepte bien entendu le
lien hypertexte
Le JS permet de ragir certaines actions de lutilisateur
Lvnement (Event)

Clic de souris, survol de zones, chargement de la page


Le gestionnaire de lvnement (OnEvent)

OnClick, onMouseOver : appel de fonction pour agir en


consquence

42

Les vnements

Syntaxe du gestionnaire dvnement :


onEvent="Action_Javascript_ou_Fonction();"

Lorsqu'il est utilis dans un lien hypertexte, par


exemple, la syntaxe sera la suivante :
<a href="URL"
"onEvenement='Action_Javascript_ou_Fonction();'">
Lien
</a>

A. Belad

43

Les vnements

Le clic de souris

A. Belad

Gestionnaire dvnement

onClick
Exemple :

<input type=button onClick=alert(vous avez cliqu sur


le bouton) ;">
Balises supportes :

<input type="button">

<input type="checkbox">

<input type="radio">

<input type="reset">

<input type="submit">

<a href..>

44

Les vnements

Le chargement

A. Belad

Gestionnaire dvnement

onLoad
Exemple :

<body onLoad="alert(la page est charge !) ;">


Balises supportes :

<body>

<frameset>
Effets :

Au chargement, raliser tel vnement

45

Les vnements

Error

A. Belad

Gestionnaire dvnement

onError
Exemple :

<img src="pix.gif" onError="alert(Erreur de


chargement !) ;">
Balises supportes :

<body>

<frameset>

<img>
Effets :

Prvient lerreur au chargement

46

Les vnements

Abort

A. Belad

Gestionnaire dvnement

onAbort
Exemple :

<img src="pix.gif" onAbort=alert(Vous avez


interrompu le chargement de limage !) ;">
Balises supportes :

<img>
Effets :

Prvient lerreur au chargement

47

Les vnements

Le passage de la souris

Gestionnaire dvnement

onMouseOver

Exemples : onmouseover.html
<div style="width:50; height:50; background:lightsteelblue;"
onMouseOver="alert('Le curseur entre dans la zone
bleue');"></div>
<div> <P onMouseOver="this.style.color='red'"
onmouseout="this.style.color='black'"> Move the mouse pointer
over this text, then move it elsewhere in the document.</div>
<a href="http://www.google.fr" onMouseOver="alert('Pour aller sur
google.fr, cliquer ici');">http://www.google.fr</a><a
href="http://www.google.fr" onMouseOver="alert(Pour aller sur
google.fr, cliquer ici) ;">http://www.google.fr</a>

Balises supportes :

Effets :

A. Belad

Presque toutes
Prvient quand on survole la cible : zone, texte, lien
48

Les vnements

Le passage de la souris

Gestionnaire dvnement

Exemples :

A. Belad

onMouseOut
<a href="http://www.google.fr" onMouseOut=alert(Vous
ne voulez pas y aller ?) ;">http://www.google.fr</a>

Balises supportes :

Presque toutes
Effets :

Prvient quand on sloigne de la cible

49

Les vnements

Le focus

Gestionnaire dvnement

onFocus
se dclenche lorsque l'lment reoit le focus (devient actif) soit
par action de l'outil de pointage (souris), soit par la navigation
tabule (touches du clavier)
L'vnement onfocus est l'oppos de l'vnement onblur

Exemple :
<input type="text" size="40" maxlength="50" name="pharma_name"
onFocus='javascript:this.style.backgroundColor="yellow"'
onMouseOver='javascript:this.style.background="yellow"'
onMouseOut='javascript:this.style.background="white";this.style.bord
er="1"' onBlur='javascript:this.style.backgroundColor="white"'>

Balises supportes :

A. Belad

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,


Select, Submit, Text, TextArea, window

Effets : tester
50

Les vnements

Le blur :

Gestionnaire dvnement

Exemple :

<input type="text">
<select>
<textarea>
<input type="password">

Effets :

A. Belad

<input type="text" onblur="this.size = 20"


onfocus="this.size = 50">

Balises supportes :

onBlur

onBlur : permet de savoir lorsque le champ perd le focus


onFocus : permet de savoir lorsque le champ a le focus

51

Les vnements

Les changements

Gestionnaire dvnement

onChange

Exemples :
<input type="text" value="votre nom" name="nom"
onChange="alert('vous avez chang votre nom')">

Balises supportes :

Effets :

A. Belad

<input type="text">
<select>
<textarea>
<input type="password">
Avertit du changement par rapport ce quil y avait dcrit dans
la zone dcriture

52

Les vnements

La slection

Gestionnaire dvnement

onSelect

Exemples :
<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
</form>

Balises supportes :

Effets :

A. Belad

<input type="text">
<textarea>
Avertit de la slection dun champ

53

Les vnements

Lenvoi

Gestionnaire dvnement

onSubmit

Exemple :
<form name="testform" action=function()" onsubmit="alert('Hello ' +
testform.fname.value +'!')"> What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>

Balises supportes :

Effets :

A. Belad

<input type="submit">
Lvnement se produit quand le bouton de soumission est
actionn

54

Les vnements

Le reset

Gestionnaire dvnement

Exemple :

<input type="reset">

Effets :

A. Belad

<input type="reset" value="Effacer" name=effacer


onSubmit=alert(On efface tout !) ;">

Balises supportes :

onReset

En appuyant sur le bouton effacer, il remet dans la


zone de texte : votre nom

55

jQuery
lments du langage

http://www.siteduzero.com/tutoriel-3-160885-manipuler-le-contenu.html
A. Belad

56

jQuery

Introduction

A. Belad

Bibliothque 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, crer des animations, modifier des attributs, etc.
Gre les vnements JavaScript
Fait des requtes AJAX simplement

57

jQuery

Installation

A. Belad

jQuery est tout simplement un fichier JavaScript


Il vous suffit donc de le tlcharger sur le site officiel
http://jquery.com
Intgration 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>

A. Belad

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>

A. Belad

60

Commentaires

A. Belad

Si Hello World s'affiche, tout va bien


Si Salut tout le monde ! s'affiche, JavaScript est peut
tre dsactiv, jquery.js n'est pas dans le mme dossier
que le code HTML, ou vous avez fait une erreur en
recopiant

61

jQuery

Fonction principale

C'est une fonction cl

A. Belad

jQuery repose sur une seule fonction :


jQuery() (abrge $())
C'est une fonction JavaScript
Elle accepte des paramtres
Elle retourne un objet
Elle focalise le traitement sur l'objet en paramtre :
permet de le trouver
d'appliquer dessus des proprits et des mthodes

62

jQuery

$('tout-objet')

A. Belad

$ accepte un slecteur CSS en argument


Le slecteur peut tre un identifiant :
$('#nomID') // retourne un lment
document.getElementById
Le slecteur peut tre une classe slecteur
$('.nomClasse') //retourne tous les lments qui
correspondent cette classe
$ accepte plusieurs classes
$('.article,.nouvelles,.edito') //retourne tous les
lments qui correspondent ces classes

63

jQuery

A. Belad

$ accepte des slecteurs spcifiques


$(':radio'), $(':header'), $(':first-child')
des slecteurs en forme de filtres
$(':checked'), $(':odd'), $(':visible')
Plus fort :
$(':contains(du texte)')
des attributs
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'

64

Exemple

A. Belad

65

Manipulation du contenu

Quelques mthodes sur l'objet slectionn

A. Belad

html()
permet d'accder 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 chane
de caractres (reprsentant le contenu)

66

Exemple

A. Belad

Pour ce code :
<div id="titre">J'aime les frites.</div> :
La mthode suivante :
$('#titre'); // Slectionne 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>

A. Belad

$('#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 :
&lt;strong&gt;les pommes&lt;/strong&gt;

68

A. Belad

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

A. Belad

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 remplacs
$('#titre').replaceAll($('h1'));
// Revient faire :
$('#titre').replaceAll('h1');

70

A. Belad

Insertion l'intrieur et l'extrieur : 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

A. Belad

append ( contenu )
Ajoute du contenu l'intrieur des lments spcifis
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>
Rsultat:
<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>
Rsultat:
<p>I would like to say: <b>Hello</b></p>

72

A. Belad

After ( contenu )
Insre du contenu aprs chaque lment de la slection
Exemple 1
Insre 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>
Rsultat:
<p>I would like to say: </p><b id="foo">Hello</b>
Exemple 2
Insre un objet jQuery a la suite des paragraphes
$("p").after( $("b") );
Code de test:
<b>Hello</b><p>I would like to say: </p>
Rsultat:
<p>I would like to say: </p><b>Hello</b>
73

A. Belad

Before /after
Insre du contenu avant les lments retourns par la
recherche
Exemple
Insre 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>
Rsultat:
<b>Hello</b><p>I would like to say: </p>

74

A. Belad

insertAfter()/insertBefore()
Insre tous les lments dfinis par A aprs ceux dfinis
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>
Rsultat:
<div id="foo">Hello</div><p>I would like to say: </p>

75

A. Belad

remove
Supprime tous les lements de la DOM rpondant aux
critres de slection. Mais ne supprime PAS les lements
de l'objet jQuery, ce qui permet une utilisation de ces
lements mme si ceux ci ne figurent plus dans le
document
Exemple
$("p").remove();
Code de test:
<p>Hello</p> how are <p>you?</p>
Rsultat:
how are

76

A. Belad

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 dcor ;
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 smantiquement le texte ;
77

Exemple : contenu-jquery-correction.html

A. Belad

<button onclick="semantique()">Organiser smantiquement le


texte</button>
<button onclick="colorer()">Colorer le texte</button>
<button onclick="mettreTitres()">Mettre des titres</button>
<button onclick="liensEnBoutons()">Transformer les liens en
boutons</button>
<button onclick="dupliquerTexte()">Dupliquer le texte</button>
<button onclick="regrouperTitres()">Regrouper les titres</button>
<button onclick="regrouperLiens()">Regrouper les liens</button>
<button onclick="viderBoutons()">Vider les boutons</button>
<button onclick="enleverLiens()">Enlever les liens</button>
<button onclick="enleverGras()">Enlever le texte en
gras</button>
<button onclick="enleverItalique()">Enlever le texte en
italique</button>
<button onclick="enleverDecor()">Enlever le texte
dcor</button>
<button onclick="voirCode()">Voir 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();
}

A. Belad

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

A. Belad

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>');
}
A. Belad

81

jQuery et le DOM

Objet jQuery

lment du DOM

A. Belad

La fonction principale ($()) renvoie un objet jQuery


partir duquel on peut naviguer dans l'arborescence
$('body')[0] dsigne le premier lment de l'objet
jQuery rsultant de l'appel la fonction principale
Exemple
// Renvoie 'body'
$('body')[0].tagName.toLowerCase();

82

Exemple complet
// Dclaration d'un objet
var objet = {};
// Dclaration d'attributs
objet.variable1 = 'Hello';
objet['variable2'] = 'World';
// Affiche 'Hello World'.
alert(objet.variable1+' '+objet.variable2);
// On ne peut pas utiliser le point
// car une variable ne commence
// jamais par un chiffre
objet[0] = 'premier lment';
// [0] ou ['0'] reviennent au mme
objet['1'] =
document.getElementById('titre');
// Affiche 'premier lment'.
alert(objet[0]);
// Affiche 'titre' si la balise existe
alert(objet[1].id);

A. Belad

// Ce sont des variables comme les autres


// donc je mets ce que je veux !
objet.length = 'Moi aimer frites !';
objet.selector = 89;
Les lments ([0], [1] etc.) contenus dans
un objet jQuery sont donc des attributs
de cet objet

83

Quelques mthodes

Parents et enfants

A. Belad

parents() renvoie l'ensemble des lments parents


parent() l'lment parent direct
children() renvoie les lments enfants directs

84

Exemple
<html>
<head>
<script type="text/javascript"
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>

A. Belad

// Affiche 'HTML'.
alert($('body').parent()[0].tagName);
// Affiche 'HEAD'.
alert($('title').parents()[0].tagName);

85

jQuery et le DOM

Crer des lments

A. Belad

Au lieu de
document.createElement('balise') ;
On utilise
$('<balise/>')
Par exemple
$('<h1 />') cre un titre de niveau 1

86

Exemple
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
<button onclick="essai1();">Essai
1</button>
<button onclick="essai2();">Essai
2</button>
<button onclick="essai3();">Essai
3</button>
<button onclick="essai4();">Essai
4</button>
</div>
</body>
</html>

A. Belad

$(function(){
document._createElement =
document.createElement;
document.createElement = function(balise){
alert(balise+' cre !');
document._createElement(balise);
};
});
function essai1(){
$('<span/>');
}
function essai2(){
$('<span />');
}
function essai3(){
$('<span></span>');
}
function essai4(){
$('<span>Super contenu :p </span>');
}
87

jQuery et le DOM

Les attributs
// Renvoie l'attribut 'title'
// de l'lment ayant comme id 'titre'
$('#titre').attr('title');
// crit aprs #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 Zr0');

A. Belad

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>

A. Belad

89

jQuery et le DOM

Les formulaires
// Renvoie 'Salut!'.
$("#texte").val();
// Renvoie 'Ceci est une\nzone de texte !'.
$("#zonetexte").val();
// Renvoie l'attribut value de la balise slectionne.
// Par exemple 'Radio 1'.
$('input[name="choixradio"]:checked').val();
// Renvoie le contenu de la balise option slectionne.
// Par exemple 'Select 1'.
$('#choixselect').val();

A. Belad

90

jQuery et le DOM

Boucler sur des lments

A. Belad

each() sur un objet jQuery


Exemple

91

A. Belad

Exemple
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
<a href="http://www.google.fr">Google
France</a>
<a href="http://www.siteduzero.fr">Site du
Zro</a>
<p>Paragraphe.<br />Comment allezvous ?
<q>petite citation</q>
</p>
<a href="http://jquery.com">Faites un tour
sur jQuery.com !</a>
</div>
</body>
</html>

//fonction anonyme
$(function(){
$('#contenu a').each(function(i){
$(this)
.prepend('<small>Lien n'+(i+1)+'
</small> ')
.append(' <small>
'+$(this).attr('href')+'</small>');
});
});

92

Exemple
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="all">

</style>
</head>
<body>
<div id="contenu">

</div>
</body>
</html>

A. Belad

//each() avec des donnes


$.each([
0,1,1,2,3,5,8,13,21
],function(n){
$('#contenu').append(n+'me nombre
de Fibonacci : '+this+'<br />');
});
//Rsultats
0me nombre de Fibonacci : 0
1me nombre de Fibonacci : 1
2me nombre de Fibonacci : 1
3me nombre de Fibonacci : 2
4me nombre de Fibonacci : 3
5me nombre de Fibonacci : 5
6me nombre de Fibonacci : 8
7me nombre de Fibonacci : 13
8me nombre de Fibonacci : 21

93

Exemple
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css" media="all">

</style>
</head>
<body>
<div id="contenu">
<q>Un petit pas pour
l'<strong>homme</strong> !</q>
<q>Et un grand pas pour
l'<strong>humanit</strong> !</q>
</div>
</body>
</html>

A. Belad

/each() avec un tableau


var tableau = [
'Bonjour, comment vas-tu ?',
"Aujourd'hui, il fait beau !",
$('q:first').text()
]
,chaine = '';
$.each(tableau,function(n,texte){
chaine += 'Texte n'+(n+1)+' :
'+texte+'\n';
});
$(function(){
$('<pre></pre>')
.html(chaine)
.appendTo('#contenu');
});
//Rsultat
Un petit pas pour l'homme ! Et un
grand pas pour l'humanit !Texte
n1 : Bonjour, comment vas-tu ?
Texte n2 : Aujourd'hui, il fait beau !
Texte n3 : Un petit pas pour
l'homme !
94

Les vnements

Fonctionnement

A. Belad

jQuery dispose de mthodes simples pour attacher des


vnements des fonctions (ou couter un
vnement )

95

Les vnements

Ce qu'on utilisait avant :


element.addEventListener('evenement',function(){
// Action
});
// ou
element.onevenement = function(){
// Action
};

En jQuery

Les vnements seront crs grce des mthodes ayant pour nom
le type de l'vnement, l'argument tant lafonction de retour

// coute d'un vnement


elements_jQuery.evenement(function(){
// Action
});
A. Belad

96

Les vnements
Toutes les fonctions que l'on va voir sont sans argument

Utilisation dans un formulaire

A. Belad

Slection
select est dclench lorsque du texte est slectionn
dans un <input type="text" /> ainsi que dans
un <textarea></textarea>
Exemple
$(':text,textarea').select(function(){
alert($(this).val());
});

97

A. Belad

Changement
Change est dclench lorsque un champ <input > est
chang
Exemple
$(':input').change(function(){
alert($(this).val());
});

98

Soumission du formulaire
submit est dclench 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 caractres dans votre mot de
passe');
return false;
}
});

A. Belad

99

Focalisation

A. Belad

focus est dclench lorsqu'un lment d'un formulaire est


focalis par l'utilisateur, soit en cliquant dessus, soit grce
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

vnements

Touches

A. Belad

L'appui sur une touche se dcompose en trois tapes successives :


keydown : enfoncement de la touche
keypress : maintien de la touche enfonce
keyup : relchement de la touche
Le premier argument de la fonction de retour passe en paramtre est
un objet contenant des informations sur la touche appuye
Un attribut which ou keyCode (dpend du navigateur) dsigne le
numro de la touche appuye
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

vnements

Souris

A. Belad

Clics de souris
Un clic de souris se dcompose en trois tapes
successives :
mousedown : enfoncement de la souris
mouseup : relchement de la souris ;
click : clic de la souris
Le premier argument de la fonction de retour passe en
paramtre est un objet contenant des informations sur la
touche appuye, pageX pour la position X et pageY pour la
position Y

102

Exemple
Rcuprer la position du clic

A. Belad

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
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/a
jax/libs/jquery/1.3.2/jquery.min.js"
></script>
<style type="text/css"
media="all">
</style>
</head>
<body>
<div id="contenu">

$(function(){
$(document).mousedown(function(c
lic){
$('#posX').text('Position X :
'+clic.pageX);
$('#posY').text('Position Y :
'+clic.pageY);
});
});
Rsultat
Position X : 238 Position Y : 157

<span id="posX"></span>
<span id="posY"></span>
</div>
</body>
</html>
A. Belad

104

A. Belad

$(function(){
$('*')
<html>
.mousedown(function(){
<head>
$('#contenu')
<script type="text/javascript"
.css('background-color','#f00')
src="http://ajax.googleapis.com/ajax/l
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">
Up!</span>');})
#contenu span{
.click(function(){
background-color: #fff;}
$('#contenu')
</style>
.css('background-color','#f0f')
</head>
.append('<span style="color: #f0f">
<body>
Clique!</span>');})
<div id="contenu">
.dblclick(function(){
</div>
$('#contenu')
</body>
.css('background-color','#0ff')
</html>
.append('<span style="color: #0ff">
Double Clique!</span>');
});

Autre exemple

105

A. Belad

Rsultat

106

Mouvements de souris

A. Belad

La souris peut entrer au dessus d'un lment, bouger sur cet


lment et enfin partir de cet lment.
On distingue donc :
mouseenter : la souris entre au-dessus de l'lment ;
mouseleave : la souris quitte l'lment
mouseover : la souris entre au-dessus de l'lment ou un de
ses enfants
mouseout : la souris quitte l'lment ou un de ses enfants
mousemove : la souris bouge sur l'lment
Le premier argument de la fonction de retour passe en paramtre
est un objet contenant des informations sur la touche
appuye, pageX pour la position X et pageY pour la position Y

107

Exemple
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.co
m/ajax/libs/jquery/1.3.2/jquery.
min.js"></script>
<style type="text/css"
media="all">
</style>
</head>
<body>
<div id="contenu">

jQuery
$(function(){
$(document).mousemove(functio
n(clic){
$('#posX').text('Position X :
'+clic.pageX);
$('#posY').text('Position Y :
'+clic.pageY);
});
});

<span id="posX"></span>
<span id="posY"></span>
</div>
</body>
</html>
A. Belad

108

Grer des vnements

Fentre

Dfilement

A. Belad

scroll est dclench lorsque l'utilisateur utilise un ascenseur


horizontal ou vertical

$(document).scroll(function(){
alert('Arrte de me dfiler !');
});
Redimensionnement
resize est dclench lorsque l'utilisateur redimensionne la
fentre en utilisant les poignes par exemple, mais aussi
en rduisant sa fentre
Pour l'utiliser sur la fentre principale du navigateur il faut
appliquer la mthode sur $(window) et non $(document)
$(window).resize(function(){
alert('Arrte de me redimensionner !');
});

109

D'autres vnements utiles

Quand le document est prt

Code

$(document).ready(function(){
alert('Le document est prt !');
});
Quand on quitte la page
unload est dclench 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 bientt !');
});

A. Belad

110

Crer des animations

animate(style, [duration], [easing], [complete])

Permet d'animer le style CSS de vos lments


Paramtres

style (objet contenant des couples attribut/valeur CSS) :


le style de l'lment la fin de l'animation
duration (entier ou chane de caractres) (dure) :
un entier positif qui est le nombre de millisecondes
reprsentant la dure de l'animation
easing (chane de caractres) (volution) :
"swing" , "linear"
complete (fonction) (fonction de retour) :
une fonction appele quand l'animation d'un lment
est finie
Exemple : animate.html, animate-jq.html

A. Belad

111

jQuery
$('#anim1').click(function(){
$('#contenu p')
.css('width','400px')
.animate({width : '500px'});
});
$('#anim2').click(function(){
$('#contenu p span').animate({
padding : '50px', opacity : 0.4},
'slow','linear');
});
$('#anim3').click(function(){
$('#contenu p strong')
.animate({fontSize : '2em',
paddingLeft : '50px' },
2000,function(){
alert('fini ! ');
});
});

A. Belad

HTML

<html>
<head>
<script type"></script>
<style type="text/css" media="all">
#contenu p{
width: 400px;font-size: 20px;color: #d22;
line-height: 30px;border: 1px dashed #00f;}
#contenu p span{ padding: 2px;
background-color: #aaa;color: #000;}
#contenu p strong {text-decoration:
underline;
padding: 0;border-left: 2px solid #00f;}
</style>
</head>
<body>
<div id="contenu">
<p>jQuery est une <span>bibliothque
<strong>JavaScript</strong>
</p>
<button id="anim1">Animation 1</button>
<button id="anim2">Animation 2</button>
<button id="anim3">Animation 3</button>
</div>
</body>
112
</html>

Crer des animations

Agir sur le style CSS

A. Belad

On peut agir sur les paramtres CSS pour les modifier


dynamiquement

113

Agir sur le style CSS


On peut agir sur les paramtres CSS pour les modifier
dynamiquement

jQuery

$('#plus').click(function(){
$('#rectangle').animate({
width : '+=32px'
},1000,'linear');
});
$('#moins').click(function(){
$('#rectangle').animate({
width : '-=32px'
},1000,'linear');
});

A. Belad

HTML

#rectangle
{
position: relative; display: block;
width: 512px;height: 48px;
padding: 8px;color: #fff;
background-color: rgb(144,96,128);
}
</style>
</head>
<body>
<div id="contenu">
<div id="rectangle">Salut
!</div><br />
<button id="plus">Plus !</button>
<button id="moins">Moins
!</button>
</div>

114

A. Belad

Animer des ascenseurs


Utiliser attributscrollTop et / ou scrollLeft afin de faire
dfiler le contenu de l'lment
Ceci ne marche qu'avec des lments qui ont un
ascenseur et qui peuvent dfiler

115

jQuery
$('body')
.animate({ scrollTop : '800px'},
5000);

A. Belad

HTML

<html>
<head>
<script "></script>
<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>

116

Crer 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 dmarrent de faon moins
brusque que linear pendant la premire moiti de
l'animation puis arrivent de faon moins
brusque vers leurs valeurs finales

A. Belad

117

jQuery

$('#go').click(function(){
$('#linear')
.css('width','0px')
.animate({ width : '90%' },
4000,'linear'
);
$('#swing')
.css('width','0px')
.animate({ width : '90%' },
4000,'swing'
);
});

A. Belad

HTML

<html>
<head>
<script "></script>
<style type="text/css" media="all">
#conteneur{position: relative;display: block;
margin: 24px;}
#conteneur div{position: relative; display: block;
width: 100%;margin: 0;color: #fff;width: 90%;
border: 1px solid #000;}
#linear{background-color: rgb(144,96,128);
padding: 16px;}
#swing{background-color: rgb(96,128,144);
padding: 16px;}
</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>

118

Crer des animations

Agir sur la dure

A. Belad

En jQuery, la dure de l'animation est toujours


dfinie (sinon c'est "normal", soit 400 millisecondes)
Pour modifier cette dure, il faut agir sur l'attribut
correspondant
On appelle cela : volution par l'attribut
Une des nouveauts de la version 1.4 est de
pouvoir attribuer une volution chaque attribut CSS

119

Crer des animations

Agir sur la dure

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

A. Belad

120

Grer les animations

Utiliser les effets

A. Belad

Tous les effets utilisent l'volution swing


Visibilit
show()
permet d'afficher les lments en question
hide()
permet de cacher les lments en question
toggle()
permet de jongler entre la prsence ou l'absence de
l'lment (si l'lment est cach, l'afficher, sinon le
cacher)
Exemple
// Utilis pour afficher / cacher une balise secret.
$('blockquote.secret').toggle('normal');
121

Ces trois mthodes peuvent


ne prendre aucun argument
pas d'animation et tout se fait de faon brute
ou les arguments classiques cits plus haut :
la hauteur, la largeur et l'opacit changent de
manire progressive
On peut utiliser toggle() avec les arguments classiques
ou avec un seul argument, un boolen qui, true affiche
l'lment avec show(), mais qui false cache l'lment
avec hide()
Exemple

A. Belad

$('a').toggle( true ); // affiche les liens


$('textarea').toggle( false ); // cache les zones de texte
// affiche ou cache les paragraphes selon que la checkbox
soit coche ou non
$('p').toggle( $('#afficherParagraphes').attr( 'checked' ) );

122

Glissement

Disparition

A. Belad

slideDown() permet de drouler verticalement les


lments en question
slideUp() permet d'enrouler verticalement les lments
en question
slideToggle() permet de jongler entre la prsence ou
l'absence de l'lment (si l'lment est cach, le
drouler, sinon l'enrouler)
fadeIn() : fait apparatre les lments en modifiant
l'opacit de manire progressive
fadeOut() : fait disparatre les lments en modifiant
l'opacit de manire progressive
fadeTo() : modifie l'opacit des lments slectionns et
permet de lancer une fonction la fin de l'animation

123

Exemple sur les


paramtres CSS
jQuery
$('#boite').animate({
// width ? => width 0
width : 'toggle'
// height ? => height 200
, height : '200px'
},4000);
$('#boite').animate({
// width 0 => width 800
width : 'toggle'
// height 0 => height 200
, height : 'toggle'
},2000);

A. Belad

HTML

<html>
<head>
<script "></script>
<style type="text/css" media="all">
#boite{width: 800px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="contenu">
<div id="boite">Une boite
!</div>
</div>
</body>
</html>
124

Contrler les animations

Slecteur d'animations

A. Belad

Le slecteur :animated permet de filtrer les lments qui


sont anims au moment o la fonction s'excute

125

jQuery
function ajouterEtEnleverClasseAnime(){
// ajouter la classe 'anime' aux lments
anims
$('#contenu
div:animated').addClass('anime');
$('#contenu
div:not(:animated)').removeClass('ani
me');
}
function animerBoite( n ){
var
x = Math.floor( Math.random() * 500 )
// nombres alatoires entre 0 et 499,
y = Math.floor( Math.random() * 500);
$( '#boite' + ~~n ).animate({
top : y, left : x
} , 2000 ); // l'animation dure 2 secondes
}
// met jour tous les 500 millisecondes
setInterval(
ajouterEtEnleverClasseAnime , 500 );

A. Belad

HTML

#contenu div{
background-color: #fff; position: absolute;
width: auto;height: 64px; top: 200px;left: 200px;
border: 1px solid #000;z-index: 50;}
#contenu div button {width: 100%; height: 40px;
margin: 12px 0; color: #000; padding: 0 12px;
cursor: pointer;}
#contenu div.anime{ background-color: #00f;
border-color: #fff;}
#contenu div.anime button{ background-color: #00f;
border-color: #00f; color: #fff;}
</style>
</head>
<body>
<div id="contenu">
<button
onclick="ajouterEtEnleverClasseAnime();">Mettre
jour</button>
<div id="boite1"><button onclick="animerBoite( 1
);">Animer!</button></div>
<div id="boite2"><button onclick="animerBoite( 2
);">Animer!</button></div>
<div id="boite3"><button onclick="animerBoite( 3
);">Animer!</button></div>
</div>

126

Grer les animations

Stopper les animations

stop([ viderLaQueue, allerALaFin ])


viderLaQueue (boolen) :

Si true : stoppe l'animation en cours et celles venir


(qui sont prsentes dans la queue)
Si false : (par dfaut), stoppe seulement la premire
animation de la queue. Les autres animations dans la
queue commenceront tout de suite

allerALaFin (boolen) :

Si true : ne stoppe pas l'animation, mais la fait aller


sa fin : l'lment concern aura donc son style final et
la fonction de retour sera appele
Si false (par dfaut) : stoppe l'animation et ne fait
rien de spcial
Exemple : stpper-anim.html

A. Belad

127

Grer les animations

Gestion de files d'attente

A. Belad

On peut grer une ou plusieurs files d'attentes par lancement,


mise en attente de plusieurs animations
Explorer cela par vous-mmes

128

Grer les vnements

Vocabulaire des vnements

A. Belad

Quand un vnement est dclench sur un lment, et qu'il


faut associer une fonction appeler lors de ce
dclenchement, on dit qu'on coute un vnement
On lie, ou on attache ( to bind ) une fonction un type
d'vnement bien dtermin sur un lment. L'lment en
question est alors cout sur ce type d'vnement
On supprime, on dlie ou on dtache ( to unbind ) une
fonction un type d'vnement sur un lment lorsqu'on
enlve l'appel la fonction lors du dclenchement de
l'vnement sur cet lment
La fonction de retour est appele un couteur d'vnement
(addEventListener() signifie ajouter un couteur d'vnement
!).

129

Grer les vnements

couter

A. Belad

Les mthodes vues, comme click() ou mouseenter(),


permettent de lier un vnement une fonction :
on appelle a un couteur d'vnement.
bind() permet de gnraliser cela en lui passant en
premier argument une chane de caractres
reprsentant tous les vnements (spars par des
espaces) lier avec la fonction passe en
paramtre

130

jQuery
$(function(){
$('#contenu p, #contenu textarea')
.bind('mouseenter focus',function(){
$(this).css('border-color','#222');
})
.bind('mouseleave blur',function(){
$(this).css('border-color','#bbb');
});
$('#contenu q').bind('dblclick',function(){
if($(this).attr('auteur')){
alert("L'auteur de cette citation est
"+$(this).attr('auteur')+' !');
}
});
});

A. Belad

HTML
<html>
<head>
<script ></script>
<style >
#contenu p, #contenu textarea{
border: 1px solid #bbb;}
</style>
</head>
<body>
<div id="contenu">
<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

Grer les vnements

Supprimer

A. Belad

unbind() permet d'enlever l'couteur d'vnement cr


pralablement avec bind()
nom de l'vnement ( unbind('click')) : supprime tous les
couteurs du type de l'vnement
nom de l'vnement et fonction ( unbind('click',fonction)):
supprime juste un couteur bien prcis pour ce type
d'vnement

132

jQuery
$(function(){
$('#contenu a:not(.interne)').click(function(){
alert('adresse du lien : '+$(this).attr('href'));
$(this).unbind('click');
return false;});
$('#contenu textarea')
.focus(zoneTexte)
.focus(function(){$(this).after('<br />Clic !'); })
.blur(function(){$(this).css('backgroundcolor','#ff8');})
.one('dblclick',function(){$(this).after('<br
/>Double Clic !');
$(this)
.unbind('focus',zoneTexte)
.unbind('blur');});});
function zoneTexte(){
$(this).css('background-color','#f8f');
}
function unbindZoneTexte(){
$('#contenu textarea').unbind();
}

A. Belad

HTML
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/l
ibs/jquery/1.3.2/jquery.min.js"></scrip
t>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
<button
onclick="unbindZoneTexte()">$('#con
tenu textarea').unbind() !</button><br
/>
<a
href="http://www.siteduzero.com/">Si
te du Zr0</a><br />
<textarea>
</div>
</body>
</html>

133

Grer des vnements

Attacher plusieurs vnements en mme temps

Une des nouveauts de la version 1.4 est de pouvoir


donner un objet en argument bind(), contenant
des couples nom de l'vnement / fonction de retour
attache
Exemple

$('h1')
.bind({ mouseenter: function(){$(this).css('color','#000');
}
, mouseleave: function(){$(this).css('color','#00f');
}
, click: function(){ $(this).css('color','#ff0');
}
});

A. Belad

134

Grer des vnements

Dclencher

A. Belad

On peut dclencher virtuellement des vnements


sur des lments sans avoir pour autant l'aval de
l'utilisateur
trigger()
trigger() permet de dclencher un vnement,
produisant l'action par dfaut du navigateur ainsi
que celle que vous avez dfinie
Les mthodes utilises plus haut qui pouvaient tre
appeles sans argument sont donc le raccourci
d'un appel trigger()

135

jQuery
$(function(){
$('#contenu :text')
.focus(function(){
$(this).trigger('click');
})
.click(function(){
$(this).after('<br />clic !');
});
});

HTML
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/l
ibs/jquery/1.3.2/jquery.min.js"></scrip
t>
<style type="text/css" media="all">

</style>
</head>
<body>
<div id="contenu">
Appuyer sur <code>[TAB]</code><br />
<input type="text" value="essai !" />
</div>
</body>
</html>

A. Belad

136

Grer des vnements

A. Belad

triggerHandler()
triggerHandler() agit presque de la mme manire
que trigger() sauf qu'elle n'actionne pas le
mcanisme par dfaut du navigateur (par exemple
quand un champ gagne le focus , le texte du
champ est slectionn et on peut crire), mais
appelle seulement la fonction qu'on a dfinie

137

Grer des vnements

Nos propres vnements

A. Belad

On peut crer nos propres vnements

138

jQuery
$(function(){
$('#contenu a')
.bind('lien',function(){
alert('Vous aller vers '+$(this).attr('href')+' !');
})
.click(function(){
if(!$(this).hasClass('interne')){
$(this).trigger('lien');
}
});
});

A. Belad

HTML
<html>
<head>
<script "></script>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
<a
href="http://www.siteduzero.com">Sit
e du Zr0</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