JavaScript/jQuery

Bruxelles Formation Management & MultimediaTIC - Cepegra

Nicolas Bauwens
Conseiller pdagogique - Formateur
n.bauwens@bruxellesformation.be

1
Contenu
Introduction ............................................................................................................................................ 5
Le B-A-BA d'Internet ........................................................................................................................... 5
Qu'est-ce que JavaScript & jQuery ? ................................................................................................... 6
Dfinition ........................................................................................................................................ 6
Historique........................................................................................................................................ 6
Outils ............................................................................................................................................... 6
Quelques mots sur jQuery .............................................................................................................. 7
Inclure du JavaScript dans une page HTML ............................................................................................ 7
Les lments du langage ......................................................................................................................... 8
Variables ............................................................................................................................................. 8
Numrique (Number) ...................................................................................................................... 9
Chane de caractre (String) ........................................................................................................... 9
Boolens (Boolean) ....................................................................................................................... 10
null et undefined ........................................................................................................................... 10
Tests et conditions ............................................................................................................................ 12
Les oprateurs de comparaison .................................................................................................... 12
Les oprateurs logiques ................................................................................................................ 13
Types de tests ............................................................................................................................... 14
Tester null et undefined ................................................................................................................ 15
Les boucles ........................................................................................................................................ 17
Lincrmentation ........................................................................................................................... 19
Le type array ................................................................................................................................. 19
Types de boucles ........................................................................................................................... 20
Les fonctions ..................................................................................................................................... 22
Dclaration .................................................................................................................................... 22
Appel ............................................................................................................................................. 22
Porte 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 vnements .................................................................................................................................... 40
Le concept dvnement .................................................................................................................. 40
Associer un vnement un lment .............................................................................................. 41
En JavaScript ................................................................................................................................. 41
Avec jQuery ................................................................................................................................... 42
Attendre le chargement de lHTML .................................................................................................. 43
Lobjet Event ..................................................................................................................................... 44
Stopper le comportement normal dun vnement ........................................................................ 44
Plus loin avec jQuery ............................................................................................................................. 45
Les objets littraux ............................................................................................................................ 45
Dclarer et utiliser un objet littral .............................................................................................. 45
Autre utilisation dun objet littral : le tableau associatif ............................................................ 46
La boucle for in .............................................................................................................................. 47
Les effets visuels ............................................................................................................................... 47
Apparatre et disparatre............................................................................................................... 47
Les animations .............................................................................................................................. 48
Les slecteurs avancs ...................................................................................................................... 49
Les filtres ........................................................................................................................................... 50
Parcourir le DOM .............................................................................................................................. 51
Les mthodes utilitaires .................................................................................................................... 52
Les plug-ins............................................................................................................................................ 52
jQuery UI ........................................................................................................................................... 52
Autres plug-ins .................................................................................................................................. 52
Les formulaires et la validation ............................................................................................................. 53
Interagir avec un formulaire ............................................................................................................. 53
Slectionner des lments ............................................................................................................ 53
Lire et modifier les valeurs ............................................................................................................ 54
Les vnements ............................................................................................................................ 55

3
 Activer/dsactiver des champs ..................................................................................................... 56
Valider un formulaire ........................................................................................................................ 57
Introduction .................................................................................................................................. 57
Configurer la validation ................................................................................................................. 57
Styler les messages derreur ......................................................................................................... 59
Requtes AJAX avec jQuery .................................................................................................................. 59
Introduction ...................................................................................................................................... 59
Fonctionnement................................................................................................................................ 60
Mthodes jQuery .............................................................................................................................. 60
.load() ............................................................................................................................................ 60
$.get() et $.post() .......................................................................................................................... 61
$.getJSON() ................................................................................................................................... 61
$.ajax() .......................................................................................................................................... 61
Les cookies ............................................................................................................................................ 62
Lobjet Date....................................................................................................................................... 63
Le debug et la gestion des erreurs ........................................................................................................ 64
Le debug ............................................................................................................................................ 64
La gestion des erreurs ....................................................................................................................... 65
La minification ....................................................................................................................................... 65
Plus dinformations ............................................................................................................................... 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 paramtrer leur fonctionnement
rdiger votre propre script afin de dynamiser votre site web avec des effets et des
animations

Le JavaScript cest le 3me pilier du web design. Le premier cest lHTML, il dcrit la structure dune
page web. Le second, cest la CSS, qui dfinit la prsentation de la page. Le JavaScript lui dfinit le
comportement de la page : il met vie une page web qui serait autrement compltement 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 requte
est envoye 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 donnes utilise le protocole HTTP (HyperText Transmission Protocol). Un protocole est une
spcification des rgles de communication entre matriels lectroniques.

Une fois la page web reue par le navigateur, celui-ci va dcoder tout a (parsing en anglais) et vous
afficher une belle page web !

5
 Qu'est-ce que JavaScript & jQuery ?

Dfinition
JavaScript est un langage de programmation interprt.

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 interprt: l'ordinateur comprend directement le code via un interprteur. On parle
souvent du mot script pour parler de code interprt. Dans le cas du JavaScript,
l'interprteur est inclus dans le navigateur web (SpiderMonkey pour Firefox, JScript pour IE,
V8 pour Chrome)

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

L'inverse des langages clients sont les langages serveur: ils s'excutent sur le serveur et renvoient de
l'HTML aux machines clientes. PHP, C#, Java, sont des langages serveur.

Comme il s'excute sur la machine client, cela peut poser divers problmes: lenteur de l'excution
du script due aux performances de la machine client, problme de compatibilit avec des
navigateurs obsoltes voir la dsactivation complte de JavaScript sur la machine cliente. Nous
reviendrons sur ces problmatiques 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 standardise s'appelle donc ECMAScript, la version stable la plus rcente
tant ECMAScript 5. Plusieurs implmentations d'ECMAScript existent l'heure actuelle, dont JScript
(implmentation dans IE) ou ActionScript (dans Flash).

D'o quelques diffrences de comportement entre Mozilla et Internet Explorer, JScript permettant
de faire des choses qui ne sont pas possible par dfaut 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 fonctionnalits 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, crer un fichier, le lancer dans Firefox etc... Cest trs

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

Enfin, outil combien indispensable pour dbugger du JavaScript : Firebug. FireBug est une
extension de Firefox et permet dinspecter le code HTML et les CSS mais aussi de dbugger du
JavaScript, voir les requtes AJAX, etc Vous pouvez utiliser la mthode console.log() dans votre
code pour dbugger, 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 trs compliques faire soi-mme en JavaScript pur!

De plus, jQuery soccupe tout seul de la compatibilit avec les diffrents navigateurs, mme IE 6
pour information Internet Explorer 6 et mme 7 sont les pires cauchemars dun intgrateur car ils
regorgent de spcificits propres eux.

Sa syntaxe est claire et facilement comprhensible, le seul point ngatif tant quil impacte les
performances techniques car la librairie est assez lourde charger.

C'est trs chouette, mais pour jouer avec jQuery il faut quand mme comprendre les bases du
JavaScript, et plus prcisment 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 manire 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 spars, 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 faon linaire, c'est--dire qu'il lit d'abord le <head>, puis les
lments de <body> les uns la suite des autres. Si vous appelez un fichier JavaScript ds le dbut

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 problme, il est conseill de placer les tags <script> juste avant la fermeture du tag
<body>.

Les lments du langage

Tout langage de programmation se compose de ces diffrents lments: 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 dj 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 mme principe en informatique, une variable permet de stocker une valeur, une
information, qu'elle soit numrique, sous forme de texte, ou autre.

Afin d'utiliser une variable il faut d'abord la dclarer. Il s'agit tout simplement de lui rserver un
espace de stockage en mmoire, rien de plus. Une fois la variable dclare, vous pouvez commencer
y stocker des donnes sans problme.

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

var myVariable;

Notez la prsence dun point-virgule. Aprs chaque instruction, il faut mettre un point-virgule. Cest
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 diffrentes !

On peut nommer une variable comme on le souhaite, cependant il existe certains noms rservs
qu'on ne peut pas utiliser, sinon le code ne marchera pas. La liste complte des mots rservs

Une fois une variable dclare 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, gnralement, que toute dclaration de variable se fait avec le mot-cl var sans distinction du
contenu, tandis que dans d'autres langages, comme le Java, il est ncessaire de prciser 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 trs attentif !

Voici les diffrents types possibles:

Numrique (Number)
Ce type reprsente tout nombre, qu'il soit entier, ngatif, dcimal,

Pour assigner un type numrique une variable, il vous suffit juste d'crire le nombre seul :

var number = 5;

Attention, dans le cas d'un nombre dcimal, 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
oprateurs arithmtiques que vous connaissez tous comme +, -, /, *.
Mais galement, moins connu, l'oprateur %, qui permet de calculer le modulo (le reste de la
division entire). A quoi sert le modulo ? A vrifier si un nombre est pair par exemple, ou multiple
d'un chiffre.

Chane de caractre (String)

Ce type reprsente n'importe quel texte. On peut l'assigner de deux faons diffrentes :

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

var text2 = 'Mon deuxime texte'; // Avec des apostrophes

9
Il est important de prciser que si vous crivez var myVariable = '2'; alors le type de cette
variable est une chane de caractres et non pas un type numrique.

Une autre prcision importante, si vous utilisez les apostrophes pour encadrer votre texte et que
vous souhaitez utiliser des apostrophes dans ce mme texte, il vous faudra alors chapper vos
apostrophes de cette faon :

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

Pourquoi ? Car si vous n'chappez pas votre apostrophe, le JavaScript croira que votre texte s'arrte
l'apostrophe contenue dans le mot c'est . Du coup, une erreur sera gnre et la suite de votre
script ne s'excutera pas.

noter que ce problme 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 :-)

Boolens (Boolean)
Ce type permet simplement de stocker "vrai" ou "faux" :

var isTrue = true;

var isFalse = false;

Quelle est l'utilit ? De pouvoir vrifier 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 numrique qui contient le nombre 42 et
inversement.

null et undefined
Il arrive quon doive dire quune variable est dclare mais ne contient rien. Dans ce cas, on utilisera
null.

Si une variable n'a pas t initialise, elle sera undefined. Evidemment, si vous excuter 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 sr tester si une variable est null ou undefined

11
 Tests et conditions

Les tests permettent d'excuter une action (ou de ne pas l'excuter !) en fonction de certains
critres, ou conditions. Les tests s'appliquent toujours au type boolen, c'est--dire "vrai" ou
"faux". Un test est toujours du type "Si la condition est vraie, alors j'excute ceci, sinon j'excute
cela"

Par exemple, "si l'utilisateur est belge, alors afficher un message l'cran" ou "si l'utilisateur choisit
le thme 'vert' alors charger la CSS 'vert.css'" ou encore "si la rsolution 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 premire fois sur le site

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

Dtecter 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 constitues les conditions ? De valeurs tester et de deux types d'oprateurs : de
logique et de comparaison. Pour tre plus clair: une condition sera vraie ou fausse en fonction du
rsultat d'une comparaison et/ou d'un test logique.

Les oprateurs de comparaison

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

Oprateur Signification
== gal
!= diffrent de
=== contenu et type gal
!== contenu ou type diffrent de
> suprieur
>= suprieur ou gal
< infrieur
<= infrieur ou gal

12
Le rsultat d'une comparaison renvoie vrai ou faux, en bref, une valeur de type boolen ;-)

Exemple:

var hour = getHour();

if(hour == 12){
document.write('le dner est prt !');
}

Les oprateurs logiques

Pourquoi ces oprateurs sont-ils nomms comme tant logiques ? Car ils fonctionnent sur le
mme principe qu'une table de vrit en lectronique. Avant de dcrire leur fonctionnement, il nous
faut d'abord les lister, ils sont au nombre de trois :

Oprateur Type de logique Utilisation

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

Lorsque qu'on teste plusieurs valeurs, il faut avoir en tte les rsultats possibles, voici la table de
vrit des oprateurs "ET" et "OU". Les rsultats d'un test logique est aussi un boolen

valeur1 Oprateur valeur2 Rsultat

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

Loprateur ! quant lui renvoie linverse dune valeur boolenne. Si une variable est vraie , son
inverse sera faux .

Du coup, il est possible de combiner au sein d'un mme test, des oprateurs de comparaison et des
oprateurs logiques, comme dans l'exemple ci-dessous

var hour = getHour();

var name = getUsername();
if(hour == 12 && name == Michel ){
document.write('le dner est prt pour Michel !');
}

13
 Types de tests

if-else
Nous l'avons dj vue dans les exemples prcdents, retenez-le bien car c'est le type de test le plus
rencontr. Il permet d'excuter une action si une condition est vraie, et une autre action si elle est
fausse.

Sa syntaxe se prsente sous cette forme

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

Il est possible d'enchaner les tests if-else, par exemple pour dire, "si le visiteur est Belge, alors
afficher un message vert, sinon si le visiteur est Franais, alors afficher un message bleu, sinon
afficher un message jaune"

La syntaxe sera telle que:

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

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 mme donne (ici, le code pays du
visiteur), alors il est prfrable 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 :
actionParDfaut;
break ;
}

Linstruction break permet de casser le switch et den sortir ds que laction adquate a t
excute. Si on ne mentionne pas le break, les autres cas vont galement sexcuter !

default permet lui de dfinir une action par dfaut si aucune des valeurs des case ne correspond.

Dtecter 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 mme chose en plus court, mais en parfois moins
lisible... Prfrez le if-else, mais sachez reconnatre celui-ci.

Syntaxe:

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

ou

rsultat = (test) ? valeur si test est vrai : valeur si test est faux

Dtecter le pays de l'utilisateur avec loprateur ternaire et afficher un message

appropri

http://jsfiddle.net/Xns2Z/

Tester null et undefined

Pour vrifier l'existence dune variable (quelle ne soit pas undefined) ou son contenu (quelle ne soit
pas null ou vide), on peut le faire de la manire classique ci-dessous :

var notSet = null;

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

15
 var notInit;
if(notInit == undefined)
{
alert("variable pas initialise")
}

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 chanes de caractres,
etc. En fait le type d'une variable (quel qu'il soit) peut tre converti en boolen mme si la base on
possde un nombre ou une chane de caractres.

Quels contenus seront faux ? Un nombre qui vaut zro, 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 na pas de valeur")
}

Une autre petite subtilit du JavaScript nous est offerte par loprateur OU. Celui-ci, en plus de sa
fonction principale, permet de renvoyer la premire variable possdant une valeur value true.

var conditionTest1 = '', conditionTest2 = 'Une chane de

caractres';

alert(conditionTest1 || conditionTest2);
//affichera 'Une chane de caractres'

Concrtement, quoi cela peut-il servir ?

Par exemple, certains merveilleux navigateurs comme Internet Explorer ont des fonctionnalits qui
sont les mmes que dans le standard ECMA mais appeles diffremment ! Chouette hein ? H bien
cette notation permettra au navigateur de choisir la fonctionnalit qui existe pour lui.

Si vous tes dj curieux, voici un petit exemple : on souhaite rcuprer le contenu texte dun DIV
grce au DOM (nous verrons ceci en dtail dans le chapitre ad hoc). Avec IE on doit utiliser
innerText et pour les autres navigateurs avec le standard ECMA, textContent . Une manire
concise de lcrire serait :

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

Tester lexistence et le contenu de variables

http://jsfiddle.net/ZZbh5

Les boucles

Quand on parle de rpter un album en boucle, a vous voque quoi ? Le fait de rpter plusieurs
fois, automatiquement, les chansons de lalbum. Cest le mme principe en programmation. Les
boucles permettent de rpter une action plusieurs fois tant quune condition est respecte, ou
jusqu ce quune condition soit respecte.

Et oui, nous allons, comme pour les tests, utiliser les conditions dans les boucles. Il faut, bien
entendu, quun moment la condition devienne fausse, sinon on gnre une boucle infinie vous
vous rappelez des sites qui ouvraient milles fentres popup ? Cest un beau cas dutilisation dune
boucle infinie, une boucle qui ne sarrte jamais ! Haaaaaaaa !

Une boucle peut tre exprime de cette faon Tant que la condition est vraie, excuter ces
actions ou bien de cette faon Pour toutes les donnes que voici, excuter ces actions .

17
Une boucle fonctionne de cette manire :

1. On aura gnralement besoin dune variable de boucle, quon va initialiser avant la boucle
avec une valeur qui ne va pas rencontrer la condition de la boucle (sinon la boucle ne
senclencherait pas !).
2. A chaque passage de boucle ou itration, on vrifie si la condition est toujours vraie, si cest
le cas on va rentrer dans la boucle, cest--dire excuter les actions dans la boucle.
Si la condition est fausse, on sort de la boucle et on continue excuter 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
sarrte.
4. On retourne au point 2

Ce flux est illustr dans le schma suivant :

Initialisation

fausse
Condition

vraie

Actions

Mise jour

18
 Lincrmentation
Avant de plonger dans les types de boucles, arrtons-nous un instant car cest lendroit idal pour
parler de lincrmentation. Quest-ce que lincrmentation ? Cest le fait dajouter une unit un
nombre au moyen d'une syntaxe courte. l'inverse, la dcrmentation permet de soustraire une
unit.

Par exemple, pour incrmenter une variable numrique on peut le faire de cette manire

var incrementVariable = 0;
incrementVariable = incrementVariable + 1;

Mais on peut lcrire de manire plus courte avec loprateur ++ (ou -- pour une dcrmentation)

var incrementVariable = 0;
incrementVariable++;

Vous allez comprendre lintrt de lincrmentation dans les exemples des boucles qui utilisent des
Array.

Le type array
Bon, les boucles utilisent trs rgulirement un autre type de donnes quon appelle array, ou
tableaux en Franais. Pour ne pas confondre avec les tables HTML, on va garder le terme array!

L o les variables de type numrique ou string ne contiennent quune seule valeur, un array en
anglais, est une variable qui contient plusieurs valeurs, appeles items. Chaque item est accessible
au moyen d'un indice (index en anglais) et dont la numrotation commence partir de 0. Voici un
schma reprsentant un tableau, qui stocke cinq items :

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

Un array contenant 5 lment aura donc un index maximal de 4, cest--dire nombre dlments
1 .

En JavaScript, on crirait larray ci-dessus de cette manire.

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

jQuery];

Et pour rcuprer et modifier des valeurs, il faut prciser le numro de lindex en crochets :

19
 skills[1] = PHP; //Modifier
console.log(skills[1]); //Accder

Types de boucles

while
Cest celle qui colle le plus au flux dcrit ci-dessus. Voici sa syntaxe :

while (condition) {
action1;
action2;
}

Exemple :

Tant quon natteint pas un div dfini dune collection 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 trs fortement la
boucle while, sauf que dans ce cas la boucle est toujours excute au moins une fois. Dans le cas
d'une boucle while, si la condition n'est pas valide, la boucle n'est pas excute. Avec do while, la
boucle est excute une premire fois, puis la condition est teste pour savoir si la boucle doit
continuer.

Cependant vous allez rarement lutiliser, mais il faut savoir la reconnatre. Sa syntaxe :

do {
action;
} while (condition);

for
La boucle que vous allez utiliser le plus souvent est la boucle for. Elle fonctionne de la mme
manire quun while mais linitialisation, la condition et lincrmentation se dclarent sur une seule
ligne, comme ceci :

for (initialisation; condition; incrmentation) {

action;
}

1. Dans le premier bloc, l'initialisation, on initialise une variable, gnralement 0.

2. On dfinit dans condition, la condition darrt de la boucle, afin de ne pas crer la fameuse
boucle infinie. Gnralement on dit que la boucle continue tant que la variable initialise est
plus petite quune valeur dfinie.

20
 3. Enfin, dans le bloc d'incrmentation, on indique que la variable sera incrmente chaque
passage de la boucle, afin de la faire arriver la valeur darrt

Voici un exemple qui ne sert rien mais qui aide comprendre comment a scrit

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

alert('Itration n' + iter);
}

On peut aussi partir lenvers en dcrmentant jusque 0.

Priorit d'excution

Les trois blocs qui constituent la boucle for ne sont pas excuts en mme temps :

Initialisation : juste avant que la boucle ne dmarre. C'est comme si les instructions
d'initialisation avaient t crites juste avant la boucle
Condition : avant chaque passage de boucle
Incrmentation : aprs 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 lexcution dune boucle et donc den sortir directement.
Linstruction continue, quant elle permet de mettre fin une itration, mais attention, elle ne
provoque pas la fin de la boucle : l'itration en cours est stoppe, et la boucle passe l'itration
suivante. Mais vous lutiliserez rarement !

Le fonctionnement mme du JavaScript fait que la boucle for est ncessaire dans la majorit des cas
comme la manipulation des array. Nous verrons aussi un peu plus tard une variante de la boucle for,
appele for in.

Exemples :

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

http://jsfiddle.net/WZ6ac/

Crer des span sous forme de tags partir dun array

http://jsfiddle.net/EvBmX/

21
 Les fonctions

Que feriez-vous si vous devez excuter plusieurs fois le mme code ou un code similaire mais o les
variables utilises sont diffrentes ? Le copier-coller nest pas une super bonne ide, cest ennuyeux,
a provoque de la redondance, a alourdit le code et le rend moins lisible et a risque dintroduire
des erreurs Do lintrt dutiliser des fonctions !

Ici, oubliez le cours de math, une fonction cest un bout de code quon a mis part et quon a
nomm (le nom de la fonction) afin de pouvoir le rutiliser facilement !

Dclaration
Vous en avez vu dans les exemples prcdents, une fonction se dclare comme ceci :

function nomDeLaFonction([argument1, argument2,]) {

CODE
}

Une fonction contient les lments suivants :

Un nom
Une liste darguments. Ils sont mis entre crochets ci-dessus car ils sont facultatifs. Ils
permettent de donner des paramtres, des donnes en entre la fonction. Ils ne sont
utilisables que dans le corps de la fonction.
Un corps ; du code quoi
Eventuellement une valeur de retour. La fonction peut se contenter de nexcuter que du
code, mais elle peut galement retourner, renvoyer un rsultat ! Voil qui est pratique

Par exemple, nous avions vu dans un exemple prcdent :

function hasClass(element, cls) {

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

La fonction sappelle hasClass, elle a 2 arguments, element et cls et elle retourne un rsultat,
boolen dans ce cas-ci.

Appel
Une fonction sappelle par son nom, et si elle attend des arguments, il faudra galement lui envoyer
lors de lappel la fonction.

Noubliez pas les (), cest ce qui diffrencie une fonction dune variable.

Toujours par rapport lexemple prcdent, la fonction est appele de cette manire

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

Une fonction doit toujours tre dclare avant de pouvoir tre appele !

Porte des variables

On peut dclarer des variables dans le corps dune fonction. De telles variables sappellent des
variables locales, car elles sont propres la fonction, au contraire des variables globales, dfinies 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 fonction, il nest plus possible daccder ses variables locales, si vous
faites a, votre code va bien planter

Si vous dclarez et initialisez une variable locale du mme nom quune variable globale, la valeur
prise en compte dans la fonction sera celle de la variable locale. Une fois sorti de la fonction, la
valeur globale reprendra le dessus. Veillez utiliser des noms diffrents afin dviter toute
confusion.

Si les variables sont propres la fonction, mieux vaut les crer comme variables locales, cest plus
propre car il faut user des variables globales avec modration !

Crer des span sous forme de tags partir dun array, mais cette fois avec une
fonction et utilisation dune variable locale

http://jsfiddle.net/cLLS2/

Les fonctions anonymes

Les fonctions anonymes sont des fonctions qui nont simplement pas de nom ! Mais quoi a sert
alors ? On ne saura jamais les appeler ?

En fait les fonctions anonymes sont trs pratiques pour effectuer du code lors dune action, dun
vnement, sans devoir dclarer une fonction qui ne servirait qu une seule chose bien prcise.
Nous verrons cela plus en dtails dans le chapitre sur le DOM et les vnements.

Sachez dj quil est possible dassigner une fonction anonyme une variable. Je vois que vous
froncez les sourcils En fait il sagit plutt dassigner une rfrence vers la fonction une variable.
a scrit comme ceci :

//on assigne une rfrence 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 prsence dun point-virgule la fin de la dclaration de la fonction. Comme nous sommes
dans le cas dune assignation, il est ncessaire, alors quil ne lest pas quand on dclare une fonction
normale .

Vous verrez trs souvent ce genre de syntaxe en JavaScript donc mieux vaut dj sy habituer !

24
Les avantages de jQuery
Vous avez pu vous rendre compte avec les rudiments du langage que nous venons dexplorer que le
JavaScript, cest parfois un peu prise de tte ! Faire de petites choses demande dcrire pas mal de
lignes de code et puis il faut toujours tenir compte de la compatibilit entre les diffrents
navigateurs. Bref, pas toujours simple.

Cest sur ces 2 points que jQuery va nous tre trs prcieux. Son slogan est write less, do more et
de fait, cette librairie a lavantage davoir une syntaxe courte et facile comprendre. Elle permet de
faire en 1 ligne ce qui demanderait des centaines de lignes de code en JavaScript pur. De plus, elle
soccupe pour nous de la compatibilit entre les navigateurs, cest pas beau la vie ?

Un autre avantage non ngligeable ce sont les plug-ins ! Il existe une flope de ces mini-librairies
qui se basent sur jQuery, programmes par des gens comme vous et moi et qui ont un but bien
prcis : un petit systme de rating, la gestion du scroll, faire des parallax, faciliter lutilisation de
Google Maps, etc

jQuery utilise tout simplement du JavaScript pur et dur, celui que nous avons vu prcdemment, il
na donc rien de magique mais une fois que vous y aurez got, vous aurez du mal vous en
passer ! Et tout a gratuitement

Ce nest pas la seule libraire JavaScript qui existe sur le march, cependant elles nont pas toutes la
mme philosophie et but que jQuery, certaines sont destins des programmeurs JavaScript un peu
plus chevronns ! Voici une petite liste de ses concurrentes : MooTools, DojoToolkit, Prototype,
Yahoo UI.

Inclure jQuery dans son projet

En local
Vous pouvez tout simplement tlcharger la dernire version de jQuery sur
http://jquery.com/download/, prfrez la version compresse ou minifie. Ensuite, ajoutez le
fichier votre projet et ajoutez le tag script aux pages qui ncessitent jQuery comme dcrit dans le
chapitre Inclure du JavaScript dans une page HTML

Via CDN
Une autre possibilit est dutiliser un Content Delivery Network, ou CDN. En gros, cest un site web
qui hberge 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 mme chez jQuery. Il existe de multiples
avantages :

Vous ne devez pas grer le fichier vous-mme

Les CDNs sont des serveurs rpartis partout dans le monde, donc vos visiteurs
tlchargeront un fichier dun serveur prs de chez eux, cest donc plus rapide

25
 Comme dautres sites utilisent les CDNs, vos visiteurs auront peut-tre dj jQuery dans le
cache de leur navigateur vu quils seront passs sur un de ces sites prcdemment, votre
navigateur de devra ds lors plus tlcharger le fichier.

Avec le CDN jQuery (pour la version 1.9.1 minifie)

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

Si vous souhaitez toujours la dernire 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 minifie)

<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 minifie)

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

Plus dinfos sur http://jquery.com/download/

Le DOM

Comprendre le Document Objet Model

Comme vous tes dj familiers avec lHTML, vous savez que le code HTML peut tre reprsent
sous forme dun 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 dintroduction</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 dinfos</a></p>
</div>
</div>
</div>
</body>
</html>

Peut tre reprsent sous cette forme

Le DOM ou Document Object Model, cest une reprsentation du code HTML sous forme darbre
dobjets (appels Nodes). Cest sous cette forme que le HTML est mmoris par le navigateur. Il
est possible, en JavaScript, de parcourir cet arbre et donc daccder tous les lments dune page
HTML en vue de la modifier en rajoutant, modifiant ou supprimant des lments!

Une remarque sur le schma : le texte qui se trouve dans un tag (par exemple le texte dun lien) est
vu par le DOM comme un Node spcifique (de type #text).

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

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

Cest un peu abstrait alors on va viter de partir dans des considrations trop informatiques mais
pour faire simple disons quun objet cest une manire de structurer des informations.

En fait, les types Number, String, Boolean et Array rencontrs prcdemment sont des types
dobjets, appels objets natifs.

On reconnait les objets car ils peuvent contenir 2 types dinformation: des proprits et des
mthodes. Une proprit est une variable qui appartient lobjet et une mthode est une fonction
propre lobjet.

Un objet sinitialise ou sinstancie laide de ce quon appelle un constructeur. Tout cela est fait
automatiquement pour les objets natifs. Nous en verrons plus tard.

// On cre un objet String

var myString = 'Ceci est une chane de caractres';

// On affiche le nombre de caractres, au moyen de la

proprit length
console.log(myString.length);

// On rcupre la chane en majuscules, avec la mthode

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

Donc, chaque lment du DOM est un objet et possde donc des proprits et des mthodes. Par
exemple, si on rcupre un lment qui correspond un div, on va pouvoir faire :

Changer le style dun div et mettre le contenu dun div enfant en majuscules

http://jsfiddle.net/kbAQU/

Le div a une proprit style qui elle-mme a une proprit backgroundColor et padding
qui permettent respectivement dinfluer sur les styles CSS background-color et padding.

Dans la majorit des exemples vus prcdemment, on utilisait des objets ainsi que leurs proprits
et mthodes.

Note de vocabulaire : dans le vocabulaire du DOM, on parle souvent de Node (nud) et d

Element (lment)

1. Un Node peut tre nimporte quel type dobjet dans le DOM

2. Un Element est un type de Node spcifique, qui peut tre exprim sous forme de

28
 balise HTML, qui peut avoir des attributs comme id ou class, peut avoir des
lments enfants, etc

On dit quun Element hrite dun Node. Un Element possdra donc toutes les
proprits et mthode dun Node.

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

Les objets window et document

Lobjet window
Lobjet window est le point de dpart du DOM, il reprsente la fentre du navigateur. En JavaScript,
l'objet window est dit implicite, c'est--dire qu'il n'y a gnralement pas besoin de le spcifier dans
son code.

De mme, lorsque vous dclarez une variable dans le contexte global de votre script, cette variable
deviendra en vrit une proprit de l'objet window.

Toute variable non dclare (donc utilise sans jamais crire le mot-cl var) deviendra
immdiatement une proprit de l'objet window, et ce, quel que soit l'endroit o vous
utilisez cette variable ! a peut tre trs pratique mais utilisez cette particularit en
connaissance de cause et prfrez le mot-cl var pour dclarer vos variables.

Quelques proprits pratiques de lobjet window :

history : permet daccder lhistorique de navigation pour la fentre en cours

document : permet daccder au document HTML (voir chapitre suivant)
location : permet dobtenir des informations sur lURL courant
navigator : permet dobtenir des informations du navigateur

Affichage de quelques proprits de lobjet window et de ses sous-objets

http://jsfiddle.net/4v3Ed/

Quelques mthodes pratiques de lobjet window :

alert() : pour afficher un message (pratique pour dbugger ;))

open() : pour ouvrir une nouvelle fentre, comme une bonne vieille pop-up maintenant
bloque par les navigateur
scrollTo() : pour positionner le scroll jusque un point prcis

Toutes les proprits et mthodes de lobjet window

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

29
 Lobjet document
Lobjet document est une proprit de lobjet window, il correspond au tag <html>. Cest cet objet
qui reprsente la page web et cest via lui que lon va pouvoir accder aux lments HTML du DOM
pour ensuite les modifier.

Lecture et modification du DOM

Il est donc possible, en JavaScript et jQuery, de modifier le DOM. Cest en modifiant le DOM quon
peut par exemple afficher un tooltip quand on clique sur une image, une fentre modale, un
calendrier ou des messages derreurs lorsquon formulaire nest pas valide. Chaque modification
consiste en :

1. Slectionner llment HTML quon souhaite modifier (par exemple, un div afficher en tant
que tooltip ou fentre modale)
2. Faire quelque chose avec cet lment, comme :
a. Changer ses proprits, par exemple sa position, sa couleur de fond,
b. Ajouter du contenu llment
c. Supprimer llment de la page HTML
d. Rcuprer de linformation de llment, par exemple le texte dun input
e. Ajouter/supprimer des classes CSS, par exemple pour changer sa visibilit, sa
typographie,

Une fois llment slectionn, on peut videmment lui appliquer plusieurs actions.

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

En JavaScript pur
Dans ce chapitre nous allons brivement exposer les proprits et mthodes des objets Node et
Element qui permettent daccder plus en profondeur au DOM et de le modifier.

Nous nallons pas nous attarder dessus, les mmes possibilits existent en jQuery et nous les verrons
dans le chapitre ad hoc. Mais cela vous donnera dj un aperu des possibilits offertes de base
par JavaScript.

Slectionner un lment (mthode classique)

Lobjet document possde 3 mthodes qui permettent daccder aux lments du DOM :

getElementById() : permet daccder un lment en spcifiant son id (attribut id en HTML)

getElementsByTagName() : retourne un array dlments qui correspondent au tag spcifi
getElementsByName() : retourne un array dlments dun formulaire dont le lattribut
name correspond au name spcifi

Bon, ces mthodes sont quand un peu limites pour des actions complexes, si par exemple on veut
accder tous les td dune table, on va devoir crire un code assez moche et lourd, avec des
boucles mais disons que cest pratique et performant pour des actions trs simples et cibles.

30
 Slectionner un lment (mthode rcente)
Du coup, deux mthodes sont rcemment venues complter les 3 classiques pour accder plus
rapidement aux lments du DOM. Malheureusement elles ne sont pas supportes par tous les
browsers. Ce qui les rend un peu inutiles

Elles utilisent, comme jQuery dailleurs, les slecteurs CSS sous forme de string en paramtre.

querySelector() : renvoie le premier lment trouv qui correspond au slecteur CSS

querySelectorAll() : revoie un array avec tous les lments qui correspondent au slecteur
CSS

Tant quon natteint pas un div dfini dune collection de div, on rajoute du code HTML
aux div parcourus notez lutilisation de querySelectorAll()

http://jsfiddle.net/g8XJx/

Adapter la hauteur de 3 div en fonction du plus haut des div notez lutilisation de
getElementById() et children

http://jsfiddle.net/WZ6ac/

Modifier un lment
Proprits et mthodes de lobjet Element permettant de le modifier:

getAttribute() et setAttribute() : permettant respectivement de rcuprer et d'diter un

attribut. Le premier paramtre est le nom de l'attribut, et le deuxime, dans le cas de
setAttribute() uniquement, est la nouvelle valeur donner l'attribut.
Attributs accessibles comme id, title, href, style, value, etc
className : rcuprer et diter lattribut HTML class (attention, cest une string avec toutes
les classes sous format texte)
innerHTML : rcuprer et diter lHTML enfant dun lment sous format texte
innerText (< IE 9) et textContent : le mme que innerHTML except le fait que seul le texte
est rcupr, et non les balises.

Proprits et mthodes de lobjet Node permettant dajouter ou retirer des lments enfant:

appendChild() : ajouter un Node aux enfants

insertBefore() : ajouter un Node aux enfants avant un autre Node
insertAfter() : ajouter un Node aux enfants aprs un autre Node
removeChild() : retirer un Node enfant
replaceChild() : remplacer un Node enfant
hasChildNode() : retourne un boolen qui permet de savoir si le Node a des enfants

31
 Crer des span sous forme de tags partir dun array notez lutilisation de
createElement(), createTextNode() et appendChild()

http://jsfiddle.net/cLLS2/

Crer un nouvel lment

Il est galement possible de crer des nouveaux Element en JavaScript via la mthode
document.createElement(). Cette mthode demande un paramtre une string avec le nom du tag
correspondant llment souhait, par exemple :

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

On cre ici un nouvel lment <a>. Cet lment est cr, mais n'est pas insr dans le document, il
n'est donc pas visible. La mthode document.createTextNode() permet quant elle de crer un
Node #text. Ces mthodes sont beaucoup plus performantes que la cration dlments en jQuery,
que nous verrons galement.

Cela dit, on peut dj travailler sur llment cre, en lui ajoutant des attributs ou mme des
vnements (que nous verrons dans le chapitre suivant). On peut lajouter au DOM via la mthode
appendChild() de lobjet Node.

En jQuery
jQuery est beaucoup plus puissant pour ce qui est de laccs et la modification du DOM. Il utilise
intensivement les slecteurs CSS et soccupe de la compatibilit avec les navigateurs, mme avec le
bon vieux IE6.

Slectionner un lment laide des slecteur CSS

Si vous tes familiers avec les CSS, vous avez les armes pour travailler avec jQuery ! Ils permettent de
slectionner un lment HTML partir de son style.

La syntaxe de base est celle-ci :

$(slecteur)

Le caractre $ est ce quon appelle lobjet jQuery. Cest le point de dpart de nimporte quelle action
que vous allez effectuer avec jQuery. Vous verrez de temps en temps cette syntaxe :

jQuery(slecteur)

Ce qui revient la mme chose que le caractre $, mais quon utilise parfois par soucis de
compatibilit si une autre librairie utilise dj le symbole $.

Les slecteurs CSS de base comme lID, la classe ou le nom de llment sont le cur des CSS

32
 ID
Comme document.getElementById(), on peut slectionner un lment partir de son ID avec jQuery

//faon oldschool
var message = document.getElementById(message);

//faon jQuery
var message = $(#message);

Notez lutilisation du caractre # avant lID en question, comme en CSS

Nom de llment
Comme document.getElementsByTagName(), jQuery permet de slectionner des lments HTML
partir de leur nom de tag.

//faon oldschool
var linksList = document.getElementsByTagName(a);

//faon jQuery
var linksList = $(a);

Cest quand mme plus court non ?

Classe
Un autre slecteur super pratique qui permet de slectionner un ou plusieurs lments partir de
leur classe CSS.

Cette faon de faire est possible avec les nouveauts du DOM document.getSelector() et
document.getSelectorAll() mais comme dj dit, ces mthodes ne sont pas supportes par tous les
navigateurs. Autant donc passer directement par jQuery !

Un exemple dutilisation :

//faon jQuery
var subMenus = $(.submenu);

Notez lutilisation du . qui dfinit une classe comme en CSS.

33
 Slecteurs CSS de base activez la console Firebug pour voir les rsultats

http://jsfiddle.net/aASEX/

Vrifier si un lment existe

Pour simplement vrifier quun lment existe en jQuery, il faut slectionner llment et vrifier si
sa proprit length est plus grande que 0

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

console.log( OK ) ;
}

Modifier un lment
Une fois votre lment slectionn, vous pouvez effectuer une srie daction partir de cet lment.

Lire et modifier son texte

La mthode text() permet de modifier le texte dun lment HTML, par exemple le texte dun lien,
dun h2, etc Si vous envoyez du code HTML cette mthode, elle affichera le code HTML dans la
page, comme si vous vouliez montrer du code aux visiteurs.

$(#errors h2).text(Pas derreurs trouves);

Si vous ne donnez aucun texte en paramtre la mthode, dans ce cas vous pouvez rcuprer la
valeur du texte de llment, pour le mettre dans une variable par exemple.

La mthode html() quant elle permet de modifier le contenu HTML dun lment. Si llment
slectionn contient dj du inner HTML, celui-ci sera remplac par celui que vous spcifiez en
paramtre.

$(#errors h2).html(<span>Pas derreurs trouves</span>);

Si vous ne donnez aucun texte en paramtre la mthode, dans ce cas vous pouvez rcuprer la
valeur du inner HTML llment, pour le mettre dans une variable par exemple.

Modification de contenu avec text() et html()

http://jsfiddle.net/kmRBL/

34
 Lire et modifier ses attributs
La mthode attr() permet de lire la valeur dun attribut dun lment. Par exemple, pour rcuprer
ladresse dune image dans la page, vous pourriez faire ceci

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

Si vous passez un 2me attribut la mthode attr(), vous pouvez alors dfinir la valeur de lattribut en
question. Si vous souhaitez par exemple modifier le chemin vers limage de lexemple prcdent :

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

Si vous souhaitez effacer un attribut, l il faut utiliser la mthode removeAttr(). Par exemple pour
retirer lattribut alt de limage :

$(#banner img).removeAttr(alt);

Modification dattributs avec attr() et removeAttr()

http://jsfiddle.net/MLtMt/

Lire et modifier son style

Via les classes CSS

jQuery offre plusieurs mthodes pour manipuler lattribut class dun lment.

addClass() ajoute la classe CSS spcifie en paramtre llment slectionn. Cette mthode
ncrase pas les classes dfinies prcdemment mais se contente de rajouter la classe spcifie.

$(.btn).addClass(btn-success);

removeClass() fait exactement linverse en enlevant la classe CSS spcifie de llment slectionn.

$(.btn).removeClass(btn-success);

35
toggleClass() quant elle ajoute la classe si elle nexiste pas et lenlve si elle existe. Cest pratique
pour des lments qui ont un tat on/off par exemple.

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

http://jsfiddle.net/zgSF8/

Via les proprits CSS

Imaginons que vous voulez directement changer le style dun lment sans passer par des classes
CSS. Cest possible via la mthode css(). Vous pouvez utiliser de 3 manires diffrentes :

pour trouver la valeur existante dune proprit CSS

pour modifier une proprit CSS dun lment
pour modifier plusieurs proprits la fois

Vous allez surtout utiliser cette mthode pour modifier une proprit. Par exemple :

$(.btn).css(font-size, 200%);

Modification de styles CSS avec css()

http://jsfiddle.net/fHPYs/

Supprimer un lment
Vous pouvez bien entendu effacer un ou plusieurs lments de la page web avec remove().

Mettons que vous avez un div avec lID popup , qui serait une fentre modale, et que vous voulez
leffacer de la page :

$(#popup).remove();

Cela marche aussi si vous spcifiez un slecteur qui concerne plusieurs lments ils seront tous
effacs.

Vous pouvez galement remplacer un lment par autre chose avec replaceWith(). Disons que vous
avez une img avec lID product101 et vous voulez mettre du texte la place car le produit li a
t ajout un panier dachat.

36
 $(#product101).replaceWith(<p>Ajout au panier</p>);

Ajouter du contenu la page

Crer un nouvel lment

Il est bien sr possible de crer du nouveau contenu dynamiquement en JavaScript et jQuery de
le rajouter la page. Pour ce faire, il faut spcifier lobjet jQuery le tag (avec balises) qui
correspondant llment que vous souhaitez crer.

Par exemple, pour crer un nouvel lment qui correspond un span :

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

Vous pouvez galement crer un nouvel lment en utilisant la manire JavaScript pure
avec document.createElement() cette faon de faire est plus rapide que la manire
jQuery.

Rajouter un nouvel lment la page

Une fois le nouvel lment cre, vous pouvez utiliser les mthodes append(), prepend(), after() ou
before() pour lajouter la page web :

append() : ajoute llment (ou le code HTML spcifi en string) en paramtre comme
dernier enfant de llment slectionn
appendTo() : ajouter llment slectionn un parent, comme premier enfant
prepend() : ajoute llment (ou le code HTML spcifi en string) en paramtre comme
premier enfant de llment slectionn
prependTo() : ajouter llment slectionn un parent, comme dernier enfant
after() : ajoute llment (ou le code HTML spcifi en string) directement aprs llment
slectionn
before() : ajoute llment (ou le code HTML spcifi en string) directement avant llment
slectionn

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

$(#tags).append(newSpan);

37
 Tant quon natteint pas un div dfini dune collection de div, on rajoute du code HTML
aux div parcourus on utilise jQuery et la mthode append()

http://jsfiddle.net/4XbR5/

Enchainement de mthodes
Une fonctionnalit super intressante de jQuery est ce quon appelle lenchainement de mthodes.
En fait, toutes les mthodes que nous venons de voir peuvent tre connectes, mises la chaine
lune de lautre. Cela permet de faire plusieurs choses en une seule ligne de code !

Par exemple, si nous voulons en une seule fois :

crer un lment span

lui ajouter une classe orange
lui ajouter du texte HTML 5
le rajouter un autre lment avec lID tags

Nous pouvons crire ceci :

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

Gnial non ? Si vous trouvez cela dur lire, vous pouvez crire chaque mthode la ligne, comme
ceci :

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

Crer des span sous forme de tags partir dun array on utilise jQuery avec la
cration dlment, append() et text(), avec enchainement des mthodes

http://jsfiddle.net/GDALW/

Agir sur plusieurs lments dune slection

Bon, cest chouette tout a mais si on voulait effectuer une mme action sur plusieurs lments,
comment sy prendrait-on ?

Par exemple, imaginons quon ait une page avec plusieurs chapitres et que nous voulons gnrer
une table des matires automatiquement, sans se prendre la tte. Si un jour on rajoute un chapitre,
la table des matires se mettrait jour toute seule.

38
Vous vous rappelez des boucles et plus prcisment de la boucle for ? Elle nous permettait de
boucler sur un ensemble dlments, h bien une possibilit similaire existe un jQuery : la mthode
each().

La mthode each() peut tre chaine une slection afin de boucler sur chaque lment de la
slection et leur appliquer la mme action, au sein dune fonction anonyme. Sa syntaxe est celle-ci :

$(slecteur).each(function() {
action1;
action2;
action3;

});

a fait beaucoup de ( et de { tout a hein ? Les parenthses et les accolades sont mises en vidence
pour plus de clart. Commencez toujours par crire le bloc dinstruction sans code lintrieur puis
remplissez avec votre code, vous ferez moins derreurs.

Une fois lintrieur du each(), vous allez bien souvent devoir accder llment courant afin de
lire ou modifier ses proprits. Dans le cas de notre table des matires, nous devrons accder au
nom du chapitre et son ID pour pouvoir crer un lien (ancre).

Cela est possible via le mot-cl this, ce mot-cl correspond llment courant du DOM (Element). A
chaque passage de boucle, la valeur de this changera : il correspondra au premier lment au
premier passage, au deuxime lment au deuxime, ainsi de suite Cependant this ne vous
permettra daccder quaux mthodes et proprits standard de lobjet Element, si vous voulez faire
du jQuery avec, il va falloir le transformer en quivalent jQuery en crivant $(this).

$("h2").each(function() {
//on rcupre 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
mthodes each() et css()

http://jsfiddle.net/jY4bL/

Crer une table des matires automatiquement en jQuery

http://jsfiddle.net/GNGRm/

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

Les vnements

Le concept dvnement

On dit souvent que JavaScript permet de faire des sites web interactifs, en effet, on voit souvent
dans les sites web des actions qui se dclenchent lorsquon interagit avec des lments sur la page :
bote de dialogue qui souvre lors dun clic de souris sur un lien, des lments qui changent de taille
ou de couleur quand la souris passe dessus, des interactions possibles avec le clavier, etc tout cela
est possible grce aux vnements.

Un vnement reprsente le moment prcis o quelque chose arrive, pour vous permettre de mieux
comprendre, voici une liste des vnements principaux des lments HTML :

Nom Action pour le dclencher

click Cliquer (appuyer puis relcher) sur l'lment
dblclick Double-cliquer sur l'lment
mouseover Faire entrer le curseur sur l'lment
mouseout Faire sortir le curseur de l'lment
mousedown Appuyer (sans relcher) sur le bouton gauche de la souris sur l'lment
mouseup Relcher le bouton gauche de la souris sur l'lment
mousemove Faire dplacer le curseur sur l'lment
keydown Appuyer (sans relcher) sur une touche de clavier sur l'lment
keyup Relcher une touche de clavier sur l'lment
keypress Frapper (appuyer puis relcher) une touche de clavier sur l'lment
focus Cibler l'lment comme cliquer dans un champ dun formulaire
blur Annuler le ciblage de l'lment comme sortir dun champ dun formulaire
change Changer la valeur d'un lment spcifique aux formulaires (input, checkbox, etc.)
select Slectionner le contenu d'un champ de texte (input, textarea, etc.)
submit Envoyer un formulaire (spcifique au tag <form>)

Mais il existe des vnements spcifiques pour lobjet window galement, comme :

Nom Action pour le dclencher

resize Redimensionner la fentre du navigateur
scroll Scroller dans la fentre
load La page web a fini dtre charge (tous les objets du DOM sont chargs ainsi que
les images et sous-frames).

Pour info, lvnement resize sera trs utile dans le cas o vous voulez faire un site web responsive,
cest--dire qui sadapte en fonction de lcran du visiteur (cran normal, tablette, smartphone,etc)

40
 Associer un vnement un lment

Associer un vnement un lment en JavaScript ou jQuery ressemble trs fort ce que nous
avons vu pour modifier les proprits dun lment, cela consiste en 3 tapes :

1. Slectionner le (ou les) lment(s) HTML avec le(s)quel(s) le visiteur va intragir

2. Assigner lvnement llment : on dfinira le nom de lvnement par rapport au tableau
du chapitre prcdent.
3. Passer une fonction lvnement : cette fonction contient le code, laction qui va se passer
lors du dclenchement de lvnement.

En JavaScript
Concrtement il existe plusieurs manires dassocier un vnement un lment HTML en
JavaScript pur, retenez surtout la premire :

1. Via le DOM, en associant lvnement en JavaScript de la manire DOM-0 . On assigne

une fonction anonyme une proprit qui se nomme on + nom de lvnement, comme
ceci :

//on rcupre llment HTML

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

//on assigne une fonction anonyme sa proprit onclick

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

2. Via le DOM, la manire DOM-2 . Cest plus propre mais il y a pas mal de problmes
de compatibilit entre les navigateurs (Internet Explorer gre diffremment des autres le
cycle de vie dun vnement), du coup cest assez compliqu utiliser. Cette manire fait
appel la mthode addEventListener(). Sachez les reconnaitre mais prfrez la manire plus
simple du DOM-0

//on rcupre llment HTML

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

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

3. Directement depuis lHTML. Cette mthode est proscrire car elle mlange le code et
lHTML et ne respecte donc pas la separation of concerns. Cest comme quand vous mettez
des styles directement depuis lattribut style sans passe par une CSS, pas terrible quoi. Cela
scrit de cette manire :

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

bouton);">Un bouton</button>

41
 Avec jQuery
Avec jQuery, nous allons comme toujours utiliser les slecteurs CSS pour slectionner le(s)
lment(s) au(x)quel(s) associer lvnement.
Ensuite nous allons chainer une mthode dont le nom correspond exactement au tableau des
vnements. Par exemple click() ou mouseover().
Enfin nous allons passer une fonction, gnralement une fonction anonyme.

Syntaxe :

$(slecteur).vnement(function() {
action1;

});

//action sur le clic du bouton avec lID start

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

Crer des span sous forme de tags partir dun array on utilise jQuery avec des
vnements souris

http://jsfiddle.net/S8nt7/

Il est possible dappeler un vnement manuellement (si vous voulez par exemple, simuler un clic de
souris sur un lment partir dune autre action), dans ce cas, il suffit dappeler la mthode
correspondant lvnement sur llment slectionn mais sans fournir de paramtre la
mthode.

Il existe un vnement supplmentaire en jQuery qui nexiste pas nativement en JavaScript, cest
lvnement hover(). Il est utiliser quand vous voulez effectuer une action lorsque la souris passe
sur un lment et puis une autre action lorsque la souris sort de llment.
Il faut donc lui donner 2 actions , en code cela va se traduire par 2 fonctions anonymes passer
lvnement. Voici sa syntaxe :

$(slecteur).hover(
function() {
//Action quand la souris passe sur llment
},
function() {
//Action quand la souris part de llment
}

42
);

Par exemple, supposons que le visiteur passe sa souris au-dessus dun lien avec lID menu , vous
voulez faire apparatre un div (par dfaut non-visible) avec lID submenu . Quand la souris quitte
le lien, vous voulez faire de nouveau disparatre le submenu

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

Afficher la table des matires auto-gnre lors dun passage de la souris

http://jsfiddle.net/r8rPS/

Attendre le chargement de lHTML

Quand une page web se charge, le navigateur va immdiatement essayer de lancer tous les scripts
quil rencontre. a peut tre problmatique avec un script qui manipule le contenu de la page et qui
se lance avant que tout le contenu de la page soit charg Cela gnrera plein derreurs !

Il faut donc dire au script attend que la page soit charge pour te lancer .

Cest possible en JavaScript via la mthode window.load() mais cette mthode attend que tous les
contenus associs (images, CSS, scripts, animations Flash, vidos) soient chargs pour se lancer et
a peut prendre pas mal de temps ! Heureusement, jQuery fournit la mthode ready() qui attend
que la page soit charge mais nattend pas tous les contenus comme les images, vidos, ou autre.

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 excuter du code lorsque la page est
charge. Si vous vous retrouvez avec plusieurs ready(), ce nest pas un problme.

43
 Lobjet Event

Vous vous demandez peut-tre : mais comment je fais pour rcuprer la position de la souris
alors ? ou comment je peux savoir sur quelle touche lutilisateur vient dappuyer ? . On peut
bien sr rcuprer ces informations, a se fait via lobjet Event.

Cet objet est bien particulier dans le sens o il n'est accessible que lorsqu'un vnement est
dclench. Son accs ne peut se faire que dans une fonction excute par un vnement, cela se fait
de la manire suivante en jQuery

//variable e en paramtre : lobjet Event !

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

Lobjet Event contiendra des proprits diffrentes en fonction du type dvnement, si lvnement
est une action avec la souris il contiendra pageX et pageY (les coordonnes de la souris), tandis que
si cest un keypressed il contiendra which (le code ASCII de la touche).

Passer dun chapitre lautre avec les touches du clavier ( p et n ), la Google

Reader. Notez lutilisation dun constructeur et de la mthode push() dun array

http://jsfiddle.net/sfWns/

Passer dun chapitre lautre avec les touches du clavier ( p et n ) la Google

Reader. Notez lutilisation dun constructeur et de la mthode push() dun array.

Remarquez la gestion du scroll pour faire apparaitre un lien retour au dbut

http://jsfiddle.net/Wfgcm/

Une librairie jQuery pour grer les positions du scroll

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

Stopper le comportement normal dun vnement

Certains lments HTML ont une rponse prprogramme aux vnements, par exemple un lien
charge une page quand on clique dessus, un formulaire envoie ses donnes un serveur web, etc
Il arrive que lon veuille couper le comportement normal de cet vnement : que le lien ne
redirige pas vers la page ou que le formulaire ne poste pas ses donnes vers le serveur car certains
de ses champs ne sont pas remplis correctement.

44
Dans ce cas, il suffit, une fois dans le corps de la fonction anonyme associe lvnement,
dappeler la mthode preventDefault() de lobjet Event ou de simplement retourner la valeur false.

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

Equivaut

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

Plus sur les vnements : http://api.jquery.com/category/events/

Plus loin avec jQuery

Les objets littraux

Dclarer et utiliser un objet littral

Les objets littraux permettent de crer une liste de proprits et valeurs en JavaScript. Ils sont
beaucoup utiliss pour paramtrer les plug-ins jQuery, pour configurer les animations jQuery ou
envoyer des donnes en AJAX car ils permettent denvoyer plusieurs paramtres en une seule fois.

La syntaxe pour crer un objet littral est celle-ci :

{
proprit1 : valeur1,
proprit2 : valeur2
}

La proprit et la valeur sont spars par : et chaque paire proprit/valeur doit tre spare par
une virgule mais il ne fait pas en mettre aprs la dernire paire proprit/valeur ! Les apostrophes
autour des proprits sont facultatives sauf si les noms des proprits contiennent des caractres
spciaux.

On peut crer un objet littral et lassocier une variable

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

45
Et aprs on peut bien sr rcuprer chaque proprit individuellement :

console.log(data.firstName);

Voici un exemple dutilisation dobjet littral pass en paramtre de la mthode animate()

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

Autre utilisation dun objet littral : le tableau associatif

Sous le capot, un objet littral est en fait un Array (ou tableau) quon appelle tableau associatif.

Pour rappel, un Array est une variable qui contient plusieurs valeurs, appeles items. Chaque item
est accessible au moyen d'un indice (index) numrique. Dans un tableau associatif, on accde un
item non pas par un indice numrique mais pas une valeur textuelle appele cl (ou key).

Les proprits dun objet littral peuvent tre donc vues comme des cls qui permettent daccder
aux valeurs du tableau associatif.

On pourrait donc crire

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

data[firstName] = Jean;

Pour rajouter des lments ce tableau, il suffit simplement de spcifier une nouvelle proprit/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 qui sappelle for in. Cette boucle permet de boucler sur un
tableau associatif (et donc par dfinition, sur un objet littral !). Le fonctionnement est quasiment le
mme que pour un Array, except qu'ici il suffit de fournir une variable cl qui reoit un
identifiant (au lieu d'un index) et de spcifier l'objet parcourir :

for(var key in data) {

console.log(data[key]);
}

Quel est lintrt ? Les objets littraux se voient souvent attribuer des proprits ou mthodes
supplmentaires par certains navigateurs ou certains scripts tiers utiliss dans la page, ce qui fait que
la boucle for in va permettre de tous les numrer.

Les effets visuels

Dans les chapitres prcdents, vous avez appris la base de jQuery : slectionner des lments, les
modifier, et leur attacher des vnements.

Maintenant cest lheure de passer au ct le plus fun de jQuery, les effets visuels ! Comme pour la
modification et les vnements, il faut :

1. Slectionner le (ou les) lment(s) HTML avec le(s)quel(s) sur le(s)quel(s) on veut appliquer
un effet
2. Appliquer leffet via la mthode ad hoc en donnant des paramtres la mthode deffet
pour le contrler

Apparatre et disparatre
Les effets les plus simples sont aussi les plus souvent utiliss. Voici les mthodes qui permettent de
faire apparatre et disparatre des lments.

show() : affiche un lment cach

hide() : cache un lment affich
toggle() : si llment est cach, il saffiche ; sil est affich, il se cache
fadeIn() : affiche un lment cach de manire progressive
fadeOut() : cache un lment affich de manire progressive
fadeToggle() : si llment est cach, il saffiche ; sil est affich, il se cache mais de manire
progressive
slideDown() : affiche un lment cach avec un effet de glissement
slideUp() : cach un lment affich avec un effet de glissement

47
 slideToggle() : si llment est cach, il saffiche ; sil est affich, il se cache avec un effet de
glissement

Toutes ces mthodes peuvent recevoir un paramtre pour contrler la vitesse dapparition ou de
disparition. Il se prcise soit en string : slow, normal (par dfaut) 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 lment une certaine opacit : fadeTo(). Il prend en
paramtre une valeur de vitesse, comme les autres, mais aussi un pourcentage dopacit.

Effets de base (disparition et apparition)

http://jsfiddle.net/r3XH9/

Les animations
Il est possible de faire des animations plus personnalises grce la mthode animate() qui permet
de jouer avec toute les proprits CSS numriques (taille de la police, position dun lment, opacit,
largeur dune bordure,)

Cette mthode prend plusieurs paramtres :

un objet littral avec la liste des proprits CSS quon dsire changer et les valeurs que
doivent atteindre lanimation. Par exemple si vous voulez animer un lment en le dplaant
de 650px vers la gauche, en changeant son opacit 50% et agrandir sa police 24px :

{
left : 650px,
opacity : 0.5,
fontSize : 24px
}
la dure de lanimation, en millisecondes - facultatif, 400 par dfaut
leffet de transition (easing) facultatif. De base uniquement les effets swing ou linear
sont possibles mais vous pouvez en avoir plus via cette librairie
http://gsgd.co.uk/sandbox/jquery/easing/
Une mthode de callback facultatif. Il est possible de dire la mthode animate() de
dclencher une mthode une fois que lanimation est termine.

Animation tout simple grce animate()

http://jsfiddle.net/WsUcH/

48
 Afficher la table des matires auto-gnre lors dun passage de la souris avec un 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 slecteurs avancs

Bien souvent, vous nutiliserez que les slecteurs de base. Mais pour des oprations plus complexes
vous pourriez tre amens combiner des slecteurs et utiliser des fonctions avances telles que :

Les slecteurs descendants : pour cibler un tag qui se trouve dans un autre tag. Par exemple
pour pouvoir slectionner tous les liens situs dans un ul qui aurait lID navbar vous
cririez :

var navbarLinks = $(#navbar a);

Les slecteurs enfants : pour cibler un tag qui est enfant dun autre. Par exemple,
slectionner les p qui se trouve directement sous le body :

var childParagraphs = $(body > p);

Les slecteurs adjacents : pour slectionner un tag qui se trouve juste aprs un autre. Si
vous voulez par exemple slectionner un div qui se trouve dans lHTML juste aprs un h2
avec lID header , vous sparez les 2 slecteurs par un +

var adjacentDiv = $(#header + div);

49
 Les slecteurs dattributs : pour slectionner des lments qui possdent un certain attribut
ou dont un certain attribut possde une valeur spcifique. Par exemple si vous voulez
slectionner tous les tags img qui possdent un attribut alt, ou tous les tags a qui pointent
vers un site extrieur (dont le href commence par http://)
Voici les diffrentes possibilits :
o [attribut] : slectionne les lments qui possde lattribut spcifi
o [attribut= valeur ] : slectionne les lments dont lattribut spcifi possde la
valeur indique
o [attribut^= valeur ] : slectionne les lments dont lattribut spcifi commence
avec la valeur indique
o [attribut$= valeur ] : slectionne les lments dont lattribut spcifi termine
avec la valeur indique
o [attribut*= valeur ] : slectionne les lments dont lattribut spcifi contient
avec la valeur indique

Plus sur les slecteurs : http://api.jquery.com/category/selectors/

Les filtres

jQuery donne la possibilit de filtrer les slection en fonction de certains critres. Par exemple, si
vous ajoutez :even la suite dun slecteur, alors vous ne rcuprez que les lments pairs dun
groupe dlments.

De plus, vous pouvez des lments qui contiennent un tag particulier, un texte spcifique, les
lments cachs et mme ceux qui ne correspond pas un certain slecteur. 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 slecteurs de filtrage possibles :

:even et :odd : ne renvoie que les lments pairs ou impairs dun groupe dlments
attention, ils se basent sur lindex, comme dans un tableau, cest--dire 0,1,2,3, :even
correspondra donc en fait, aux lments impairs, cest un peu bizarre mais cest comme
a
:first et :last : slectionne le premier ou dernier lment dun groupe dlments
:hidden : trouve les lments cachs (avec display:none ou sur lesquels .hide() a t appel)
:visible : le contraire de :hidden
contains() : trouve les lments qui contiennent un texte spcifique spcifi en paramtre
(sutilise comme une mthode)

50
Mais il existe aussi des mthodes pour filtrer les lments dune slection :

filter() : permet de slectionner des lments qui rencontrent le slecteur spcifi en

paramtre
not() : permet de slectionner des lments qui ne rencontrent pas le slecteur spcifi en
paramtre
has() : trouve les lments qui contiennent un autre slecteur spcifi en paramtre
is() : vrifie les lments de la slection correspondent au slecteur spcifi en paramtre

Exemples de filtres

http://jsfiddle.net/5NEuW/

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

Parcourir le DOM

Bien souvent, aprs avoir slectionn un lment vous allez vouloir trouver dautres lments en
relation avec celui-ci. Par exemple, dans vous vous retrouvez dans la fonction lie lvnement
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. Cest l que les mthodes qui permettent de traverser le
DOM entrent en piste. Elles permettent, partir dun lment slectionn, de trouver dautres
lments, toujours via un slecteur CSS.

Voici la liste des mthodes jQuery qui permettent de parcourir le DOM :

find() : permet de trouver des lments particuliers partir de la slection en cours

children() : comme find() mais se limite aux lments qui sont des enfants direct de la
slection en cours
parent() : permet de remonter et de rcuprer le parent direct de la slection en cours
closest() : permet de trouver lanctre le plus proche qui correspond un slecteur
siblings() : permet de rcuprer tous les lments qui sont au mme niveau que la slection
en cours
next() : permet de trouver llment de mme niveau que la slection en cours et qui le suit
directement dans lHTML
prev() : mme chose que next() mais pour llment prcdent

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

51
 Les mthodes utilitaires

Plus sur les mthodes utilitaires : http://api.jquery.com/category/utilities/

Les plug-ins
Quand on parle de jQuery on entend souvent le terme plug-in. Un plug-in jQuery cest du code crit
en JavaScript et qui utilise massivement jQuery pour but bien prcis : afficher un calendrier, fournir
des effets visuels, permettre une gestion des cookies plus aise, afficher des lightbox, afficher des
sliders, afficher des notifications, etc

Ils consistent en 1 ou plusieurs fichiers .js inclure dans vos pages et parfois dun fichier .css qui va
styler le contrle 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
contrles utilisateurs disponibles sur le site de jQuery, jQuery UI. Ces contrles permettent
dafficher un simple choix de date fournir quantit dautres contrles, effets et interactions. Par
exemple :

un accordon
un systme dautocomplete
des boutons dj styls
un choix de date
une barre de progression
des tabs
une gestion du drap&drop
etc

Autres plug-ins

Il existe une quantit dautres plug-ins gratuits disponibles, voici une liste non-exhaustive :

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

Amlioration 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 fentre :
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 lutilisateur est dj venu sur le site auparavant :
http://www.ravelrumba.com/blog/firstimpression-js-library-detecting-new-visitors/
Utiliser Google Maps de manire simple : http://hpneo.github.com/gmaps/ -
http://gmap3.net
Gnrer une table des matires automatiquement : http://projects.jga.me/toc/
Organiser le contenu en tuiles : http://masonry.desandro.com/
Faciliter lexcution dune fonction quand on scrolle un lment :
http://imakewebthings.com/jquery-waypoints/
Parallax, navigation fixe, autoscroll, : https://github.com/Prinzhorn/skrollr
Pour raliser des potentiomtres : http://anthonyterrien.com/knob/
Pour raliser des notifications : http://needim.github.com/noty/ -
http://richardhsu.github.com/jquery.ambiance/
Afficher des infos complmentaires qui apparaissent sur le ct : 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 formulaires sont une part importante dun site web. Et jQuery permet de rcuprer (et de
modifier) facilement les valeurs dun formulaire, mais aussi de construire des interactions plus
complte et de permettre de valider les donnes avant lenvoi.

Interagir avec un formulaire

Slectionner des lments

Vous pouvez bien sr attribuer un ID un lment de formulaire et y accder comme nous lavons
vu prcdemment, mais jQuery offre des slecteurs spcifiques aux champs de formulaire :

Slecteur But
:input Slectionner tous les lments de formulaire

:text Slectionner tous les champs texte

:password Slectionner tous les champs mot de passe

:radio Slectionner tous les boutons radio
:checkbox Slectionner toutes les cases cocher
:submit Slectionne tous les boutons submit

53
:image Slectionne tous les boutons image
:reset Slectionne tous les boutons reset
:button Slectionne tous les champs avec le type button
:file Slectionne tous les champs dupload
:hidden Slectionner tous les champs cachs

Ces slecteurs peuvent bien sr tre combins dautres slecteurs. Ils sutilisent, par exemple
comme ceci (slectionner tous les champs cachs du formulaire myForm) :

var hiddenFields = $(#myForm :hidden);

En plus, jQuery offre 2 slecteurs pour permettre de rcuprer les valeurs slectionnes dans des
boutons radio/cases cocher et dans des listes droulantes :

Slecteur But
:checked Slectionne les lments cochs (dans le cas de boutons radio ou cases
cocher)
:selected Slectionne les lments slectionns dans une liste droulante

Exemple dutilisation :

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

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

Lire et modifier les valeurs

On peut bien sr accder aux valeurs des champs dun formulaire, dans le but de valider les
donnes, ou de faire un calcul, etc Dun autre ct on peut aussi modifier les valeurs des champs :
imaginons un cas o si vous cochez la case Mon adresse de facturation est la mme que celle de
livraison , que les donnes dj rentres soit automatiquement dupliques dans dautres champs.

Pour lire et modifier des valeurs, il suffit dutiliser la mthode .val(). Sans paramtre, celle-ci renvoie
la valeur du champ sur laquelle elle est appele, et si on lui donne une valeur en paramtre, 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, on peut sy prendre autrement.

Pour lire la valeur, il faut vrifier 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/dcocher une case cocher ou un radio, on peut utiliser la mthode attr() sur
lattribut checked

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

Les vnements
De manire similaire aux vnements dj vus, comme un clic de souris sur un lien ou une touche du
clavier qui est presse, il existe des vnements spcifiques aux formulaires. Ils sont au nombre de
5 : submit, focus, blur, click et change.

submit
Lvnement submit est dclench lors de lenvoi dun formulaire, que a soit en cliquant sur le
bouton submit ou en appuyant sur Enter quand vous tapez dans un champ texte du formulaire.

Cest lors de cet vnement que vous pouvez vrifier si le formulaire est valide ou non, en lui
associant du code via la mthode .submit().Dans le cas o le formulaire nest pas valide, il est
possible dannuler son envoi via un return false;

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

focus
Quand vous cliquez dans un champ dun formulaire, ce champ reoit ce quon appelle le focus. Il est
possible deffectuer une action lors du focus, en slectionnant le champ et en lui appliquant la
mthode .focus().

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

55
Pour rappel, un vnement peut tre appel manuellement si on ne lui fournit pas de paramtre.
Dans le cas de .focus() le focus sera mis sur llment slectionn. Ce qui peut tre pratique pour
dj positionner le curseur de texte dans le premier champ dun formulaire par exemple.

blur
Cest un peu le contraire de focus, blur est dclench lorsque vous quittez un champ dun formulaire.
Cela peut tre utile pour vrifier 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
slectionner le champ et lui appliquer la mthode .blur()

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

click
Il est videmment possible dintercepter un clic sur un lment dun formulaire, par exemple pour
effectuer une action lorsquune case cocher est coche. Cela fonctionne de manire similaire au
click vu prcdemment

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

change
Lvnement change peut tre utilis dans le cas o vous voulez appliquer une action lorsque la
valeur dune liste droulante change .

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

Activer/dsactiver des champs

En HTML, lattribut disabled permet de dsactiver un champ de formulaire ou un bouton, dans le cas
o vous ne voulez pas que lutilisateur rentre du contenu dans le champ ou clique sur le bouton
(pour viter un double envoi de formulaire par exemple).

Via jQuery il est bien sr possible de contrler lactivation dun champ ou bouton en lui
appliquant/retirant cet attribut de la manire suivante

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

Valider un formulaire

Introduction
La validation ct client (en JavaScript donc) est une tape essentielle lors de la mise en place dun
formulaire. Elle permet de sassurer que les donnes rentres par lutilisateur sont bien prsentes
(par exemple une adresse de livraison dans le cas dune commande) et quelles correspondent au
format attendu (un format de-mail pour une adresse mail, un texte sous forme de date pour une
date, un chiffre pour une quantit, etc)

En JavaScript pur, cela peut vite devenir long compliqu de valider un formulaire, il faut notamment
connatre les expressions rgulires. Heureusement, en jQuery, ces vrifications sont trs simples
mettre en place grce au plugin jQuery Validate.

Il y a 2 manires de rajouter de la validation sur un formulaire avec jQuery Validate ; soit une
mthode simple qui consiste attribuer des classes et attributs spcifiques dans lHTML, sur les
lments valider (indiquant sils sont requis, leur type attendu, le message derreur etc) ; soit la
manire avance qui consiste configurer la validation en JavaScript. Cette approche est
prfrer car elle permet daller beaucoup plus loin.

Configurer la validation
Pour configurer la validation, il faut dabord donner une valeur lattribut name de vos champs.
Ensuite, il faut appeler la mthode validate() sur le formulaire et lui passer un objet littral qui va
dfinir des rgles et, pour ces rgles des messages derreur.

La syntaxe est :

$(#myform).validate({

rules : {

nomDuChamp : typeDeValidation

},

messages : {

nomDuChamp : {

typeDeValidation : Message derreur

57
 }

}) ;

Par exemple

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

Voici les types de validation les plus utiliss quoffre jQuery 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 dcimal
digits La valeur du champ doit tre un nombre entier
equalTo La valeur du champ doit gal la valeur dun
autre champ
minlength La longueur de la valeur du champ doit tre
suprieure une certaine valeur
maxlength La longueur de la valeur du champ doit tre
infrieure une certaine valeur
min La valeur du champ doit tre suprieure une
certaine valeur
max La valeur du champ doit tre infrieure une
certaine valeur

Il est galement possible de dfinir ses propres mthodes de validation via la mthode addMethod()
qui demande : un nom, une fonction de validation et un message derreur par dfaut.

Si le formulaire nest pas valide, le formulaire ne sera pas envoy vers le serveur.

58
 A noter que si le formulaire envoie ses donnes via une requte AJAX, il faut dfinir
laction faire dans le cas o le formulaire est valide dans loption submitHandler de la
mthode validate().

Styler les messages derreur

Quand le plug-in vrifie un formulaire et trouve un champ invalide, il fait 2 choses : premirement, il
ajoute une classe error au champ invalide ; deuximement il rajoute un label la suite du champ
qui contient le message derreur dfini.

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

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

Sil nest pas valide, le nouvel HTML sera :

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

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

Il suffit ds lors dajouter dans votre CSS de quoi styler la classe error . Mais si vous voulez faire
plus lors de laffichage des messages derreur (comme styler un autre lment), vous pouvez utiliser
dautres options de .validate() comme errorPlacement, highlight, etc

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

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

Requtes AJAX avec jQuery

Introduction

Les applications web ressemblent de plus en plus des applications desktop , le temps o votre
page web se rafraichissait compltement lorsque vous effectuiez une action est presque
rvolu grce AJAX.

AJAX (acronyme pour Asynchronous JavaScript And XML) permet une page web de contacter un
serveur web et de se rafraichir elle-mme avec les donnes renvoyes par le serveur. Cela ouvre les
portes des centaines de possibilits, comme :

Afficher du nouveau contenu HTML sans devoir recharger la page

59
 Envoyer un formulaire et afficher un rsultat instantanment
Se logguer sans quitter la page
Parcourir des longues listes
Etc

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, lors dun appel de page classique , le navigateur contacte
le serveur web, qui renvoie une nouvelle page au navigateur.
Lors dun appel AJAX, le navigateur ne demande au serveur que de nouvelles informations. Le
serveur renvoie les donnes demandes, et le contenu et lapparence de la page sont mis jour avec
laide de JavaScript.

Il y a donc 3 acteurs lors dun appel AJAX :

Le navigateur web : via lobjet XMLHttpRequest de votre navigateur, JavaScript peut parler
un serveur web et recevoir de linformation en retour
JavaScript : cest lui qui fait le gros du boulot. Il envoie une requte au serveur, attend pour
une rponse, traite la rponse et met jour la page en ajoutant du contenu (en manipulant
le DOM) ou en adaptant laffichage de la page.
Linformation envoye peut tre aussi bien le dtail dun formulaire, quun simple donne
(par ex. un rating sur un article). Linformation reue en retour peut aussi bien tre une
simple phrase ( Merci de votre vote ) quune liste de nouveaux enregistrements (dans le
cas dun e-commerce par exemple)
Le serveur web : le serveur reoit donc des requtes du navigateur et lui renvoie des
informations. Les informations peuvent tre aussi bien du texte, quun bout de code HTML,
de XML ou de donnes JSON.
Le serveur quant lui peut aussi bien tre un serveur IIS qui fait tourner de lASP.NET, quun
serveur Apache avec PHP.

Il est tout fait possible deffectuer des appels AJAX en JavaScript pur via lobjet XMLHttpRequest,
mais il est bien plus ais dutiliser jQuery.

Mthodes jQuery

jQuery offre plusieurs mthodes 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 slecteur
sur lequel la mthode est appele.
Il est possible de lui prciser un slecteur de la page cible afin de ne slectionner qu'une partie de la
page charger.
Cette mthode ne requiert pas d'intervention de la part d'un serveur web.

60
 //charge le contenu de llment #newsItem de la page today.html
dans llment #headlines de la page courante
$(#headlines).load(today.html #newsItem);

$.get() et $.post()
$.get() et $.post() : ces mthodes (autonomes) permettent de charger des donnes d'un serveur web
via une requte GET ou POST.

La syntaxe est celle-ci (cest la mme chose pour $.post) :

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

//contacte le serveur ladresse rate.php, envoie les donnes (un

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

Les donnes renvoyes peuvent tre de diffrents formats: texte, HTML, XML ou JSON

$.getJSON()
$.getJSON() permet de charger des donnes d'un serveur web au format JSON via une requte GET.
Cette mthode est identique $.get mais le format renvoy est doffice du JSON

$.ajax()
Cette mthode est la plus complte et flexible de toutes. $.get, $.post et $.getJSON sont des
raccourcis de $.ajax(). Cest donc galement celle qui demande le plus de configuration.

Pour la configurer, il suffit de lui passer un objet littral. Les paramtres de cet objet les plus
couramment utiliss sont :

url : ladresse serveur vers laquelle faire la requte

type : le type de requte, GET ou POST
data : les donnes envoyer au serveur
dataType : le format de donnes renvoyes par le serveur ( xml , html , json ,
text )
contentType : le content type des donnes envoyes
async : true ou false, dfini si la requte doit tre synchrone ou asynchrone
success : une fonction appele si la requte russit. Cette fonction reoit en premier
argument les donnes renvoyes par le serveur
error : une fonction appele si la requte choue

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

Les cookies
Les cookies ont t invents par Netscape afin de donner une "mmoire" aux serveurs et
navigateurs Web. Le protocole HTTP, qui gre 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 envoye 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 considrera toujours qu'il s'agit de
votre premire visite.

Cela peut tre gnant plusieurs titres : le serveur ne peut pas se souvenir si vous tes authentifi
une page protge, n'est pas capable de conserver vos prfrences utilisateur, etc. En rsum, il ne
peut se souvenir de rien ! De plus, lorsque la personnalisation a t cre, cela est vite devenu un
problme majeur.

Les cookies ont t invents pour remdier ces problmes. Il existe d'autres solutions pour les
contourner, mais les cookies sont trs simples maintenir et trs souples d'emploi.

Ils sont stocks sous forme de fichiers textes dans le rpertoire de fichiers temporaires de votre
navigateur et permettent, par exemple, de retenir un choix de langue effectu par lutilisateur sur
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
diffrentes fentres.

On peut crer et lire des cookies avec du code ct serveur mais cest galement possible de le faire
en JavaScript !

Si vous voulez stocker des informations dans un cookie, vous devrez spcifier 3 choses :

Une cl ; un identifiant de linformation que vous souhaitez stocker, par exemple

userLanguage
Une valeur ; par exemple FR pour Franais
Une date dexpiration ; le moment auquel vous souhaitez que le cookie expire, cest--dire
soit dtruit

Mthodes de cration et daccs aux cookies + utilisation dun cookie dans le cas dun
choix de langue FR/NL

http://jsfiddle.net/BFmdg/

Une librairie jQuery pour grer les cookies : https://github.com/ScottHamper/Cookies

62
Pour vrifier les cookies, leur valeur et date dexpiration vous pouvez utiliser longlet Cookies de
Firebug

A savoir, pour des raisons de scurit, vous ne pouvez pas modifier la valeur des cookies
marqus comme Http Only en JavaScript ! Vous pouvez voir ces types de cookies dans
Firebug galement. Ce sont gnralement des cookies qui contiennent des informations
sensibles comme un identifiant de session

Lobjet Date

La date dexpiration nous offre une possibilit de parler brivement dun autre type dobjet : lobjet
Date. Nous nallons pas nous tendre dessus car vous ne serez pas beaucoup amens lutiliser mais
cest toujours bon savoir quil existe.

Dans lexemple des cookies, on envoie un nombre de jours dexpiration la mthode createCookie(),
en fait, cette mthode crer un objet Date qui reprsente 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
constructeur de lobjet Date peut prendre en charge plusieurs paramtres pour nous permettre de
construire une date, mais retenez surtout ces deux-cis :

new Date();
new Date(anne, mois, jour [, heure, minutes, secondes,
millisecondes ]);

63
 La premire ligne instancie un objet Date dont la date est fixe celle de l'instant mme de
l'instanciation.
La deuxime ligne permet de spcifier manuellement chaque composant qui constitue une
date, nous retrouvons donc en paramtres obligatoires : l'anne, le mois et le jour. Les
quatre derniers paramtres sont facultatifs (c'est pour cela que vous voyez des crochets, ils
signifient que les paramtres sont facultatifs). Ils seront initialiss 0 s'ils ne sont pas
spcifis, nous y retrouvons : les heures, les minutes, les secondes et les millisecondes.

Une fois un objet Date instanci, vous pouvez utiliser ces mthodes :

getFullYear() : renvoie l'anne 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 trs rare voir presque impossible de programmer sans faire derreurs les fameux bugs qui
plantent notre application sont si vite arrivs.

Mais quel type derreurs peut-on bien faire ? Cela peut tre une erreur de frappe : on a oubli un
caractre, on a mal orthographi le nom dune fonction et du coup JavaScript ne la trouve pas, ou
alors on a simplement fait une erreur dans notre logique en faisant une division au lieu dune
multiplication.

Avec les vieux navigateurs, les messages derreur JavaScript ntaient pas des plus parlants, et il
fallait user et abuser de la mthode alert(), quon dissminait un peu partout dans le code en
esprant trouver la ligne qui pose problme ! Encore faut-il, une fois la ligne coupable trouve,
savoir le corriger

Cette priode de galre est rvolue, tous les navigateurs possdent une console derreurs et puis
cest sans compter sur notre fidle Firebug ! Il affiche des messages derreurs assez clairs en
indiquant gnralement lendroit exact o lerreur sest produite.

Mais on peut faire plus : pour dbugger du code dans Firebug, allez dans longlet Script et
activez-le. Vous pouvez choisir le script analyser et y insrer des breakpoints ou points darrts. Ils

64
servent faire une pause sur une ligne d'un code JavaScript et afficher l'tat complet des variables,
mthodes, objets, etc. La quantit d'informations disponible est tout simplement immense, vous
pouvez les retrouver dans le cadre de droite de Firebug ds qu'un point d'arrt est atteint. Vous
pouvez aussi passer dun point darrt un autre pour voir au ralenti lexcution de votre script.

La gestion des erreurs

Disons que vous avez un script o vous vous dites cet endroit-l, ya des chances que a plante
car vous faites un calcul complexe, ou faites une opration partir de donnes rentres par
lutilisateur. Au lieu de croiser les doigts pour que a narrive pas, vous pouvez mettre en place une
gestion derreurs.

La gestion derreurs se fait laide du bloc dinstruction try catch. Dans le try on va essayer le code,
et si une erreur (ou exception) survient, on passe dans le bloc catch, o lon va excuter une action
en cas derreur (affichage dun message, log de lerreur, ou autre)

Ce bloc dinstruction peut tre suivi de linstruction finally, o lon va excuter du code quoi quil se
passe, quil marche, ou quil plante. Mais vous allez rarement lutiliser.

Si vous voulez vous-mme dans votre code renvoyer une erreur (si un paramtre est incorrect par
exemple), vous pouvez le faire laide de linstruction 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 signifie que cest une version du
script qui a t minifie : cela consiste retirer tous les espaces, les commentaires et les retours la
ligne inutiles du code.

Les intrts de la minification sont principalement de rduire la taille du fichier et donc dacclrer le
temps de chargement et accessoirement de rendre le code moins lisible pour le protger contre le
vol. Un code minifi est aussi plus difficile dbugger.

Prfrez donc un code non-minifi pour dvelopper et puis au-moment de mettre votre site en
ligne, changez les rfrences dans vos pages du script non-minifi vers le script minifi et mettez
la version minifie en ligne.

Packer vous permet de minifier vos JavaScripts

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

JSBeautifier vous permet de dminifier un script minifi

http://jsbeautifier.org/

65
Plus dinformations

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 Zr0

66