JavaScript/jQuery

Bruxelles Formation Management & MultimediaTIC - Cepegra

Nicolas Bauwens
Conseiller pédagogique - Formateur
[email protected]

1
Contenu
Introduction ............................................................................................................................................ 5
Le B-A-BA d'Internet ........................................................................................................................... 5
Qu'est-ce que JavaScript & jQuery ? ................................................................................................... 6
Définition ........................................................................................................................................ 6
Historique........................................................................................................................................ 6
Outils ............................................................................................................................................... 6
Quelques mots sur jQuery .............................................................................................................. 7
Inclure du JavaScript dans une page HTML ............................................................................................ 7
Les éléments du langage ......................................................................................................................... 8
Variables ............................................................................................................................................. 8
Numérique (Number) ...................................................................................................................... 9
Chaîne de caractère (String) ........................................................................................................... 9
Booléens (Boolean) ....................................................................................................................... 10
null et undefined ........................................................................................................................... 10
Tests et conditions ............................................................................................................................ 12
Les opérateurs de comparaison .................................................................................................... 12
Les opérateurs logiques ................................................................................................................ 13
Types de tests ............................................................................................................................... 14
Tester null et undefined ................................................................................................................ 15
Les boucles ........................................................................................................................................ 17
Li e tatio ........................................................................................................................... 19
Le type array ................................................................................................................................. 19
Types de boucles ........................................................................................................................... 20
Les fonctions ..................................................................................................................................... 22
Déclaration .................................................................................................................................... 22
Appel ............................................................................................................................................. 22
Portée des variables ...................................................................................................................... 23
Les fonctions anonymes................................................................................................................ 23
Les avantages de jQuery ....................................................................................................................... 25
Inclure jQuery dans son projet ............................................................................................................. 25
En local .......................................................................................................................................... 25
Via CDN ......................................................................................................................................... 25
Le DOM ................................................................................................................................................. 26

2
 Comprendre le Document Objet Model ........................................................................................... 26
Introduction aux objets ................................................................................................................. 28
Les objets window et document ................................................................................................... 29
Lecture et modification du DOM ...................................................................................................... 30
En JavaScript pur ........................................................................................................................... 30
En jQuery....................................................................................................................................... 32
Les événements .................................................................................................................................... 40
Le o ept d e e t .................................................................................................................. 40
Associer un événement à un élément .............................................................................................. 41
En JavaScript ................................................................................................................................. 41
Avec jQuery ................................................................................................................................... 42
Atte d e le ha ge e t de l HTML .................................................................................................. 43
L o jet Event ..................................................................................................................................... 44
Stoppe le o po te e t o al d u e e t ........................................................................ 44
Plus loin avec jQuery ............................................................................................................................. 45
Les objets littéraux ............................................................................................................................ 45
Déclarer et utiliser un objet littéral .............................................................................................. 45
Aut e utilisatio d u o jet litt al : le tableau associatif ............................................................ 46
La boucle for in .............................................................................................................................. 47
Les effets visuels ............................................................................................................................... 47
Apparaître et disparaître............................................................................................................... 47
Les animations .............................................................................................................................. 48
Les sélecteurs avancés ...................................................................................................................... 49
Les filtres ........................................................................................................................................... 50
Parcourir le DOM .............................................................................................................................. 51
Les méthodes utilitaires .................................................................................................................... 52
Les plug-ins............................................................................................................................................ 52
jQuery UI ........................................................................................................................................... 52
Autres plug-ins .................................................................................................................................. 52
Les formulaires et la validation ............................................................................................................. 53
Interagir avec un formulaire ............................................................................................................. 53
Sélectionner des éléments ............................................................................................................ 53
Lire et modifier les valeurs ............................................................................................................ 54
Les événements ............................................................................................................................ 55

3
 Activer/désactiver des champs ..................................................................................................... 56
Valider un formulaire ........................................................................................................................ 57
Introduction .................................................................................................................................. 57
Configurer la validation ................................................................................................................. 57
St le les essages d e eu ......................................................................................................... 59
Requêtes AJAX avec jQuery .................................................................................................................. 59
Introduction ...................................................................................................................................... 59
Fonctionnement................................................................................................................................ 60
Méthodes jQuery .............................................................................................................................. 60
.load() ............................................................................................................................................ 60
$.get() et $.post() .......................................................................................................................... 61
$.getJSON() ................................................................................................................................... 61
$.ajax() .......................................................................................................................................... 61
Les cookies ............................................................................................................................................ 62
L o jet Date....................................................................................................................................... 63
Le debug et la gestion des erreurs ........................................................................................................ 64
Le debug ............................................................................................................................................ 64
La gestion des erreurs ....................................................................................................................... 65
La minification ....................................................................................................................................... 65
Plus d i fo mations ............................................................................................................................... 66
Sources .................................................................................................................................................. 66

4
Introduction

Au terme de ce cours, vous serez capable de :

 maitriser les concepts de base de la programmation

 lire un script JavaScript et jQuery existant et le modifier
 utiliser des plug-ins jQuery et paramétrer leur fonctionnement
 rédiger votre propre script afin de dynamiser votre site web avec des effets et des
animations

Le Ja aS ipt est le ème pilie du e desig . Le p e ie est l HTML, il d it la structure d u e

page e . Le se o d, est la CSS, ui d fi it la présentation de la page. Le JavaScript lui définit le
comportement de la page : il met vie à une page web qui serait autrement complètement statique.

Le B-A-BA d'Internet

Petit rappel pour ceux qui savent, et petite explication pour ceux qui se sont toujours posé la
question « mais comment ça marche Internet » ?

Pour faire simple, quand vous tapez http://www.google.com dans votre navigateur, votre requête
est envoyée vers un serveur web, dans ce cas-ci un serveur de chez Google, qui va simplement vous
renvoyer un fichier HTML accompagné de fichiers CSS et éventuellement de JavaScript. Ce transfert
de données utilise le protocole HTTP (HyperText Transmission Protocol). Un protocole est une
spécification des règles de communication entre matériels électroniques.

Une fois la page web reçue par le navigateur, celui-ci va décoder tout ça (parsing en anglais) et vous
afficher une belle page web !

5
 Qu'est-ce que JavaScript & jQuery ?

Définition
JavaScript est un langage de programmation interprété.

Un langage de programmation, c'est un langage qui permet d'écrire du code source. Le code source
quant à lui:

 communique des actions à un ordinateur sous forme d'instructions (variables, tests, boucles,
etc...)
 peut être compilé: le code est d'abord converti en langage binaire (0 et 1) par un
compilateur afin d'être compris par l'ordinateur
 ou interprété: l'ordinateur comprend directement le code via un interpréteur. On parle
souvent du mot script pour parler de code interprété. Dans le cas du JavaScript,
l'interpréteur est inclus dans le navigateur web (SpiderMonkey pour Firefox, JScript pour IE,
V8 pour Chrome)

C'est un langage client: il est interprété par le navigateur, donc sur la machine de l'internaute.

L'inverse des langages clients sont les langages serveur: ils s'exécutent sur le serveur et renvoient de
l'HTML aux machines clientes. PHP, C#, Ja a,… so t des la gages se eu .

Comme il s'exécute sur la machine client, cela peut poser divers problèmes: lenteur de l'exécution
du script due aux performances de la machine client, problème de compatibilité avec des
navigateurs obsolètes voir la désactivation complète de JavaScript sur la machine cliente. Nous
reviendrons sur ces problématiques dans le cours.

Historique
Il ne faut pas retenir tout ça mais ça va éclaircir certains termes que vous risquez de rencontrer
quand vous travaillerez avec du JavaScript. JavaScript a été inventé par Netscape en 1995 et fut
ensuite standardisé par l'ECMA (un organisme qui met en place des standards dans le monde de
l'informatique). La version standardisée s'appelle donc ECMAScript, la version stable la plus récente
étant ECMAScript 5. Plusieurs implémentations d'ECMAScript existent à l'heure actuelle, dont JScript
(implémentation dans IE) ou ActionScript (dans Flash).

D'où quelques différences de comportement entre Mozilla et Internet Explorer, JScript permettant
de faire des choses qui ne sont pas possible par défaut avec JavaScript.

Outils
Pour écrire du JavaScript, il ne faut pas d'outils particuliers. Votre éditeur HTML fait l'affaire, aussi
bien qu'un outil comme Notepad++. Afin de nous faciliter la vie, nous utiliserons l'outil WebStorm
qui fait de l'autocompletion et offre des petites fonctionnalités sympathiques comme le debug de
code.

Vous pouvez aussi utiliser le site http://jsfiddle.net/ qui permet de tester rapidement du code
JavaScript sans devoir ouvrir un éditeur, créer un fichier, le lancer dans Firefox etc... C est très

6
pratique quand vous voulez tester du code rapidement ! Les exemples de ce cours seront dans
jsfiddle.

Enfin, outil ô combien indispensable pour débugger du JavaScript : Firebug. FireBug est une
e te sio de Fi efo et pe et d i spe te le ode HTML et les CSS ais aussi de débugger du
Ja aS ipt, oi les e u tes AJAX, et … Vous pouvez utiliser la méthode console.log() dans votre
code pour débugger, mais attention, retirez cette instruction avant de mettre le site en ligne !

Quelques mots sur jQuery

jQuery est une librairie JavaScript, en gros, du code source qui permet de faire rapidement et
facilement des choses qui seraient très compliquées à faire soi-même en JavaScript pur!

De plus, jQue s o upe tout seul de la o pati ilit a e les diff e ts navigateurs, même IE 6 –
pou i fo atio I te et E plo e et e so t les pi es au he a s d u i t g ateu a ils
regorgent de spécificités propres à eux.

Sa syntaxe est claire et facilement compréhensible, le seul poi t gatif ta t u il impacte les
performances techniques car la librairie est assez lourde à charger.

C'est très chouette, mais pour jouer avec jQuery il faut quand même comprendre les bases du
JavaScript, et plus précisément sa syntaxe. Comme si vous appreniez une nouvelle langue, nous
allons voir les rudiments de grammaire et de vocabulaire du langage dans les prochains chapitres.

Inclure du JavaScript dans une page HTML

Du code JavaScript est lié à la page HTML via le tag <script>. De manière similaire à des styles, le
code JavaScript peut soit:

 être inclus directement dans la page HTML, sous cette forme

<script type="text/javascript">
[CODE JAVASCRIPT]
</script>

 se trouver dans un fichier externe (extension .js), sous cette forme (la localisation du fichier
peut être absolue ou relative, ici il se trouve dans le fichier function.js)

<script src="functions.js" type="text/javascript"/>

Prenez l'habitude de mettre vos scripts dans des fichiers séparés, par soucis de performances (le
fichier sera mis en cache par le navigateur) et pour rendre le script inobstrusive (nous reviendrons
sur cette notion à la fin du cours)

Il est souvent mentionné que le tag <script> doit se trouver dans le tag <head>, cependant une page
Web est lue par le navigateur de façon linéaire, c'est-à-dire qu'il lit d'abord le <head>, puis les
éléments de <body> les uns à la suite des autres. Si vous appelez un fichier JavaScript dès le début

7
du chargement de la page, le navigateur va donc charger ce fichier, et si ce dernier est volumineux,
le chargement de la page s'en trouvera ralenti. C'est normal puisque le navigateur va charger le
fichier avant de commencer à afficher le contenu de la page.

Pour pallier ce problème, il est conseillé de placer les tags <script> juste avant la fermeture du tag
<body>.

Les éléments du langage

Tout langage de programmation se compose de ces différents éléments: les variables, les tests, les
boucles. Nous allons plonger dans la base de la programmation !

Variables

Vous vous souvenez de votre cours de math ? On y parlait déjà de variables, par exemple dans le
calcul suivant, on trouve 3 variables: x, a et b.

x = (a + b)/4

On assigne des valeurs à a et b afin de trouver la valeur de x.

C'est le même principe en informatique, une variable permet de stocker une valeur, une
information, qu'elle soit numérique, sous forme de texte, ou autre.

Afin d'utiliser une variable il faut d'abord la déclarer. Il s'agit tout simplement de lui réserver un
espace de stockage en mémoire, rien de plus. Une fois la variable déclarée, vous pouvez commencer
à y stocker des données sans problème.

Pour déclarer une variable, il suffit d'écrire par exemple:

var myVariable;

Notez la p se e d u poi t-virgule. Après chaque instruction, il faut mettre un point- i gule. C est
comme ça 

le JavaScript est sensible à la casse ou case-sensitive, ce qui veut dire que les majuscules
et minuscules comptent.

var myVariable;
var MyVariable;

sont 2 variables différentes !

On peut nommer une variable comme on le souhaite, cependant il existe certains noms réservés
qu'on ne peut pas utiliser, sinon le code ne marchera pas. La liste complète des mots réservés

Une fois une variable déclarée on peut l'initialiser, c'est-à-dire lui assigner une valeur, par exemple

8
 var myVariable;
myVariable = 2;

Contrairement à de nombreux langages, le JavaScript est un langage typé dynamiquement. Cela veut
dire, généralement, que toute déclaration de variable se fait avec le mot-clé var sans distinction du
contenu, tandis que dans d'autres langages, comme le Java, il est nécessaire de préciser quel type de
contenu la variable va devoir contenir (un nombre, du texte, etc...)

Cela veut aussi dire que l'on peut y mettre du texte en premier lieu puis l'effacer et y mettre un
nombre quel qu'il soit, et ce, sans contraintes. Il faut donc être très attentif !

Voici les différents types possibles:

Numérique (Number)
Ce t pe ep se te tout o e, u'il soit e tie , gatif, d i al,…

Pour assigner un type numérique à une variable, il vous suffit juste d'écrire le nombre seul :

var number = 5;

Attention, dans le cas d'un nombre décimal, il faut utiliser le . et non la virgule, par exemple:

var number = 5.5;

Quelle est l'utilité ? De pouvoir faire des calculs par exemple ! Et à cette fin, vous pouvez utiliser les
opérateurs arithmétiques que vous connaissez tous comme +, -, /, *.
Mais également, moins connu, l'opérateur %, qui permet de calculer le modulo (le reste de la
division entière). A quoi sert le modulo ? A vérifier si un nombre est pair par exemple, ou multiple
d'un chiffre.

Chaîne de caractère (String)

Ce type représente n'importe quel texte. On peut l'assigner de deux façons différentes :

var text1 = "Mon premier texte"; // Avec des guillemets

var text2 = 'Mon deuxième texte'; // Avec des apostrophes

9
Il est important de préciser que si vous écrivez var myVariable = '2'; alors le type de cette
variable est une chaîne de caractères et non pas un type numérique.

Une autre précision importante, si vous utilisez les apostrophes pour « encadrer » votre texte et que
vous souhaitez utiliser des apostrophes dans ce même texte, il vous faudra alors « échapper » vos
apostrophes de cette façon :

var text = 'Ça c\'est quelque chose !';

Pourquoi ? Car si vous n'échappez pas votre apostrophe, le JavaScript croira que votre texte s'arrête
à l'apostrophe contenue dans le mot « c'est ». Du coup, une erreur sera générée et la suite de votre
script ne s'exécutera pas.

À noter que ce problème est identique pour les guillemets. Une autre possibilité est d'encadrer le
texte avec des guillemets quand vous utilisez des apostrophes dedans:

var text = "Ça c'est quelque chose !";

Ça parait compliqué mais on s'y fait, vous verrez :-)

Booléens (Boolean)
Ce type permet simplement de stocker "vrai" ou "faux" :

var isTrue = true;

var isFalse = false;

Quelle est l'utilité ? De pouvoir vérifier des conditions par exemple.

Sachez qu'il est également possible de "convertir" une variable d'un type à l'autre, par exemple de
transformer une string qui contient "42" en une variable numérique qui contient le nombre 42 et
inversement.

null et undefined
Il a i e u o doi e di e u u e a ia le est d la e ais ne contient rien. Dans ce cas, on utilisera
null.

Si une variable n'a pas été initialisée, elle sera undefined. Evidemment, si vous exécuter une action
avec une variable undefined, le code va planter.

10
 Exemples de undefined et de null.
Ce test appelle console.log(), pensez ) activer Firebug ;-)

http://jsfiddle.net/xa4zs/

On peut bien sûr tester si une variable est null ou undefined

11
 Tests et conditions

Les tests permettent d'exécuter une action (ou de ne pas l'exécuter !) en fonction de certains
critères, ou conditions. Les tests s'appliquent toujours au type booléen, c'est-à-dire à "vrai" ou
"faux". Un test est toujours du type "Si la condition est vraie, alors j'exécute ceci, sinon j'exécute
cela"

Par exemple, "si l'utilisateur est belge, alors afficher un message à l'écran" ou "si l'utilisateur choisit
le thème 'vert' alors charger la CSS 'vert.css'" ou encore "si la résolution de l'écran est minimum de
640*480, alors charger les scripts lightbox"

Exemples :

Charger des CSS ou Scripts conditionnellement:

http://japborst.net/blog/conditionally-load-css-or-js.html

Tester si l'utilisateur vient pour la première fois sur le site

http://www.ravelrumba.com/blog/firstimpression-js-library-detecting-new-visitors/

Détecter le pays de l'utilisateur et afficher un message approprié

http://jsfiddle.net/9hNp4/

une libraire JavaScript, YepNope, permet de faire du chargement conditionnel de CSS ou

de Script: http://yepnopejs.com/

De quoi sont constituées les conditions ? De valeurs à tester et de deux types d'opérateurs : de
logique et de comparaison. Pour être plus clair: une condition sera vraie ou fausse en fonction du
résultat d'une comparaison et/ou d'un test logique.

Les opérateurs de comparaison

Ces opérateurs vont permettre de comparer diverses valeurs entre elles. En tout, ils sont au nombre
de huit, les voici :

Opérateur Signification
== égal à
!= différent de
=== contenu et type égal à
!== contenu ou type différent de
> supérieur à
>= supérieur ou égal à
< inférieur à
<= inférieur ou égal à

12
Le résultat d'une comparaison renvoie vrai ou faux, en bref, une valeur de type booléen ;-)

Exemple:

var hour = getHour();

if(hour == 12){
document.write('le dîner est prêt !');
}

Les opérateurs logiques

Pourquoi ces opérateurs sont-ils nommés comme étant « logiques » ? Car ils fonctionnent sur le
même principe qu'une table de vérité en électronique. Avant de décrire leur fonctionnement, il nous
faut d'abord les lister, ils sont au nombre de trois :

Opérateur Type de logique Utilisation

&& ET valeur1 && valeur2
|| OU valeur1 || valeur2
! NON !valeur

Lorsque qu'on teste plusieurs valeurs, il faut avoir en tête les résultats possibles, voici la table de
vérité des opérateurs "ET" et "OU". Les résultats d'un test logique est aussi un booléen

valeur1 Opérateur valeur2 Résultat

Faux ET Faux Faux
Faux ET Vrai Faux
Vrai ET Faux Faux
Vrai ET Vrai Vrai
Faux OU Faux Faux
Faux OU Vrai Vrai
Vrai OU Faux Vrai
Vrai OU Vrai Vrai

L op ateu ! ua t à lui e oie l i e se d u e aleu ool e e. Si u e a ia le est « vraie », son

inverse sera « faux ».

Du coup, il est possible de combiner au sein d'un même test, des opérateurs de comparaison et des
opérateurs logiques, comme dans l'exemple ci-dessous

var hour = getHour();

var name = getUsername();
if(hour == 12 && name == « Michel »){
document.write('le dîner est prêt pour Michel !');
}

13
 Types de tests

if-else
Nous l'avons déjà vue dans les exemples précédents, retenez-le bien car c'est le type de test le plus
rencontré. Il permet d'exécuter une action si une condition est vraie, et une autre action si elle est
fausse.

Sa syntaxe se présente sous cette forme

if (test) {
action;
}
else {
autreAction;
}

Il est possible d'enchaîner les tests if-else, par exemple pour dire, "si le visiteur est Belge, alors
afficher un message vert, sinon si le visiteur est Français, alors afficher un message bleu, sinon
afficher un message jaune"

La syntaxe sera telle que:

if(test) {
action;
}
else if (test2) {
autreAction;
}
else {
actionParDéfaut;
}

switch
C'est une variante du if-else. Si on doit tester plusieurs pays avec des if-else, ça risque de vite devenir
ennuyeux. Dans le cas où il faut faire beaucoup de tests sur une même donnée (ici, le code pays du
visiteur), alors il est préférable d'utiliser un switch car il permet de mieux s'y retrouver. Cette
instruction effectue une comparaison par rapport à la valeur et au type.

Sa syntaxe :

switch(variable) {
case valeurPossible1 :
action1;
break ;
case valeurPossible2 :
action2;

14
 break ;
case valeurPossible3 :
action3;
break ;
default :
actionParDéfaut;
break ;
}

L i st u tio break permet de « casser » le s it h et d e so ti d s ue l a tio ad uate a t

exécutée. Si on ne mentionne pas le break, les aut es as o t gale e t s e ute !

default permet lui de définir une action par défaut si aucune des valeurs des case ne correspond.

Détecter le pays de l'utilisateur avec un switch et afficher un message approprié

http://jsfiddle.net/zrUtK

ternaire
Une autre variante du if-else. Si vous voulez épargner vos doigts lors de l'écriture de if-else, vous
pouvez passer par une condition ternaire. C'est la même chose en plus court, mais en parfois moins
lisible... Préférez le if-else, mais sachez reconnaître celui-ci.

Syntaxe:

(test) ? action si test est vrai : action si test est faux

ou

résultat = (test) ? valeur si test est vrai : valeur si test est faux

Détecter le pays de l'utilisateur a e l op ateu te ai e et afficher un message

approprié

http://jsfiddle.net/Xns2Z/

Tester null et undefined

Pou ifie l'e iste e d u e a ia le u elle e soit pas undefined) ou son conte u u elle e soit
pas null ou vide), on peut le faire de la manière classique ci-dessous :

var notSet = null;

if(notSet == null)
{
alert "la variable n a pas de valeur")
}

15
 var notInit;
if(notInit == undefined)
{
alert("variable pas initialisée")
}

Du coup, pour tester null et undefined mais aussi par exemple une string vide, il faudrait combiner
plusieurs conditions. Il existe une notation beaucoup plus concise !

Vous savez que les variables peuvent être de plusieurs types : les nombres, les chaînes de caractères,
etc. En fait le type d'une variable (quel qu'il soit) peut être converti en booléen même si à la base on
possède un nombre ou une chaîne de caractères.

Quels contenus seront « faux » ? Un nombre qui vaut zéro, une string vide, null ou undefined. Tous
les autres cas seront « vrais ». Du coup, on peut écrire quelque chose comme ça, qui est nettement
plus rapide :

var notSet = null;

if(notSet)
{
alert("la variable n a pas de valeur")
}

U e aut e petite su tilit du Ja aS ipt ous est offe te pa l op ateu OU. Celui-ci, en plus de sa
fonction principale, permet de renvoyer la première variable possédant une valeur évaluée à true.

var conditionTest1 = '', conditionTest2 = 'Une chaîne de

caractères';

alert(conditionTest1 || conditionTest2);
//affichera 'Une chaîne de caractères'

Concrètement, à quoi cela peut-il servir ?

Par exemple, certains merveilleux navigateurs comme Internet Explorer ont des fonctionnalités qui
sont les mêmes que dans le standard ECMA mais appelées différemment ! Chouette hein ? Hé bien
cette notation permettra au navigateur de choisir la fonctionnalité qui existe pour lui.

Si vous êtes déjà curieux, voici un petit exemple : o souhaite up e le o te u te te d u DIV

grâce au DOM (nous verrons ceci en détail dans le chapitre ad hoc). Avec IE on doit utiliser
« innerText » et pour les autres navigateurs avec le standard ECMA, « textContent ». Une manière
o ise de l i e se ait :

16
 var txt = div.textContent || div.innerText || '';

Teste l e iste e et le o te u de a ia les

http://jsfiddle.net/ZZbh5

Les boucles

Quand on parle de répéter un album en boucle, ça vous évoque quoi ? Le fait de répéter plusieurs
fois, auto ati ue e t, les ha so s de l al u . C est le e p i ipe e programmation. Les
ou les pe ette t de p te u e a tio plusieu s fois ta t u u e o ditio est espe t e, ou
jus u à e u u e o ditio soit espe t e.

Et oui, nous allons, comme pour les tests, utiliser les conditions dans les boucles. Il faut, bien
e te du, u u o e t la o ditio de ie e fausse, si o o g e u e ou le i fi ie… ous
vous rappelez des sites qui ouvraient milles fenêtres popup ?  C est u eau as d utilisatio d u e
ou le i fi ie, u e ou le ui e s a te ja ais ! Haaaaaaaa !

Une boucle peut être exprimée de cette façon « Tant que la condition est vraie, exécuter ces
actions » ou bien de cette façon « Pour toutes les données que voici, exécuter ces actions ».

17
Une boucle fonctionne de cette manière :

1. On aura généraleme t esoi d u e a ia le de ou le, u o a i itialise a a t la ou le

avec une valeur qui ne va pas rencontrer la condition de la boucle (sinon la boucle ne
s e le he ait pas !).
2. A chaque passage de boucle ou itération, on vérifie si la condition est toujou s aie, si est
le as o a e t e da s la ou le, est-à-dire exécuter les actions dans la boucle.
Si la condition est fausse, on sort de la boucle et on continue à exécuter le code suivant.
3. On doit, au sein de la boucle, à la fin de toutes les actions, mettre à jour la variable de boucle
pour que, à un moment, sa valeur ne corresponde plus à la condition et que la boucle
s a te.
4. On retourne au point 2

Ce flux est illustré dans le schéma suivant :

I itialisatio

fausse
Co ditio

aie

A tio s

Mise à jou

18
 L’i ré e tatio
Avant de plonger dans les types de boucles, arrêtons- ous u i sta t a est l e d oit id al pou
pa le de l i e tatio . Qu est- e ue l i e tatio ? C est le fait d ajouter une unité à un
nombre au moyen d'une syntaxe courte. À l'inverse, la décrémentation permet de soustraire une
unité.

Par exemple, pour incrémenter une variable numérique on peut le faire de cette manière

var incrementVariable = 0;
incrementVariable = incrementVariable + 1;

Mais o peut l i e de a i e plus ou te a e l op ateu ++ (ou -- pour une décrémentation)

var incrementVariable = 0;
incrementVariable++;

Vous allez o p e d e l i t t de l i e tatio da s les e e ples des boucles qui utilisent des
Array.

Le type array
Bo , les ou les utilise t t s guli e e t u aut e t pe de do es u o appelle array, ou
tableaux en Français. Pour ne pas confondre avec les tables HTML, on va garder le terme array!

Là où les a ia les de t pe u i ue ou st i g e o tie e t u u e seule aleu , un array en

anglais, est une variable qui contient plusieurs valeurs, appelées items. Chaque item est accessible
au moyen d'un indice (index en anglais) et dont la numérotation commence à partir de 0. Voici un
schéma représentant un tableau, qui stocke cinq items :

Index 0 1 2 3 4
Item « HTML 5 » « CSS 3 » « Photoshop » « JavaScript » « jQuery »

Un array contenant 5 élément aura donc un index a i al de , est-à-dire « o ed l e ts –

1 ».

E Ja aS ipt, o i ait l array ci-dessus de cette manière.

var skills = [ HTML , CSS , Photoshop , JavaScript ,

jQuery ];

Et pour récupérer et modifier des valeurs, il faut préciser le u o de l index en crochets :

19
 skills[ ] = PHP ; //Modifier
console.log(skills[1]); //Accéder

Types de boucles

while
C est elle ui olle le plus au flu d it i-dessus. Voici sa syntaxe :

while (condition) {
action1;
action2;
}

Exemple :

Ta t u o attei t pas u div défini d u e olle tio de div, on rajoute du code HTML
aux div parcourus

http://jsfiddle.net/g8XJx/

Une existe une variante de la boucle while, la boucle do while. Elle ressemble très fortement à la
boucle while, sauf que dans ce cas la boucle est toujours exécutée au moins une fois. Dans le cas
d'une boucle while, si la condition n'est pas valide, la boucle n'est pas exécutée. Avec do while, la
boucle est exécutée une première fois, puis la condition est testée pour savoir si la boucle doit
continuer.

Cepe da t ous allez a e e t l utilise , ais il faut sa oi la e o aît e. Sa s ta e :

do {
action;
} while (condition);

for
La boucle que vous allez utiliser le plus souvent est la boucle for. Elle fonctionne de la même
a i e u u while ais l i itialisatio , la o ditio et l i e tatio se d la e t su u e seule
ligne, comme ceci :

for (initialisation; condition; incrémentation) {

action;
}

1. Dans le premier bloc, l'initialisation, on initialise une variable, généralement à 0.

2. On définit dans condition, la o ditio d a t de la ou le, afi de e pas e la fa euse
boucle infinie. Généralement on dit que la boucle continue tant que la variable initialisée est
plus petite u u e aleu d fi ie.

20
 3. Enfin, dans le bloc d'incrémentation, on indique que la variable sera incrémentée à chaque
passage de la boucle, afin de la faire arriver à la aleu d a t

Voi i u e e ple ui e se t à ie ais ui aide à o p e d e o e t ça s it

for (var iter = 0; iter < 5; iter++) {

alert('Itération n°' + iter);
}

On peut aussi partir « à l e e s » en décrémentant jusque 0.

Priorité d'exécution

Les trois blocs qui constituent la boucle for ne sont pas exécutés en même temps :

 Initialisation : juste avant que la boucle ne démarre. C'est comme si les instructions
d'initialisation avaient été écrites juste avant la boucle
 Condition : avant chaque passage de boucle
 Incrémentation : après chaque passage de boucle. Cela veut dire que, si vous faites un break
dans une boucle for, le passage dans la boucle lors du break ne sera pas comptabilisé.

Un break permet de « casser » l e utio d u e ou le et do d e so ti di e te e t.

L i st u tio continue, quant à elle permet de mettre fin à une itération, mais attention, elle ne
provoque pas la fin de la boucle : l'itération en cours est stoppée, et la boucle passe à l'itération
suivante. Mais ous l utilise ez a e e t !

Le fonctionnement même du JavaScript fait que la boucle for est nécessaire dans la majorité des cas
comme la manipulation des array. Nous verrons aussi un peu plus tard une variante de la boucle for,
appelée for in.

Exemples :

Adapter la hauteur de 3 div en fonction du plus haut des div

http://jsfiddle.net/WZ6ac/

Créer des span sous forme de « tags » à pa ti d u array

http://jsfiddle.net/EvBmX/

21
 Les fonctions

Que feriez-vous si vous devez exécuter plusieurs fois le même code ou un code similaire mais où les
variables utilisées sont différentes ? Le copier- olle est pas u e supe o e id e, est e u eu ,
ça p o o ue de la edo da e, ça alou dit le ode et le e d oi s lisi le et ça is ue d i t odui e
des e eu s… D où l i t t d utilise des fo tio s !

Ici, oubliez le ou s de ath, u e fo tio est u out de ode u o a is « à part » et u o a

nommé (le nom de la fonction) afin de pouvoir le réutiliser facilement !

Déclaration
Vous en avez vu dans les exemples précédents, une fonction se déclare comme ceci :

function nomDeLaFonction([argument1, argument2,…]) {

CODE
}

Une fonction contient les éléments suivants :

 Un nom
 U e liste d arguments. Ils sont mis entre crochets ci-dessus car ils sont facultatifs. Ils
permettent de donner des paramètres, des données en entrée à la fonction. Ils ne sont
utilisables que dans le corps de la fonction.
 Un corps ; du code quoi
 Eventuellement une valeur de retour. La fo tio peut se o te te de e ute ue du
code, mais elle peut également retourner, renvoyer un résultat ! Voilà qui est pratique 

Par exemple, nous avions vu dans un exemple précédent :

function hasClass(element, cls) {

return (' ' + element.className + ' ').indexOf(' ' + cls + '
') > -1;
}

La fo tio s appelle hasClass, elle a 2 arguments, element et cls et elle retourne un résultat,
booléen dans ce cas-ci.

Appel
U e fo tio s appelle pa so o , et si elle atte d des a gu e ts, il faud a gale e t lui e o e
lo s de l appel à la fo tio .

N ou liez pas les (), est e ui diff e ie u e fo tio d u e a ia le.

Toujou s pa appo t à l e e ple p de t, la fo tio est appel e de ette a i e

22
 var allSpans = document.querySelectorAll(".span3");
var result = hasClass(allSpans[0], "alert-pink")

Une fonction doit toujours être déclarée avant de pouvoir être appelée !

Portée des variables

O peut d la e des a ia les da s le o ps d u e fo tio . De telles a ia les s appelle t des
variables locales, car elles sont propres à la fonction, au contraire des variables globales, définies en
dehors de toute fonction et disponible à travers tout le code – et donc, également, au sein des
fonctions.

Une fois sorti du scope de la fo tio , il est plus possi le d a de à ses a iables locales, si vous
faites ça, votre code va bien planter 

Si ous d la ez et i itialisez u e a ia le lo ale du e o u u e a ia le glo ale, la aleu

prise en compte dans la fonction sera celle de la variable locale. Une fois sorti de la fonction, la
aleu glo ale ep e d a le dessus. Veillez à utilise des o s diff e ts afi d ite toute
confusion.

Si les a ia les so t p op es à la fo tio , ieu aut les e o e a ia les lo ales, est plus
propre car il faut user des variables globales avec modération !

Créer des span sous forme de « tags » à pa ti d u array, mais cette fois avec une
fo tio et utilisatio d u e a ia le lo ale

http://jsfiddle.net/cLLS2/

Les fonctions anonymes

Les fo tio s a o es so t des fo tio s ui o t si ple e t pas de o ! Mais à quoi ça sert
alors ? On ne saura jamais les appeler ?

E fait les fo tio s a o es so t t s p ati ues pou effe tue du ode lo s d u e a tio , d u
événement, sans devoi d la e u e fo tio ui e se i ait u à u e seule hose ie p ise.
Nous verrons cela plus en détails dans le chapitre sur le DOM et les événements.

Sa hez d jà u il est possi le d assig e u e fo tio a o e à u e a ia le. Je ois ue ous

fro ez les sou ils… E fait il s agit plutôt d assig e u e référence vers la fonction à une variable.
Ça s it o e e i:

//on assigne une référence vers une fonction anonyme

var changeBackground = function () {
document.body.style.background =
"url(\"http://subtlepatterns.com/patterns/escheresque_ste.png

23
 \") repeat scroll 0% 0% transparent";
};

//on appelle la fonction

changeBackground();

Testez ce code sur jsFiddle

http://jsfiddle.net/fAUwy/

Notez la p se e d u poi t-virgule à la fin de la déclaration de la fonction. Comme nous sommes

da s le as d u e assig atio , il est essai e, alo s u il e l est pas ua d o d la e u e fo tio
« normale ».

Vous verrez très souvent ce genre de s ta e e Ja aS ipt do ieu aut d jà s ha itue !

24
Les avantages de jQuery
Vous avez pu vous rendre compte a e les udi e ts du la gage ue ous e o s d e plo e que le
Ja aS ipt, est pa fois u peu p ise de t te ! Faire de petites choses dema de d i e pas al de
lignes de code et puis il faut toujours tenir compte de la compatibilité entre les différents
navigateurs. Bref, pas toujours simple.

C est su es poi ts ue jQue a ous t e t s p ieu . So sloga est « write less, do more » et
de fait, ette li ai ie a l a a tage d a oi u e s ta e ou te et fa ile à o p e d e. Elle pe et de
faire en 1 ligne ce qui demanderait des centaines de lignes de code en JavaScript pur. De plus, elle
s o upe pou ous de la o pati ilit e t e les a igateu s, est pas eau la ie ?

Un autre avantage non négligeable ce sont les plug-ins ! Il existe une flopée de ces « mini-librairies »
qui se basent sur jQuery, programmées par des gens comme vous et moi et qui ont un but bien
précis : un petit système de rating, la gestion du scroll, faire des parallax, fa ilite l utilisatio de
Google Maps, et …

jQuery utilise tout simplement du JavaScript pur et dur, celui que nous avons vu précédemment, il
a do ie de « magique » mais une fois que vous y aurez goûté, vous aurez du mal à vous en
passer ! Et tout ça gratuitement 

Ce est pas la seule li ai e Ja aS ipt ui e iste su le a h , epe da t elles o t pas toutes la

même philosophie et but que jQuery, certaines sont destinés à des programmeurs JavaScript un peu
plus chevronnés ! Voici une petite liste de ses concurrentes : MooTools, DojoToolkit, Prototype,
Yahoo UI.

Inclure jQuery dans son projet

En local
Vous pouvez tout simplement télécharger la dernière version de jQuery sur
http://jquery.com/download/, préférez la version « compressée » ou minifiée. Ensuite, ajoutez le
fichier à votre projet et ajoutez le tag script aux pages qui nécessitent jQuery comme décrit dans le
chapitre Inclure du JavaScript dans une page HTML

Via CDN
U e aut e possi ilit est d utilise u Content Delivery Network, ou CDN. E g os, est u site e
qui héberge une version de jQuery et vous pouvez directement pointer vers ce site pour inclure
jQuery dans vos pages.

Il en existe plusieurs : chez Microsoft, chez Google, et même chez jQuery. Il existe de multiples
avantages :

 Vous ne devez pas gérer le fichier vous-même

 Les CDNs sont des serveurs répartis partout dans le monde, donc vos visiteurs
t l ha ge o t u fi hie d u se eu p s de hez eu , est do plus apide

25
  Co e d aut es sites utilise t les CDNs, os visiteurs auront peut-être déjà jQuery dans le
a he de leu a igateu u u ils se o t pass s su u de es sites p de e t, ot e
navigateur de devra dès lors plus télécharger le fichier.

Avec le CDN jQuery (pour la version 1.9.1 minifiée)

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Si vous souhaitez toujours la dernière version, vous pouvez utiliser ceci

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Avec le CDN Microsoft (pour la version 1.9.0 minifiée)

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
1.9.0.min.js"></script>

Avec le CDN Google (pour la version 1.9.1 minifiée)

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></
script>

Plus d i fos su http://jquery.com/download/

Le DOM

Comprendre le Document Objet Model

Co e ous tes d jà fa ilie s a e l HTML, ous sa ez ue le ode HTML peut t e ep se t

sous fo e d u arbre. Le code HTML suivant :

<html lang="en">
<head>
<title>Le titre de ma page</title>
<meta name="description" content="youhouuu">
</head>

<body>
<div class="container">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>Texte d’introduction</p>
</div>

26
 <div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn" href="#">Plus d’infos</a></p>
</div>
</div>
</div>
</body>
</html>

Peut être représenté sous cette forme

Le DOM ou Document Object Model, est u e ep se tatio du ode HTML sous fo e d arbre
d objets (appelés Nodes). C est sous ette fo e ue le HTML est « mémorisé » par le navigateur. Il
est possi le, e Ja aS ipt, de pa ou i et a e et do d a de à tous les éléments d u e page
HTML en vue de la modifier en rajoutant, modifiant ou supprimant des éléments!

Une remarque sur le schéma : le texte ui se t ou e da s u tag pa e e ple le te te d u lie est

vu par le DOM comme un Node spécifique (de type #text).

Note de vocabulaire : dans un cours sur le HTML, on parlera de balises HTML (une paire
de balises en réalité : une balise ouvrante et une balise fermante). Ici, en JavaScript, on
parlera d'élément HTML, pour la simple raison que chaque paire de balises (ouvrante et
fermante) est vue comme un élément.

27
 Introduction aux objets
Mais que signifie terme « objet » dans « Document Object Model »? Vous avez peut-être déjà
entendu de « langage orienté objet », comme le Java ou le C#. Et bien JavaScript lui aussi est
« orienté objet ».

C est u peu a st ait alors on va éviter de partir dans des considérations trop informatiques mais
pou fai e si ple diso s u u o jet est u e a i e de st u tu e des i fo atio s.

En fait, les types Number, String, Boolean et Array rencontrés précédemment sont des types
d o jets, appelés objets natifs.

O e o ait les o jets a ils peu e t o te i t pes d i fo atio : des propriétés et des
méthodes. U e p op i t est u e a ia le ui appa tie t à l o jet et u e thode est u e fo tio
propre à l o jet.

U o jet s i itialise ou s’i sta ie à l aide de e u o appelle u constructeur. Tout cela est fait
automatiquement pour les objets natifs. Nous en verrons plus tard.

// On crée un objet String

var myString = 'Ceci est une chaîne de caractères';

// On affiche le nombre de caractères, au moyen de la

propriété « length »
console.log(myString.length);

// On récupère la chaîne en majuscules, avec la méthode

toUpperCase()
console.log(myString.toUpperCase());

Donc, chaque élément du DOM est un objet et possède donc des propriétés et des méthodes. Par
exemple, si on récupère un élément qui correspond à un div, on va pouvoir faire :

Changer le style d u div et ett e le o te u d u div enfant en majuscules

http://jsfiddle.net/kbAQU/

Le div a une propriété style qui elle-même a une propriété backgroundColor et padding
ui pe ette t espe ti e e t d i flue su les st les CSS background-color et padding.

Dans la majorité des exemples vus précédemment, on utilisait des objets ainsi que leurs propriétés
et méthodes.

Note de vocabulaire : dans le vocabulaire du DOM, on parle souvent de Node œud et d

Element (élément)

1. Un Node peut t e i po te uel t pe d o jet da s le DOM

2. Un Element est un type de Node spécifique, qui peut être exprimé sous forme de

28
 balise HTML, qui peut avoir des attributs comme id ou class, peut avoir des
l e ts e fa ts, et …

O dit u u Element hérite d u Node. Un Element possèdra donc toutes les

p op i t s et thode d u Node.

Attention : le Node #text qui représente du texte simple, est un Node et pas un
Element !

Les objets window et document

L’o jet window

L o jet window est le point de départ du DOM, il représente la fenêtre du navigateur. En JavaScript,
l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier dans
son code.

De même, lorsque vous déclarez une variable dans le contexte global de votre script, cette variable
deviendra en vérité une propriété de l'objet window.

Toute variable non déclarée (donc utilisée sans jamais écrire le mot-clé var) deviendra
immédiatement une propriété de l'objet window, et ce, quel que soit l'endroit où vous
utilisez cette variable ! Ça peut être très pratique mais utilisez cette particularité en
connaissance de cause et préférez le mot-clé var pour déclarer vos variables.

Quelques p op i t s p ati ues de l o jet window :

 history : pe et d a de à l histo i ue de a igatio pou la fe t e e ou s

 document : pe et d a de au do u e t HTML oi hapit e sui a t
 location : pe et d o te i des i fo atio s su l U‘L ou a t
 navigator : pe et d o te i des i fo atio s du a igateu

Affi hage de uel ues p op i t s de l o jet window et de ses sous-objets

http://jsfiddle.net/4v3Ed/

Quel ues thodes p ati ues de l o jet window :

 alert() : pour afficher un message (pratique pour débugger ;))

 open() : pour ouvrir une nouvelle fenêtre, comme une bonne vieille pop-up – maintenant
bloquée par les navigateur
 scrollTo() : pour positionner le scroll jusque un point précis

Toutes les p op i t s et thodes de l o jet window

https://developer.mozilla.org/en-US/docs/DOM/window

29
 L’o jet document
L o jet document est u e p op i t de l o jet window, il correspond au tag <html>. C est et o jet
ui ep se te la page e et est ia lui ue l o a pou oi a de au l e ts HTML du DOM
pour ensuite les modifier.

Lecture et modification du DOM

Il est donc possi le, e Ja aS ipt et jQue , de odifie le DOM. C est e odifia t le DOM u o
peut par exemple afficher un tooltip quand on clique sur une image, une fenêtre modale, un
ale d ie ou des essages d e eu s lo s u o fo ulai e est pas alide. Chaque modification
consiste en :

1. S le tio e l l e t HTML u o souhaite odifie pa e e ple, u div à afficher en tant

que tooltip ou fenêtre modale)
2. Faire quelque chose avec cet élément, comme :
a. Changer ses propriétés, par exemple sa position, sa couleu de fo d,…
b. Ajoute du o te u à l l e t
c. Supp i e l l e t de la page HTML
d. ‘ up e de l i fo atio de l l e t, pa e e ple le te te d u input
e. Ajouter/supprimer des classes CSS, par exemple pour changer sa visibilité, sa
t pog aphie,…

Une fois l l e t s le tio , o peut ide e t lui appli ue plusieu s a tio s.

Nous allons voir comment cela est possible en JavaScript pur et en jQuery.

En JavaScript pur
Dans ce chapitre nous allons brièvement exposer les propriétés et méthodes des objets Node et
Element ui pe ette t d a de plus e p ofo deu au DOM et de le odifie .

Nous allo s pas ous atta de dessus, les es possi ilit s e iste t e jQue et ous les e o s
dans le chapitre ad hoc. Mais cela vous donnera déjà un aperçu des possibilités offertes « de base »
par JavaScript.

Sélectionner un élément (méthode classique)

L o jet document poss de thodes ui pe ette t d a de au l e ts du DOM :

 getElementById() : pe et d a de à u l e t e sp ifia t so id (attribut id en HTML)

 getElementsByTagName() : retourne un array d l e ts ui o espo de t au tag sp ifi
 getElementsByName() : retourne un array d l e ts d u fo ulai e do t le l att i ut
name correspond au name spécifié

Bon, ces méthodes sont quand un peu limitées pour des actions complexes, si par exemple on veut
a de à tous les td d u e ta le, o a de oi i e u ode assez o he et lou d, a e des
ou les… ais diso s ue est p ati ue et pe fo a t pou des a tio s t s si ples et i l es.

30
 Sélectionner un élément (méthode récente)
Du coup, deux méthodes sont récemment venues compléter les 3 « classiques » pour accéder plus
rapidement aux éléments du DOM. Malheureusement elles ne sont pas supportées par tous les
browsers. Ce qui les rend un peu inutiles…

Elles utilise t, o e jQue d ailleu s, les sélecteurs CSS sous forme de string en paramètre.

 querySelector() : renvoie le premier élément trouvé qui correspond au sélecteur CSS

 querySelectorAll() : revoie un array avec tous les éléments qui correspondent au sélecteur
CSS

Ta t u o attei t pas u div d fi i d u e olle tio de div, on rajoute du code HTML

aux div parcourus – otez l utilisatio de querySelectorAll()

http://jsfiddle.net/g8XJx/

Adapter la hauteur de 3 div en fonction du plus haut des div – otez l utilisatio de
getElementById() et children

http://jsfiddle.net/WZ6ac/

Modifier un élément
P op i t s et thodes de l o jet Element permettant de le modifier:

 getAttribute() et setAttribute() : permettant respectivement de récupérer et d'éditer un

attribut. Le premier paramètre est le nom de l'attribut, et le deuxième, dans le cas de
setAttribute() uniquement, est la nouvelle valeur à donner à l'attribut.
 Attributs accessibles comme id, title, href, style, value, et …
 className : up e et dite l att i ut HTML class atte tio , est u e string avec toutes
les classes sous format texte)
 innerHTML : up e et dite l HTML e fa t d u l e t sous fo at te te
 innerText (< IE 9) et textContent : le même que innerHTML excepté le fait que seul le texte
est récupéré, et non les balises.

P op i t s et thodes de l o jet Node pe etta t d ajoute ou eti e des l e ts e fa t:

 appendChild() : ajouter un Node aux enfants

 insertBefore() : ajouter un Node aux enfants avant un autre Node
 insertAfter() : ajouter un Node aux enfants après un autre Node
 removeChild() : retirer un Node enfant
 replaceChild() : remplacer un Node enfant
 hasChildNode() : retourne un booléen qui permet de savoir si le Node a des enfants

31
 Créer des span sous forme de « tags » à pa ti d u array – otez l utilisatio de
createElement(), createTextNode() et appendChild()

http://jsfiddle.net/cLLS2/

Créer un nouvel élément

Il est également possible de créer des nouveaux Element en JavaScript via la méthode
document.createElement(). Cette méthode demande un paramètre une string avec le nom du tag
o espo da t à l l e t souhait , pa e e ple :

var newLink = document.createElement('a');

On crée ici un nouvel élément <a>. Cet élément est créé, mais n'est pas inséré dans le document, il
n'est donc pas visible. La méthode document.createTextNode() permet quant à elle de créer un
Node #text. Ces thodes so t eau oup plus pe fo a tes ue la atio d l e ts e jQue ,
que nous verrons également.

Cela dit, o peut d jà t a aille su l l e t e, e lui ajouta t des attributs ou même des
e e ts ue ous e o s da s le hapit e sui a t . O peut l ajoute au DOM ia la thode
appendChild() de l o jet Node.

En jQuery
jQue est eau oup plus puissa t pou e ui est de l a s et la odifi atio du DOM. Il utilise
i te si e e t les s le teu s CSS et s o upe de la o pati ilit a e les a igateu s, e a e le
bon vieux IE6.

Sélectionner un élément à l’aide des sélecteur CSS

Si vous êtes familiers avec les CSS, vous avez les armes pour travailler avec jQuery ! Ils permettent de
sélectionner un élément HTML à partir de son style.

La syntaxe de base est celle-ci :

$ sélecteur

Le caractère $ est e u o appelle l’o jet jQuery. C est le poi t de d pa t de i po te uelle a tio
que vous allez effectuer avec jQuery. Vous verrez de temps en temps cette syntaxe :

jQuery sélecteur

Ce qui revient à la même chose que le caractère $, ais u o utilise pa fois pa sou is de
compatibilité – si une autre librairie utilise déjà le symbole $.

Les sélecteurs CSS de base o e l ID, la lasse ou le o de l l e t so t le œu des CSS

32
 ID
Comme document.getElementById(), on peut sélectionner un élément à partir de son ID avec jQuery

//façon oldschool
var message = document.getElementById message ;

//façon jQuery
var message = $ #message ;

Notez l utilisatio du a a t e # a a t l ID e uestio , o e e CSS

No de l’élé e t
Comme document.getElementsByTagName(), jQuery permet de sélectionner des éléments HTML à
partir de leur nom de tag.

//façon oldschool
var linksList = document.getElementsByTagName a ;

//façon jQuery
var linksList = $ a ;

C est ua d e plus ou t o ? 

Classe
Un autre sélecteur super pratique qui permet de sélectionner un ou plusieurs éléments à partir de
leur classe CSS.

Cette façon de faire est possible avec les nouveautés du DOM document.getSelector() et
document.getSelectorAll() mais comme déjà dit, ces méthodes ne sont pas supportées par tous les
navigateurs. Autant donc passer directement par jQuery !

U e e ple d utilisatio :

//façon jQuery
var subMenus = $ .submenu ;

Notez l utilisatio du . qui définit une classe comme en CSS.

33
 Sélecteurs CSS de base – activez la console Firebug pour voir les résultats

http://jsfiddle.net/aASEX/

Vérifier si un élément existe

Pou si ple e t ifie u u l e t e iste e jQue , il faut s le tio e l l e t et ifie si
sa propriété length est plus grande que 0

if($("#blabla").length > 0){

console.log(« OK ») ;
}

Modifier un élément
Une fois votre élément s le tio , ous pou ez effe tue u e s ie d a tio à pa ti de et l e t.

Lire et modifier son texte

La méthode text() pe et de odifie le te te d u l e t HTML, pa e e ple le te te d u lie ,
d u h , et … Si ous e o ez du ode HTML à ette thode, elle affichera le code HTML dans la
page, comme si vous vouliez montrer du code aux visiteurs.

$ #errors h .text Pas d erreurs trouvées ;

Si vous ne donnez aucun texte en paramètre à la méthode, dans ce cas vous pouvez récupérer la
valeur du te te de l l e t, pou le ett e da s u e a ia le pa e e ple.

La méthode html() ua t à elle pe et de odifie le o te u HTML d u l e t. Si l l e t

sélectionné contient déjà du inner HTML, celui-ci sera remplacé par celui que vous spécifiez en
paramètre.

$ #errors h .html <span>Pas d erreurs trouvées</span> ;

Si vous ne donnez aucun texte en paramètre à la méthode, dans ce cas vous pouvez récupérer la
valeur du inner HTML l l e t, pou le ett e da s u e a ia le pa e e ple.

Modification de contenu avec text() et html()

http://jsfiddle.net/kmRBL/

34
 Lire et modifier ses attributs
La méthode attr() permet de lire la aleu d u att i ut d u l e t. Pa e e ple, pou up e
l ad esse d u e i age da s la page, ous pou iez fai e e i

var imagePath = $( #banner img .attr src ;

Si vous passez un 2ème attribut à la méthode attr(), ous pou ez alo s d fi i la aleu de l att i ut e
uestio . Si ous souhaitez pa e e ple odifie le he i e s l i age de l e e ple p de t :

$ #banner img .attr src , images/newImage.png ;

Si vous souhaitez effacer un attribut, là il faut utiliser la méthode removeAttr(). Par exemple pour
eti e l att i ut alt de l i age :

$ #banner img .removeAttr alt ;

Modifi atio d att i uts a e attr() et removeAttr()

http://jsfiddle.net/MLtMt/

Lire et modifier son style

Via les classes CSS

jQue off e plusieu s thodes pou a ipule l att i ut class d u l e t.

addClass() ajoute la classe CSS spécifiée en paramètre à l l e t s le tio . Cette thode

ase pas les lasses d fi ies p de e t ais se o te te de ajoute la lasse spécifiée.

$ .btn .addClass btn-success ;

removeClass() fait e a te e t l i e se e e le a t la lasse CSS sp ifi e de l l e t s le tio .

$ .btn .removeClass btn-success ;

35
toggleClass() ua t à elle ajoute la lasse si elle e iste pas et l e l e si elle e iste. C est p ati ue
pour des éléments qui ont un état « on/off » par exemple.

Modification de classes CSS avec addClass() et removeClass()

http://jsfiddle.net/zgSF8/

Via les propriétés CSS

I agi o s ue ous oulez di e te e t ha ge le st le d u l e t sa s passe pa des lasses
CSS. C est possi le ia la thode css(). Vous pouvez utiliser de 3 manières différentes :

 pou t ou e la aleu e ista te d u e propriété CSS

 pour modifier une p op i t CSS d u l e t
 pour modifier plusieurs propriétés à la fois

Vous allez surtout utiliser cette méthode pour modifier une propriété. Par exemple :

$ .btn .css font-size , 00% ;

Modification de styles CSS avec css()

http://jsfiddle.net/fHPYs/

Supprimer un élément
Vous pouvez bien entendu effacer un ou plusieurs éléments de la page web avec remove().

Mettons que vous avez un div a e l ID « popup », qui serait une fenêtre modale, et que vous voulez
l effa e de la page :

$ #popup .remove ;

Cela marche aussi si vous spécifiez un sélecteur qui concerne plusieurs éléments – ils seront tous
effacés.

Vous pouvez également remplacer un élément par autre chose avec replaceWith(). Disons que vous
avez une img a e l ID « product101 » et vous voulez mettre du texte à la place car le produit lié a
t ajout à u pa ie d a hat.

36
 $ #product 0 .replaceWith <p>Ajouté au panier</p> ;

Ajouter du contenu à la page

Créer un nouvel élément

Il est bien sûr possible de créer du nouveau contenu « dynamiquement » en JavaScript et jQuery de
le ajoute à la page. Pou e fai e, il faut sp ifie à l o jet jQue le tag a e alises ui
o espo da t à l l e t ue ous souhaitez e .

Par exemple, pour créer un nouvel élément qui correspond à un span :

var newSpan = $("<span></span>");

Vous pouvez également créer un nouvel élément en utilisant la manière JavaScript pure
avec document.createElement() – cette façon de faire est plus rapide que la manière
jQuery.

Rajouter un nouvel élément à la page

Une fois le nouvel élément créée, vous pouvez utiliser les méthodes append(), prepend(), after() ou
before() pou l ajoute à la page e :

 append() : ajoute l l e t ou le ode HTML sp ifi e st i g e pa a t e o e

de ie e fa t de l l e t s le tio
 appendTo() : ajoute l l e t s le tio à u pa e t, o e p e ie e fa t
 prepend() : ajoute l l e t ou le ode HTML sp ifi e st i g en paramètre comme
p e ie e fa t de l l e t s le tio
 prependTo() : ajoute l l e t s le tio à u pa e t, o e de ie e fa t
 after() : ajoute l l e t ou le ode HTML sp ifi e st i g di e te e t ap s l l e t
sélectionné
 before() : ajoute l l e t ou le ode HTML sp ifi e st i g di e te e t a a t l l e t
sélectionné

var newSpan = $("<span></span>");

$ #tags .append newSpan ;

37
 Ta t u o attei t pas u div d fi i d u e olle tio de div, on rajoute du code HTML
aux div parcourus – on utilise jQuery et la méthode append()

http://jsfiddle.net/4XbR5/

Enchainement de méthodes
U e fo tio alit supe i t essa te de jQue est e u o appelle l e hai e e t de thodes.
En fait, toutes les méthodes que nous venons de voir peuvent être connectées, mises à la chaine
l u e de l aut e. Cela pe et de fai e plusieu s hoses e u e seule lig e de ode !

Par exemple, si nous voulons en une seule fois :

 créer un élément span

 lui ajouter une classe « orange »
 lui ajouter du texte « HTML 5 »
 le ajoute à u aut e l e t a e l ID « tags »

Nous pouvons écrire ceci :

$("#tags").append(
$ "<span></span>" .addClass "orange" .text HTML
);

Génial non ? Si vous trouvez cela dur à lire, vous pouvez écrire chaque méthode à la ligne, comme
ceci :

$("#tags").append(
$("<span></span>")
.addClass("orange")
.text HTML
);

Créer des span sous forme de « tags » à pa ti d u array – on utilise jQuery avec la
atio d l e t, append() et text(), avec enchainement des méthodes

http://jsfiddle.net/GDALW/

Agir sur plusieurs élé e ts d’u e séle tio

Bo , est houette tout ça ais si o oulait effe tue u e e a tio su plusieu s l e ts,
o e t s p e d ait-on ?

Pa e e ple, i agi o s u o ait u e page a e plusieu s hapit es et ue ous oulo s g e

une table des matières automatiquement, sans se prendre la tête. Si un jour on rajoute un chapitre,
la table des matières se mettrait à jour toute seule.

38
Vous vous rappelez des boucles et plus précisément de la boucle for ? Elle nous permettait de
ou le su u e se le d l e ts, h ie une possibilité similaire existe un jQuery : la méthode
each().

La méthode each() peut être chainée à une sélection afin de « boucler » sur chaque élément de la
s le tio et leu appli ue la e a tio , au sei d u e fo tio a o e. Sa s ta e est elle-ci :

$ sélecteur .each(function() {
action1;
action2;
action3;
…

});

Ça fait beaucoup de ( et de { tout ça hein ? Les parenthèses et les accolades sont mises en évidence
pour plus de clarté. Commencez toujours par éc i e le lo d i st u tio sa s ode à l i t ieu puis
e plissez a e ot e ode, ous fe ez oi s d e eu s.

U e fois à l i t ieu du ea h , vous allez ie sou e t de oi a de à l l e t ou a t afi de

lire ou modifier ses propriétés. Dans le cas de notre table des matières, nous devrons accéder au
nom du chapitre et à son ID pour pouvoir créer un lien (ancre).

Cela est possible via le mot-clé this, ce mot-clé o espo d à l l e t ou a t du DOM Element). A
chaque passage de boucle, la valeur de this changera : il correspondra au premier élément au
premier passage, au deu i e l e t au deu i e, ai si de suite… Cependant this ne vous
pe ett a d a de u au thodes et p op i t s sta da d de l o jet Element, si vous voulez faire
du jQuery avec, il va falloir le « transformer » en équivalent jQuery en écrivant $(this).

$("h2").each(function() {
//on récupère le texte
var chapterName = $(this).text();
console.log(chapterName);
});

Adapter la hauteur de 3 div en fonction du plus haut des div –on utilise jQuery et les
méthodes each() et css()

http://jsfiddle.net/jY4bL/

Créer une table des matières automatiquement en jQuery

http://jsfiddle.net/GNGRm/

39
 Plus sur le DOM: http://api.jquery.com/category/manipulation/

Les événements

Le o ept d’évé e e t

On dit souvent que JavaScript permet de faire des sites web interactifs, en effet, on voit souvent
da s les sites e des a tio s ui se d le he t lo s u o i te agit a e des l e ts su la page :
oîte de dialogue ui s ou e lo s d u li de sou is sur un lien, des éléments qui changent de taille
ou de couleur quand la souris passe dessus, des interactions possibles avec le clavier, et … tout ela
est possible grâce aux événements.

Un événement représente le moment précis où quelque chose arrive, pour vous permettre de mieux
comprendre, voici une liste des événements principaux des éléments HTML :

Nom Action pour le déclencher

click Cliquer (appuyer puis relâcher) sur l'élément
dblclick Double-cliquer sur l'élément
mouseover Faire entrer le curseur sur l'élément
mouseout Faire sortir le curseur de l'élément
mousedown Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément
mouseup Relâcher le bouton gauche de la souris sur l'élément
mousemove Faire déplacer le curseur sur l'élément
keydown Appuyer (sans relâcher) sur une touche de clavier sur l'élément
keyup Relâcher une touche de clavier sur l'élément
keypress Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
focus « Cibler » l'élément – comme cliquer da s u ha p d u fo ulai e
blur Annuler le « ciblage » de l'élément – o e so ti d u ha p d u fo ulai e
change Changer la valeur d'un élément spécifique aux formulaires (input, checkbox, etc.)
select Sélectionner le contenu d'un champ de texte (input, textarea, etc.)
submit Envoyer un formulaire (spécifique au tag <form>)

Mais il e iste des e e ts sp ifi ues pou l o jet window également, comme :

Nom Action pour le déclencher

resize Redimensionner la fenêtre du navigateur
scroll Scroller dans la fenêtre
load La page e a fi i d t e ha g e tous les o jets du DOM so t ha g s ai si que
les images et sous-frames).

Pou i fo, l e e t resize sera très utile dans le cas où vous voulez faire un site web responsive,
est-à-di e ui s adapte e fo tio de l a du isiteu a o al, ta lette, s a tpho e,et …

40
 Associer un événement à un élément

Associer un événement à un élément en JavaScript ou jQuery ressemble très fort à ce que nous
a o s u pou odifie les p op i t s d u l e t, ela o siste e tapes :

1. Sélectionner le (ou les) élément(s) HTML avec le(s)quel(s) le visiteur va intéragir

2. Assig e l e e t à l l e t : on défini a le o de l e e t pa appo t au ta leau
du chapitre précédent.
3. Passe u e fo tio à l e e t : ette fo tio o tie t le ode, l a tio ui a se passe
lo s du d le he e t de l e e t.

En JavaScript
Concrètement il existe plusieurs mani es d asso ie u e e tàu l e t HTML en
JavaScript pur, retenez surtout la première :

1. Via le DOM, e asso ia t l e e t e Ja aS ipt de la a i e « DOM-0 ». On assigne

une fonction anonyme à une propriété qui se nomme « on » + o de l’évé ement, comme
ceci :

//on récupère l’élément HTML

var myButton = document.getElementById('myButton');

//on assigne une fonction anonyme à sa propriété ‘onclick’

myButton.onclick = function() {
console.log("Clic sur le bouton");
};

2. Via le DOM, à la manière « DOM-2 ». C est plus « propre » mais il y a pas mal de problèmes
de compatibilité entre les navigateurs (Internet Explorer gère différemment des autres le
le de ie d u e e t , du oup est assez o pli u à utilise . Cette manière fait
appel à la méthode addEventListener(). Sachez les reconnaitre mais préférez la manière plus
simple du « DOM-0 »

//on récupère l’élément HTML

var myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
console.log("Clic sur le bouton");
}, false);

3. Di e te e t depuis l HTML. Cette thode est à p os i e a elle la ge le ode et

l HTML et e espe te do pas la separation of concerns. C est o e ua d ous ettez
des st les di e te e t depuis l att i ut style sans passe par une CSS, pas terrible quoi. Cela
s it de ette a i e :

<button id="myButton" onclick="console.log(‘Clic sur le

bouton’);">Un bouton</button>

41
 Avec jQuery
Avec jQuery, nous allons comme toujours utiliser les sélecteurs CSS pour sélectionner le(s)
l e t s au uel s asso ie l e e t.
Ensuite nous allons chainer une méthode dont le nom correspond exactement au tableau des
événements. Par exemple click() ou mouseover().
Enfin nous allons passer une fonction, généralement une fonction anonyme.

Syntaxe :

$ sélecteur’).événement(function() {
action1;
…
});

//action sur le clic du bouton avec l ID « start »

$ #start .click function {
console.log Vous avez cliqué ! ;
});

Créer des span sous forme de « tags » à pa ti d u array – on utilise jQuery avec des
événements souris

http://jsfiddle.net/S8nt7/

Il est possi le d appele u e e t a uelle e t si ous oulez pa e e ple, si ule u li de

sou is su u l e t à pa ti d u e aut e a tio , da s e as, il suffit d appele la thode
o espo da t à l e e t su l l e t sélectionné mais sans fournir de paramètre à la
méthode.

Il e iste u e e t suppl e tai e e jQue ui e iste pas ati e e t e Ja aS ipt, est

l e e t hover(). Il est à utiliser quand vous voulez effectuer une action lorsque la souris passe
sur un élément et puis une autre action lorsque la souris « sort » de l l e t.
Il faut donc lui donner 2 « actions », en code cela va se traduire par 2 fonctions anonymes à passer à
l e e t. Voi i sa s ta e :

$ sélecteur’).hover(
function() {
//A tio ua d la sou is passe su l l e t
},
function() {
//A tio ua d la sou is pa t de l l e t
}

42
);

Par exemple, supposons que le visiteur passe sa souris au-dessus d u lie a e l ID « menu », vous
voulez faire apparaître un div (par défaut non- isi le a e l ID « submenu ». Quand la souris quitte
le lien, vous voulez faire de nouveau disparaître le « submenu »

$ #menu .hover function {

$ #submenu .show ;
}, function() {
$ #submenu .hide ;
}) ;

Afficher la table des matières auto-g e lo s d u passage de la sou is

http://jsfiddle.net/r8rPS/

Atte dre le harge e t de l’HTML

Quand une page web se charge, le navigateur va immédiatement essayer de lancer tous les scripts
u il e o t e. Ça peut t e p o l ati ue a e u s ipt ui a ipule le o te u de la page et ui
se la e a a t ue tout le o te u de la page soit ha g … Cela g e a plei d e eu s !

Il faut donc dire au script « attend que la page soit chargée pour te lancer ».

C est possi le e Ja aS ipt ia la thode window.load() mais cette méthode attend que tous les
contenus associés (images, CSS, scripts, ani atio s Flash, id os… soie t ha g s pou se la e et
ça peut prendre pas mal de temps ! Heureusement, jQuery fournit la méthode ready() qui attend
ue la page soit ha g e ais atte d pas tous les o te us o e les i ages, id os, ou aut e.

La syntaxe de cette instruction est celle-ci :

$(document).ready(function() {
//votre code ici
}) ;

Une variante plus courte :

$(function() {
//votre code ici
}) ;

Vous devez rajouter ce code à chaque page où vous souhaitez exécuter du code lorsque la page est
chargée. Si vous vous retrouvez avec plusieurs ready(), e est pas u p o l e.

43
 L’o jet Event

Vous vous demandez peut-être : « mais comment je fais pour récupérer la position de la souris
alors ? » ou « o e t je peu sa oi su uelle tou he l utilisateu ie t d appu e ? ». On peut
ie sû up e es i fo atio s, ça se fait ia l o jet Event.

Cet objet est bien particulier dans le sens où il n'est accessible que lorsqu'un événement est
déclenché. Son accès ne peut se faire que dans une fonction exécutée par un événement, cela se fait
de la manière suivante en jQuery

//variable e en paramètre : l’objet Event !

$(‘#myButton’).click(function(e) {
console.log(e.pageX);
console.log(e.pageY);
});

L o jet Event o tie d a des p op i t s diff e tes e fo tio du t pe d e e t, si l e e t

est une action avec la souris il contiendra pageX et pageY (les coordonnées de la souris), tandis que
si est u keypressed il contiendra which (le code ASCII de la touche).

Passe d u hapit e à l aut e a e les tou hes du la ie « p » et « n »), à la Google

‘eade . Notez l utilisatio d u constructeur et de la méthode push() d u array

http://jsfiddle.net/sfWns/

Passe d u hapit e à l aut e a e les tou hes du la ie « p » et « n ») à la Google

‘eade . Notez l utilisatio d u constructeur et de la méthode push() d u array.

Remarquez la gestion du scroll pour faire apparaitre un lien « retour au début »

http://jsfiddle.net/Wfgcm/

Une librairie jQuery pour gérer les positions du scroll

https://github.com/sxalexander/jquery-scrollspy

Stopper le o porte e t or al d’u évé e e t

Certains éléments HTML ont une réponse préprogrammée aux événements, par exemple un lien
ha ge u e page ua d o li ue dessus, u fo ulai e e oie ses do es à u se eu e , et …
Il a i e ue l o euille « couper » le comportement normal de cet événement : que le lien ne
redirige pas vers la page ou que le formulaire ne poste pas ses données vers le serveur car certains
de ses champs ne sont pas remplis correctement.

44
Da s e as, il suffit, u e fois da s le o ps de la fo tio a o e asso i e à l e e t,
d appele la thode preventDefault() de l o jet E e t ou de si ple e t etou e la aleu false.

$(‘#myLink’).click(function(e) {
e.preventDefault();
});

Equivaut à

$(‘#myLink’).click(function(e) {
return false;
});

Plus sur les événements : http://api.jquery.com/category/events/

Plus loin avec jQuery

Les objets littéraux

Déclarer et utiliser un objet littéral

Les objets littéraux permettent de créer une liste de propriétés et valeurs en JavaScript. Ils sont
beaucoup utilisés pour paramétrer les plug-ins jQuery, pour configurer les animations jQuery ou
e o e des do es e AJAX a ils pe ette t d e o e plusieu s pa a t es e u e seule fois.

La syntaxe pour créer un objet littéral est celle-ci :

{
propriété1 : valeur1 ,
propriété2 : valeur2
}

La propriété et la valeur sont séparés par : et chaque paire propriété/valeur doit être séparée par
une virgule mais il ne fait pas en mettre après la dernière paire propriété/valeur ! Les apostrophes
autour des propriétés sont facultatives sauf si les noms des propriétés contiennent des caractères
spéciaux.

O peut e u o jet litt al et l asso ie à u e a ia le

var data = {
firstName : Michel ,
lastName : Dupont ,
city : Bruxelles
};

45
Et après on peut bien sûr récupérer chaque propriété individuellement :

console.log(data.firstName);

Voici u e e ple d utilisatio d o jet litt al passé en paramètre de la méthode animate()

$ #menu .animate
{
left : 0 ,
fontSize : 15
}
);

Autre utilisatio d’u o jet littéral : le tableau associatif

Sous le capot, un objet littéral est en fait un Array ou ta leau u o appelle ta leau associatif.

Pour rappel, un Array est une variable qui contient plusieurs valeurs, appelées items. Chaque item
est accessible au moyen d'un indice (index) numérique. Dans un tableau associatif, on accède à un
item non pas par un indice numérique mais pas une valeur textuelle appelée clé (ou key).

Les propriétés d u o jet litt al peu e t t e do ues o e des clés ui pe ette t d a de

aux valeurs du tableau associatif.

On pourrait donc écrire

var data = {
firstName : Michel ,
lastName : Dupont ,
city : Bruxelles
};

data[ firstName ] = Jean ;

Pour rajouter des éléments à ce tableau, il suffit simplement de spécifier une nouvelle propriété/clé
en lui donnait une valeur, par exemple :

data.country = Belgique ;

Ou sous cette forme

46
 data[ country ] = Belgique ;

La boucle for in
Il existe une variante de la boucle for ui s appelle for in. Cette boucle permet de boucler sur un
tableau associatif (et donc par définition, sur un objet littéral !). Le fonctionnement est quasiment le
même que pour un Array, excepté qu'ici il suffit de fournir une « variable clé » qui reçoit un
identifiant (au lieu d'un index) et de spécifier l'objet à parcourir :

for(var key in data) {

console.log(data[key]);
}

Quel est l i t t ? Les objets littéraux se voient souvent attribuer des propriétés ou méthodes
supplémentaires par certains navigateurs ou certains scripts tiers utilisés dans la page, ce qui fait que
la boucle for in va permettre de tous les énumérer.

Les effets visuels

Dans les chapitres précédents, vous avez appris la base de jQuery : sélectionner des éléments, les
modifier, et leur attacher des événements.

Mai te a t est l heu e de passe au ôt le plus fu de jQue y, les effets visuels ! Comme pour la
modification et les événements, il faut :

1. Sélectionner le (ou les) élément(s) HTML avec le(s)quel(s) sur le(s)quel(s) on veut appliquer
un effet
2. Appli ue l effet ia la thode ad ho e do a t des pa a t es à la thode d effet
pour le « contrôler »

Apparaître et disparaître
Les effets les plus simples sont aussi les plus souvent utilisés. Voici les méthodes qui permettent de
faire apparaître et disparaître des éléments.

 show() : affiche un élément caché

 hide() : cache un élément affiché
 toggle() : si l l e t est a h , il s affi he ; s il est affi h , il se a he
 fadeIn() : affiche un élément caché de manière progressive
 fadeOut() : cache un élément affiché de manière progressive
 fadeToggle() : si l l e t est a h , il s affi he ; s il est affi h , il se a he ais de a i e
progressive
 slideDown() : affiche un élément caché avec un effet de glissement
 slideUp() : caché un élément affiché avec un effet de glissement

47
  slideToggle() : si l l e t est a h , il s affi he ; s il est affi h , il se a he a e u effet de
glissement

Toutes es thodes peu e t e e oi u pa a t e pou o t ôle la itesse d appa itio ou de

disparition. Il se précise soit en string : slow’, or al’ pa d faut ou fast’ ; soit en nombre de
millisecondes. Par exemple :

//fait disparaitre lentement tous les div

$ div .fadeOut slow ;

Un autre effet permet de faire passer un élément à une certaine opacité : fadeTo(). Il prend en
paramètre une valeur de vitesse, comme les aut es, ais aussi u pou e tage d opa it .

Effets de base (disparition et apparition)

http://jsfiddle.net/r3XH9/

Les animations
Il est possible de faire des animations plus personnalisées grâce à la méthode animate() qui permet
de joue a e toute les p op i t s CSS u i ues taille de la poli e, positio d u l e t, opa it ,
la geu d u e o du e,…

Cette méthode prend plusieurs paramètres :

 un objet littéral avec la liste des p op i t s CSS u o d si e ha ge et les aleu s ue

doi e t attei d e l a i atio . Pa e e ple si ous oulez a i e u l e t e le d plaça t
de 650px vers la gauche, en changeant son opacité à 50% et agrandir sa police à 24px :

{
left : 0px ,
opacity : 0.5,
fontSize : px
}
 la du e de l a i atio , e illise o des - facultatif, 400 par défaut
 l effet de t a sitio easing) – facultatif. De base uniquement les effets s i g ou li ea
sont possibles mais vous pouvez en avoir plus via cette librairie
http://gsgd.co.uk/sandbox/jquery/easing/
 Une méthode de callback – facultatif. Il est possible de dire à la méthode animate() de
déclencher une méthode u e fois ue l a i atio est te i e.

Animation tout simple grâce à animate()

http://jsfiddle.net/WsUcH/

48
 Afficher la table des matières auto-g e lo s d u passage de la sou is a e u slide
horizontal

http://jsfiddle.net/r8rPS/

Disparition et apparition avec animate() et callback

http://jsfiddle.net/dTtpT/

Plus sur les effets visuels : http://api.jquery.com/category/effects/

Les sélecteurs avancés

Bie sou e t, ous utilise ez ue les sélecteurs de base. Mais pour des opérations plus complexes
vous pourriez être amenés à combiner des sélecteurs et utiliser des fonctions avancées telles que :

 Les sélecteurs descendants : pour cibler un tag qui se trouve dans un autre tag. Par exemple
pour pouvoir sélectionner tous les liens situés dans un ul ui au ait l ID « navbar » vous
écririez :

var navbarLinks = $ #navbar a ;

 Les sélecteurs enfants : pou i le u tag ui est e fa t d u aut e. Pa e e ple,

sélectionner les p qui se trouve directement sous le body :

var childParagraphs = $ body > p ;

 Les sélecteurs adjacents : pour sélectionner un tag qui se trouve juste après un autre. Si
vous voulez par exemple sélectionner un div ui se t ou e da s l HTML juste ap s u h2
a e l ID « header », ous s pa ez les s le teu s pa u +

var adjacentDiv = $ #header + div ;

49
  Les séle teurs d attri uts : pour sélectionner des éléments qui possèdent un certain attribut
ou dont un certain attribut possède une valeur spécifique. Par exemple si vous voulez
sélectionner tous les tags img qui possèdent un attribut alt, ou tous les tags a qui pointent
vers un site extérieur (dont le href o e e pa http://
Voici les différentes possibilités :
o [attribut] : sélectionne les éléments qui possède l att i ut sp ifi
o [attribut= « valeur »] : s le tio e les l e ts do t l att i ut sp ifi possède la
valeur indiquée
o [attribut^= « valeur »] : s le tio e les l e ts do t l att i ut sp ifi commence
avec la valeur indiquée
o [attribut$= « valeur »] : s le tio e les l e ts do t l att ibut spécifié termine
avec la valeur indiquée
o [attribut*= « valeur »] : s le tio e les l e ts do t l att i ut sp ifi contient
avec la valeur indiquée

Plus sur les sélecteurs : http://api.jquery.com/category/selectors/

Les filtres

jQuery donne la possibilité de filtrer les sélection en fonction de certains critères. Par exemple, si
vous ajoutez :even à la suite d u s le teu , alo s ous e up ez ue les l e ts pai s d un
g oupe d l e ts.

De plus, vous pouvez des éléments qui contiennent un tag particulier, un texte spécifique, les
éléments cachés et même ceux qui ne correspond pas à un certain sélecteur. Pour utiliser un filtre,
rajouter un deux-points suivi du nom du filtre :

//ne renverra que les lignes paires

$ tr:even ;

Voici une liste des sélecteurs de filtrage possibles :

 :even et :odd : e e oie ue les l e ts pai s ou i pai s d u g oupe d l e ts –

atte tio , ils se ase t su l i de , o e da s u ta leau, est-à-di e , , , ,… :even
correspondra donc en fait, aux éléments impairs, est u peu iza e ais est o e
ça 
 :first et :last : sélectionne le premier ou dernie l e t d u g oupe d l e ts
 :hidden : trouve les éléments cachés (avec display:none ou sur lesquels .hide() a été appelé)
 :visible : le contraire de :hidden
 contains() : trouve les éléments qui contiennent un texte spécifique spécifié en paramètre
s utilise o eu e thode

50
Mais il existe aussi des thodes pou filt e les l e ts d u e s le tio :

 filter() : permet de sélectionner des éléments qui rencontrent le sélecteur spécifié en

paramètre
 not() : permet de sélectionner des éléments qui ne rencontrent pas le sélecteur spécifié en
paramètre
 has() : trouve les éléments qui contiennent un autre sélecteur spécifié en paramètre
 is() : vérifie les éléments de la sélection correspondent au sélecteur spécifié en paramètre

Exemples de filtres

http://jsfiddle.net/5NEuW/

Plus sur les filtres : http://api.jquery.com/category/traversing/filtering/

Parcourir le DOM

Bien souvent, après avoir sélectionné un élément ous allez ouloi t ou e d aut es l e ts e
relation avec celui- i. Pa e e ple, da s ous ous et ou ez da s la fo tio li e à l e e t
click sur une image, vous voulez retrouver un span enfant pour le faire apparaitre ou disparaitre ou
un div parent pour lui appliquer un style. C est là ue les méthodes qui permettent de traverser le
DOM entrent en piste. Elles permettent, à pa ti d u l e t s le tio , de t ou e d aut es
éléments, toujours via un sélecteur CSS.

Voici la liste des méthodes jQuery qui permettent de parcourir le DOM :

 find() : permet de trouver des éléments particuliers à partir de la sélection en cours

 children() : comme find() mais se limite aux éléments qui sont des enfants direct de la
sélection en cours
 parent() : permet de « remonter » et de récupérer le parent direct de la sélection en cours
 closest() : pe et de t ou e l a t e le plus p o he ui correspond à un sélecteur
 siblings() : permet de récupérer tous les éléments qui sont au même niveau que la sélection
en cours
 next() : pe et de t ou e l l e t de e i eau ue la s le tio e ou s et ui le suit
di e te e t da s l HTML
 prev() : même chose que next() ais pou l l e t p de t

Plus sur le parcours du DOM : http://api.jquery.com/category/traversing/

51
 Les méthodes utilitaires

Plus sur les méthodes utilitaires : http://api.jquery.com/category/utilities/

Les plug-ins
Quand on parle de jQuery on entend souvent le terme plug-in. Un plug-i jQue est du code écrit
en JavaScript et qui utilise massivement jQuery pour but bien précis : afficher un calendrier, fournir
des effets visuels, permettre une gestion des cookies plus aisée, afficher des lightbox, afficher des
slide s, affi he des otifi atio s, et …

Ils consistent en 1 ou plusieurs fichiers .js à inclu e da s os pages et pa fois d u fi hie . ss ui a

« styler » le contrôle utilisateur offert par le plug-in.

jQuery UI

Il ne faut pas chercher bien loin pour trouver des plug-ins jQuery, en effet il existe un « pack » de
contrôles utilisateurs disponibles sur le site de jQuery, jQuery UI. Ces contrôles permettent
d affi he u si ple hoi de date à fou i ua tit d aut es o t ôles, effets et i te a tio s. Pa
exemple :

 un accordéon
 un système d’auto o plete
 des boutons déjà stylés
 un choix de date
 une barre de progression
 des tabs
 une gestion du drap&drop
 et …

Autres plug-ins

Il e iste u e ua tit d aut es plug-ins gratuits disponibles, voici une liste non-exhaustive :

 Effets pour les animations jQuery : http://gsgd.co.uk/sandbox/jquery/easing/

 Amélioration et remplacement de <select> : http://ivaynberg.github.com/select2/
 Check et suggestion de domaine mail : https://github.com/Kicksend/mailcheck
 Adapter la taille de la police en fonction de la taille de la fenêtre :
http://jbrewer.github.com/Responsive-Measure/
 Formater, transformer et manipuler des dates : http://momentjs.com/
 Gestion des cookies : https://github.com/ScottHamper/Cookies

52
  Savoir si l utilisateu est d jà e u su le site aupa a a t :
http://www.ravelrumba.com/blog/firstimpression-js-library-detecting-new-visitors/
 Utiliser Google Maps de manière simple : http://hpneo.github.com/gmaps/ -
http://gmap3.net
 Générer une table des matières automatiquement : http://projects.jga.me/toc/
 O ga ise le o te u e tuiles : http://masonry.desandro.com/
 Fa ilite l e utio d u e fo tio ua d o s olle u l e t :
http://imakewebthings.com/jquery-waypoints/
 Pa alla , a igatio fi e, autos oll,… : https://github.com/Prinzhorn/skrollr
 Pour réaliser des potentiomètres : http://anthonyterrien.com/knob/
 Pour réaliser des notifications : http://needim.github.com/noty/ -
http://richardhsu.github.com/jquery.ambiance/
 Afficher des infos complémentaires qui apparaissent sur le côté : http://srobbin.com/jquery-
plugins/pageslide/
 Tooltips : http://craigsworks.com/projects/qtip2/
 Rating : http://wbotelhos.com/raty/
 Sliders : http://www.jqueryslidershock.com/ - http://dev7studios.com/nivo-slider/
 Carousel : http://demo.dev7studios.com/caroufredsel/ - http://als.musings.it/
 Gestion du scroll : https://github.com/sxalexander/jquery-scrollspy
 Gestion des images de background : http://srobbin.com/jquery-plugins/backstretch/ -
http://static.elliotjaystocks.com/responsive-background-images/examples/solution.html
 Lightbox : http://www.jacklmoore.com/colorbox
 Transformations et transitions CSS : http://ricostacruz.com/jquery.transit/

Les formulaires et la validation

Les fo ulai es so t u e pa t i po ta te d u site e . Et jQuery permet de récupérer (et de
modifier) facilement les valeurs d u fo ulai e, mais aussi de construire des interactions plus
o pl te et de pe ett e de alide les do es a a t l e oi.

Interagir avec un formulaire

Sélectionner des éléments

Vous pou ez ie sû att i ue u ID à u l e t de fo ulai e et a de o e ous l a o s
vu précédemment, mais jQuery offre des sélecteurs spécifiques aux champs de formulaire :

Sélecteur But
:input Sélectionner tous les éléments de formulaire

:text Sélectionner tous les champs texte

:password Sélectionner tous les champs mot de passe

:radio Sélectionner tous les boutons radio
:checkbox Sélectionner toutes les cases à cocher
:submit Sélectionne tous les boutons submit

53
:image Sélectionne tous les boutons image
:reset Sélectionne tous les boutons reset
:button Sélectionne tous les champs avec le type « button »
:file S le tio e tous les ha ps d upload
:hidden Sélectionner tous les champs cachés

Ces sélecteurs peuvent bien sûr être combinés à d aut es s le teu s. Ils s utilise t, pa e e ple
comme ceci (sélectionner tous les champs cachés du formulaire myForm) :

var hiddenFields = $ #myForm :hidden ;

En plus, jQuery offre 2 sélecteurs pour permettre de récupérer les valeurs sélectionnées dans des
boutons radio/cases à cocher et dans des listes déroulantes :

Sélecteur But
:checked Sélectionne les éléments cochés (dans le cas de boutons radio ou cases à
cocher)
:selected Sélectionne les éléments sélectionnés dans une liste déroulante

E e ple d utilisatio :

var checkedValues = $ input[name=ˮshippingˮ]:checked .val();

var selectedState = $ #state :selected .val();

Lire et modifier les valeurs

O peut ie sû a de au aleu s des ha ps d u fo ulai e, da s le but de valider les
do es, ou de fai e u al ul, et … D u aut e ôt o peut aussi odifie les aleu s des ha ps :
imaginons un cas où si vous cochez la case « Mon adresse de facturation est la même que celle de
livraison », que les données déjà rentr es soit auto ati ue e t dupli u es da s d aut es ha ps.

Pou li e et odifie des aleu s, il suffit d utilise la thode .val(). Sans paramètre, celle-ci renvoie
la valeur du champ sur laquelle elle est appelée, et si on lui donne une valeur en paramètre, cela
aura pour effet de modifier le contenu du champ.

var orderField = $("#inputOrder").val();

//s'il est vide, on rajoute un texte d'introduction
if(!orderField) {
orderField = 'Je voudrais commander:';
}
$("#inputOrder").val(orderField);

54
Dans le cas des boutons radio et des cases à cocher, o peut s p e d e aut e e t.

Pour lire la valeur, il faut vérifier si le radio/case à cocher est coché ou pas, et pour ce faire on peut
utiliser le filtre is()

var rememberMe= $("#rememberMeInput").is(':checked') ;

Et pour cocher/décocher une case à cocher ou un radio, on peut utiliser la méthode attr() sur
l att i ut checked

$("#rememberMeInput").attr('checked', true);

Les événements
De manière similaire aux événements déjà vus, comme un clic de souris sur un lien ou une touche du
clavier qui est pressée, il existe des événements spécifiques aux formulaires. Ils sont au nombre de
5 : submit, focus, blur, click et change.

submit
L e e t submit est d le h lo s de l e oi d u fo ulai e, ue ça soit e li ua t su le
bouton submit ou en appuyant sur Enter quand vous tapez dans un champ texte du formulaire.

C est lors de cet événement que vous pouvez vérifier si le formulaire est valide ou non, en lui
associant du code via la méthode .submit().Da s le as où le fo ulai e est pas alide, il est
possi le d a ule so e oi ia u return false;

$("#registration").submit(function() {
console.log($("#name").val());
//empêcher l'envoi du formulaire
return false;
});

focus
Qua d ous li uez da s u ha p d u fo ulai e, e ha p eçoit e u o appelle le focus. Il est
possible d effe tue u e a tio lo s du fo us, e s le tio a t le ha p et e lui appli ua t la
méthode .focus().

$("#name").focus(function() {
console.log($(this).val());
});

55
Pour rappel, un événement peut être appelé manuellement si on ne lui fournit pas de paramètre.
Dans le cas de .focus() le fo us se a is su l l e t s le tio . Ce ui peut t e p ati ue pou
d jà positio e le u seu de te te da s le p e ie ha p d u fo ulai e pa e e ple.

blur
C est u peu le o t ai e de focus, blur est déclenché lorsque vous quittez un champ d u fo ulai e.
Cela peut être utile pour vérifier la validité des champs au fur et à mesure du remplissage du
formulaire et non tout à la fin, lors du submit. Pour effectuer une action lors du blur, il faut
sélectionner le champ et lui appliquer la méthode .blur()

$("#name").blur(function() {
console.log($(this).val());
});

click
Il est ide e t possi le d i te epte u li su u l e t d u fo ulai e, pa e e ple pou
effe tue u e a tio lo s u u e ase à o he est o h e. Cela fo tionne de manière similaire au
click vu précédemment

$("#rules").click(function() {
console.log($(this).is(":checked"));
});

change
L e e t change peut être utilisé dans le cas où vous voulez appliquer une action lorsque la
aleu d une liste déroulante change .

$("#level").change(function() {
console.log($(this).val());
});

Activer/désactiver des champs

E HTML, l att i ut disabled permet de désactiver un champ de formulaire ou un bouton, dans le cas
où ous e oulez pas ue l utilisateu e t e du o te u da s le ha p ou li ue su le outo
(pour éviter un double envoi de formulaire par exemple).

Via jQuery il est bien sûr possi le de o t ôle l a ti atio d u ha p ou outo e lui
appliquant/retirant cet attribut de la manière suivante

56
 //activer
$("#sendFormButton").attr('disabled',false);
//désactiver
$("#sendFormButton").attr('disabled',true);

Valider un formulaire

Introduction
La validation côté client (en JavaScript donc) est u e tape esse tielle lo s de la ise e pla e d u
fo ulai e. Elle pe et de s assu e ue les do es e t es pa l utilisateu so t ie p se tes
(par exemple une adresse de livraison da s le as d u e o a de et u elles o espo de t au
format attendu u fo at d e-mail pour une adresse mail, un texte sous forme de date pour une
date, u hiff e pou u e ua tit , et …

En JavaScript pur, cela peut vite devenir long compliqué de valider un formulaire, il faut notamment
connaître les expressions régulières. Heureusement, en jQuery, ces vérifications sont très simples à
mettre en place grâce au plugin jQuery Validate.

Il y a 2 manières de rajouter de la validation sur un formulaire avec jQuery Validate ; soit une
méthode « simple » qui consiste à attribuer des classes et attributs spécifiques da s l HTML, sur les
l e ts à alide i di ua t s ils so t e uis, leu t pe atte du, le essage d e eu et … ; soit la
manière « avancée » qui consiste à configurer la validation en JavaScript. Cette approche est à
p f e a elle pe et d alle eaucoup plus loin.

Configurer la validation
Pour configurer la validation, il faut d a o d do e u e aleu à l att i ut « name » de vos champs.
Ensuite, il faut appeler la méthode validate() sur le formulaire et lui passer un objet littéral qui va
définir des règles et, pour ces règles des messages d erreur.

La syntaxe est :

$ # fo .validate({

rules : {

nomDuChamp : t peDeValidatio

},

messages : {

nomDuChamp : {

typeDeValidation : Message d e eu

57
 }

}) ;

Par exemple

$("#orderForm").validate({
rules: {
inputMail: {
required: true,
email: true
}
},
messages: {
inputMail:
{
required : "L e-mail est requis",
email: "L'e-mail n'a pas un format correct"
},
}
}) ;

Voi i les t pes de alidatio les plus utilis s u off e jQue Validate :

Validation But
required Le champ est requis
date La valeur du champ doit être une date
email La valeur du champ doit être un e-mail
url La valeur du champ doit être un URL
number La valeur du champ doit être un nombre décimal
digits La valeur du champ doit être un nombre entier
equalTo La valeur du champ doit gal à la aleu d u
autre champ
minlength La longueur de la valeur du champ doit être
supérieure à une certaine valeur
maxlength La longueur de la valeur du champ doit être
inférieure à une certaine valeur
min La valeur du champ doit être supérieure à une
certaine valeur
max La valeur du champ doit être inférieure à une
certaine valeur

Il est également possible de définir ses propres méthodes de validation via la méthode addMethod()
qui demande : u o , u e fo tio de alidatio et u essage d e eu pa d faut.

Si le fo ulai e est pas alide, le fo ulai e e se a pas e o e s le se eu .

58
 A noter que si le formulaire envoie ses données via une requête AJAX, il faut définir
l a tio à fai e da s le as où le fo ulai e est alide da s l optio submitHandler de la
méthode validate().

Styler les essages d’erreur

Quand le plug-in vérifie un formulaire et trouve un champ invalide, il fait 2 choses : premièrement, il
ajoute une classe « error » au champ invalide ; deuxièmement il rajoute un label à la suite du champ
ui o tie t le essage d e eu d fi i.

Par exemple, si vous avez un champ comme ceci dans votre HTML :

<input class="left" type="text" name="inputMail" >

S il est pas alide, le ou el HTML se a :

<input class="left error" type="text" name="inputMail" >

<label class="error" for="inputMail " generated="true">This field
is required.</label>

Il suffit d s lo s d ajoute da s ot e CSS de uoi st le la lasse « error ». Mais si vous voulez faire
plus lo s de l affi hage des essages d e eu o e st le u aut e l e t , ous pou ez utilise
d aut es optio s de .validate() comme errorPlacement, highlight, et …

Plus sur les formulaires : http://api.jquery.com/category/forms/

Plus sur jQuery Validate : http://docs.jquery.com/Plugins/Validation
Options de la méthode .validate() :
http://docs.jquery.com/Plugins/Validation/validate#toptions

Requêtes AJAX avec jQuery

Introduction

Les applications web ressemblent de plus en plus à des applications « desktop », le temps où votre
page web se rafraichissait complètement lorsque vous effectuiez une action est presque
révolu grâce à AJAX.

AJAX (acronyme pour Asynchronous JavaScript And XML) permet à une page web de contacter un
serveur web et de se rafraichir elle-même avec les données renvoyées par le serveur. Cela ouvre les
portes à des centaines de possibilités, comme :

 Afficher du nouveau contenu HTML sans devoir recharger la page

59
  Envoyer un formulaire et afficher un résultat instantanément
 Se logguer sans quitter la page
 Parcourir des longues listes
 Et …

Des sites comme Google Maps, Google Docs, Facebook, Twitter ou autres utilisent AJAX
abondamment.

Fonctionnement

Comme vu dans le Le B-A-BA d'Internet, lo s d u appel de page « classique », le navigateur contacte

le serveur web, qui renvoie une nouvelle page au navigateur.
Lo s d u appel AJAX, le a igateu e de a de au se eu ue de ou elles informations. Le
se eu e oie les do es de a d es, et le o te u et l appa e e de la page so t is à jou a e
l aide de Ja aS ipt.

Il a do a teu s lo s d u appel AJAX :

 Le navigateur web : ia l o jet XMLHttpRequest de votre navigateur, JavaScript peut parler à

u se eu e et e e oi de l i fo atio e etou
 JavaScript : est lui ui fait le g os du oulot. Il e oie u e e u te au se eu , atte d pou
une réponse, traite la réponse et met à jour la page en ajoutant du contenu (en manipulant
le DOM ou e adapta t l affi hage de la page.
L i fo atio e o e peut t e aussi ie le d tail d u fo ulai e, u u si ple do e
(par ex. un rating su u a ti le . L i fo atio eçue e etou peut aussi ie t e une
simple phrase (« Merci de votre vote » u une liste de nouveaux enregistrements (dans le
as d u e-commerce par exemple)
 Le serveur web : le serveur reçoit donc des requêtes du navigateur et lui renvoie des
informations. Les informations peuvent êt e aussi ie du te te, u u out de ode HTML,
de XML ou de données JSON.
Le se eu ua t à lui peut aussi ie t e u se eu IIS ui fait tou e de l ASP.NET, u u
serveur Apache avec PHP.

Il est tout à fait possi le d effe tue des appels AJAX e Ja aS ipt pu ia l o jet XMLHttpRequest,
ais il est ie plus ais d utilise jQue .

Méthodes jQuery

jQuery offre plusieurs méthodes pour effectuer des appels asynchrones en AJAX, les voici :

.load()
.load() permet de charger le contenu d'une autre page web et de placer le contenu dans le sélecteur
sur lequel la méthode est appelée.
Il est possible de lui préciser un sélecteur de la page cible afin de ne sélectionner qu'une partie de la
page à charger.
Cette méthode ne requiert pas d'intervention de la part d'un serveur web.

60
 //charge le contenu de l élément #newsItem de la page today.html
dans l élément #headlines de la page courante
$ #headlines .load today.html #newsItem ;

$.get() et $.post()
$.get() et $.post() : ces méthodes (autonomes) permettent de charger des données d'un serveur web
via une requête GET ou POST.

La syntaxe est celle- i est la e hose pou $.post) :

$.get(URL, [données sous forme de query string], [callback]) ;

//contacte le serveur à l adresse rate.php, envoie les données (un

rating de 5) et on traite la réponse
$.get("rate.php", "rating=5", function(data) {
console.log("rating moyen: " +data)});

Les données renvoyées peuvent être de différents formats: texte, HTML, XML ou JSON

$.getJSON()
$.getJSON() permet de charger des données d'un serveur web au format JSON via une requête GET.
Cette méthode est identique à $.get ais le fo at e o est d offi e du JSON

$.ajax()
Cette méthode est la plus complète et flexible de toutes. $.get, $.post et $.getJSON sont des
« raccourcis » de $.ajax(). C est do gale e t elle ui de a de le plus de o figu atio .

Pour la configurer, il suffit de lui passer un objet littéral. Les paramètres de cet objet les plus
couramment utilisés sont :

 url : l ad esse se eu e s la uelle fai e la e u te

 type : le type de requête, « GET » ou « POST »
 data : les données à envoyer au serveur
 dataType : le format de données renvoyées par le serveur (« xml », « html », « json »,
« text »)
 contentType : le content type des données envoyées
 async : true ou false, défini si la requête doit être synchrone ou asynchrone
 success : une fonction appelée si la requête réussit. Cette fonction reçoit en premier
argument les données renvoyées par le serveur
 error : une fonction appelée si la requête échoue

61
 Plus sur AJAX avec jQuery : http://api.jquery.com/category/ajax/

Les cookies
Les cookies ont été inventés par Netscape afin de donner une "mémoire" aux serveurs et
navigateurs Web. Le protocole HTTP, qui gère le transfert des pages Web vers le navigateur ainsi que
les demandes de pages du navigateur vers le serveur, est dit stateless (sans état) : cela signifie
qu'une fois la page envoyée vers le navigateur, il n'a aucun moyen d'en garder une trace. Vous
pourrez donc venir deux, trois, cent fois sur la page, le serveur considérera toujours qu'il s'agit de
votre première visite.

Cela peut être gênant à plusieurs titres : le serveur ne peut pas se souvenir si vous êtes authentifié à
une page protégée, n'est pas capable de conserver vos préférences utilisateur, etc. En résumé, il ne
peut se souvenir de rien ! De plus, lorsque la personnalisation a été créée, cela est vite devenu un
problème majeur.

Les cookies ont été inventés pour remédier à ces problèmes. Il existe d'autres solutions pour les
contourner, mais les cookies sont très simples à maintenir et très souples d'emploi.

Ils sont stockés sous forme de fichiers textes dans le répertoire de fichiers temporaires de votre
a igateu et pe ette t, pa e e ple, de ete i u hoi de la gue effe tu pa l utilisateu su
votre site afin de ne pas devoir lui redemander à sa prochaine visite.

jsFiddle lui utilise par exemple les cookies pour se « souvenir » des positions et des grandeurs des
différentes fenêtres.

O peut e et li e des ookies a e du ode ôt se eu ais est gale e t possi le de le fai e

en JavaScript !

Si vous voulez stocker des informations dans un cookie, vous devrez spécifier 3 choses :

 Une clé ; u ide tifia t de l i fo atio ue ous souhaitez sto ke , pa e e ple

« userLanguage »
 Une valeur ; par exemple « FR » pour Français
 U e date d e pi atio ; le mo e t au uel ous souhaitez ue le ookie e pi e, est-à-dire
soit détruit

M thodes de atio et d a s au ookies + utilisatio d u ookie da s le as d u

choix de langue FR/NL

http://jsfiddle.net/BFmdg/

Une librairie jQuery pour gérer les cookies : https://github.com/ScottHamper/Cookies

62
Pou ifie les ookies, leu aleu et date d e pi atio ous pou ez utilise l o glet « Cookies » de
Firebug

A savoir, pour des raisons de sécurité, vous ne pouvez pas modifier la valeur des cookies
marqués comme « Http Only » en JavaScript ! Vous pouvez voir ces types de cookies dans
Firebug également. Ce sont généralement des cookies qui contiennent des informations
« sensibles » comme un identifiant de session

L’o jet Date

La date d e pi atio ous off e u e possi ilit de pa le i e e t d u aut e t pe d o jet : l o jet

Date. Nous allo s pas ous te d e dessus a ous e se ez pas eau oup a e s à l utilise ais
est toujou s o à sa oi u il e iste.

Da s l e e ple des ookies, o e oie u o e de jou s d e pi atio à la thode createCookie(),

en fait, cette méthode créer un objet Date qui représente la date courante et lui additionne le
nombre de jours

//quand on instancie une nouvelle Date, elle sera à la date

courante
var date = new Date();
//on lui rajoute le nombre de jours en millisecondes
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

Important à savoir, JavaScript stocke les dates en millisecondes. Mais heureusement pour nous, le
o st u teu de l o jet Date peut prendre en charge plusieurs paramètres pour nous permettre de
construire une date, mais retenez surtout ces deux-cis :

new Date();
new Date(année, mois, jour [, heure, minutes, secondes,
millisecondes ]);

63
  La première ligne instancie un objet Date dont la date est fixée à celle de l'instant même de
l'instanciation.
 La deuxième ligne permet de spécifier manuellement chaque composant qui constitue une
date, nous retrouvons donc en paramètres obligatoires : l'année, le mois et le jour. Les
quatre derniers paramètres sont facultatifs (c'est pour cela que vous voyez des crochets, ils
signifient que les paramètres sont facultatifs). Ils seront initialisés à 0 s'ils ne sont pas
spécifiés, nous y retrouvons : les heures, les minutes, les secondes et les millisecondes.

Une fois un objet Date instancié, vous pouvez utiliser ces méthodes :

 getFullYear() : renvoie l'année sur 4 chiffres ;

 getMonth() : renvoie le mois (0 à 11) ;
 getDate() : renvoie le jour du mois (1 à 31) ;
 getDay() : renvoie le jour de la semaine (0 à 6, la semaine commence le dimanche) ;
 getHours() : renvoie l'heure (0 à 23) ;
 getMinutes() : renvoie les minutes (0 à 59) ;
 getSeconds() : renvoie les secondes (0 à 59) ;
 getMilliseconds() : renvoie les millisecondes (0 à 999).

Exemples de calcul de dates, avec jQuery et datepicker

http://jsfiddle.net/fkKMv/

Le debug et la gestion des erreurs

Le debug

Il est t s a e oi p es ue i possi le de p og a e sa s fai e d e eu s… les fa eu ugs ui

plantent notre application sont si vite arrivés.

Mais uel t pe d e eu s peut-on bien faire ? Cela peut être une erreur de frappe : on a oublié un
caractère, o a al o thog aphi le o d u e fo tio et du oup Ja aS ipt e la t ou e pas, ou
alo s o a si ple e t fait u e e eu da s ot e logi ue e faisa t u e di isio au lieu d u e
multiplication.

A e les ieu a igateu s, les essages d e eu Ja aS ipt taie t pas des plus pa la ts, et il
fallait user et abuser de la méthode alert(), u o diss i ait u peu pa tout da s le ode e
espérant trouver la ligne qui pose problème ! Encore faut-il, une fois la ligne coupable trouvée,
savoir le corriger 

Cette p iode de gal e est olue, tous les a igateu s poss de t u e o sole d e eu s et puis
est sa s o pte su ot e fid le Fi e ug ! Il affi he des essages d e eu s assez lai s e
i di ua t g ale e t l e d oit e a t où l e eu s est p oduite.

Mais on peut faire plus : pou d ugge du ode da s Fi e ug, allez da s l o glet « Script » et
activez-le. Vous pouvez choisir le script à analyser et y insérer des breakpoints ou poi ts d a ts. Ils

64
servent à faire une pause sur une ligne d'un code JavaScript et à afficher l'état complet des variables,
méthodes, objets, etc. La quantité d'informations disponible est tout simplement immense, vous
pouvez les retrouver dans le cadre de droite de Firebug dès qu'un point d'arrêt est atteint. Vous
pouvez aussi passe d u poi t d a t à u aut e pou oi « au ralenti » l e utio de ot e s ipt.

La gestion des erreurs

Disons que vous avez un script où vous vous dites « à cet endroit-là, a des ha es ue ça pla te »
car vous faites un calcul complexe, ou faites une opération à partir de données rentrées par
l utilisateu . Au lieu de oise les doigts pou ue ça a i e pas, ous pou ez ett e e pla e u e
gestio d e eu s.

La gestio d e eu s se fait à l aide du lo d i st u tio try catch. Dans le try on va essayer le code,
et si une erreur (ou exception) survient, on passe dans le bloc catch, où l o a e ute u e a tio
e as d e eu affi hage d u essage, log de l e eu , ou aut e…

Ce lo d i st u tio peut t e sui i de l i struction finally, où l o a e ute du ode uoi u il se

passe, u il a he, ou u il pla te. Mais ous allez a e e t l utilise .

Si vous voulez vous-même dans votre code renvoyer une erreur (si un paramètre est incorrect par
exemple), vous pouvez le fai e à l aide de l i st u tio throw.

La minification
Quand vous vous lancerez à la recherche de librairies JavaScript, vous allez souvent voir une version
.js et une version .min.js du script. Que veut dire ce « min » ? Il sig ifie ue est u e e sio du
script qui a été minifiée : cela consiste à retirer tous les espaces, les commentaires et les retours à la
ligne inutiles du code.

Les i t ts de la i ifi atio so t p i ipale e t de dui e la taille du fi hie et do d a l e le

temps de chargement et accessoirement de rendre le code moins lisible pour le protéger contre le
vol. Un code minifié est aussi plus difficile à débugger.

Préférez donc un code « non-minifié » pour développer et puis au-moment de mettre votre site en
ligne, changez les références dans vos pages du script « non-minifié » vers le script minifié et mettez
la version minifiée en ligne.

Packer vous permet de minifier vos JavaScripts

http://dean.edwards.name/packer/

JSBeautifier vous permet de « déminifier » un script minifié

http://jsbeautifier.org/

65
Plus d’i for atio s

jQuery API documentation

http://api.jquery.com/

jQuery Fundamentals

http://jqfundamentals.com/

Useful jQuery Function Demos For Your Projects

http://coding.smashingmagazine.com/2012/05/31/50-jquery-function-demos-for-
aspiring-web-developers/

Sources
 JavaScript & jQuery : the missing manual par David Sawyer McFarland
 JavaScript sur Codecademy.com
 Dynamisez vos sites web avec JavaScript ! sur le site du Zér0

66