04-Javascript

Conception d’un site web
NFA074, 6 ECTS
Chapitre 4
Javascript / jQuery
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une
information complète et fiable. Cependant, le Cnam Champagne-Ardenne n'assume de responsabilités,
ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes
qui pourraient résulter de cette utilisation.
Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions
théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Le Cnam ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de quelque
nature que ce soit pouvant résulter de l'utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par
leurs propriétaires respectifs.
Ce support pédagogique a été rédigé par Arnaud RENARD, enseignant vacataire au Cnam ChampagneArdenne.
Copyright  2013-2014 - Cnam Champagne-Ardenne.
Tous droits réservés.
L'utilisation du support pédagogique est réservée aux formations du Cnam Champagne-Ardenne. Tout
autre usage suppose l'autorisation préalable écrite du Cnam Champagne-Ardenne.
Toute utilisation, diffusion ou reproduction du support, même partielle, par quelque procédé que ce soit,
est interdite sans autorisation préalable écrite du Cnam Champagne-Ardenne. Une copie par
xérographie, photographie, film, support magnétique ou autre, constitue une contrefaçon passible des
peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des droits d'auteur.
Décembre 2014
Javascript et jQuery
Ce chapitre va traiter de Javascript par l’intermédiaire de jQuery. Il ne s’agit pas de devenir un expert
des deux technologies, mais d’en apprendre les bases afin d’agrémenter vos pages web. En guise de
prérequis, il est considéré que vous connaissez HTML (qui permet de créer la structure d’une page web)
et CSS (qui permet de définir les styles d’affichage de la page). En outre, vous avez quelques bases de
DOM, le Document Object Model, qui est l’approche pour comprendre la structure du document HTML et
vous savez le manipuler en CSS à l’aide des sélecteurs.
En jQuery, nous allons apprendre à :
- Sélectionner un élément ou des éléments dans une page HTML ;
- Modifier le contenu d’éléments ainsi que leurs styles ;
- Réagir à des événements qui ont lieu sur la page ;
- Créer des animations
Avant de commencer, il convient de planter le décor. Javascript est un
langage de programmation qui est interprété par votre navigateur. Il ne
décrit pas la structure de la page comme le fait html, mais décrit les
actions qui doivent être effectuées. Les codes javascript seront donc
exécutés par le navigateur et ont la capacité de manipuler la page web,
d’interagir avec l’internaute et de créer des animations. C’est un
langage orienté objet à prototype, nous utiliserons donc des objets pour
manipuler des chaines de caractères (des textes) ou des nombre (ou
autres objets mathématiques). Le langage a été créé en 1995 par
Brendan Eich (photo ci-contre), alors qu’il officiait pour Netscape
Communication (une entreprise pionnière du web depuis 1994, connue
pour son navigateur Netscape dans les années 90, dissolue en 2003) et
alors qu’il était déjà membre du conseil d’administration de Mozilla.
Pour ajouter du javascript à votre page web, les quelques lignes suivantes suffisent si elles sont insérées
dans la page html :
<script>
alert("hello world");
</script>
Il est aussi possible d’écrire la totalité du code javascript dans un fichier séparé –dont l’extension est
généralement .js-, et de l’inclure dans votre page de la manière suivante.
<script src='monFichier.js'></script>
Dans les deux cas, le script sera alors exécuté par vote navigateur au moment où il est lu. Il est aussi
possible d’intégrer du javascript directement dans les balises html, mais nous ne le ferons pas.
Dans le cadre de NFA074, nous allons directement apprendre JQuery qui est une bibliothèque JavaScript
libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client, dans le code HTML des pages
web. La première version de JQuery a été lancée en janvier 2006 par John Resig. Pour nous, cette
librairie va présenter un triple avantage :
- JQuery propose une utilisation de haut niveau qui permet de faire la même chose que Javascript,
mais avec beaucoup plus de souplesse et d’efficacité. Bien sûr, certaines parties seront écrites
en Javascript ;
- Le code JQuery est compatible avec les principaux navigateurs du marché. Ainsi, nous n’aurons
pas à gérer cet aspect qui peut être délicat en Javascript ;
- JQuery s’est imposé comme la référence et nombre d’extensions sont disponibles. Nous en
testerons d’ailleurs une.
Chapitre 4 : Javascript et jQuery
1 / 13
1. Sélection, événements et actions
On peut décomposer le scénario le plus classique d’utilisation de jQuery de la manière suivante :
Sélection
d'éléments
.
Gestion
d'événements
.
Action
C’est le schéma qui sera utilisé dans la suite de ce cours :
- Un certain nombre d’éléments sont sélectionnés (des images, des liens, le document, …) à l’aide
d’un sélecteur reprenant la syntaxe des sélecteurs CSS3
- Un événement est géré sur cette sélection. Il peut s’agir du clic, du double clic, du survol à la
souris, ou même d’une opération.
- Si cet événement est déclenché, un certain nombre d’actions aura lieu. Il peut s’agir de modifier
la structure DOM, ou d’intervenir sur les styles, les contenus et les attributs des éléments.
Ce schéma sera complété par la suite.
1.1. Premier exemple
En guise de premier exemple, on peut vouloir ajouter une bordure rouge lors du clic sur les images d’une
page web :
Sélection :
les images
.
Gestion de l’événement :
clic
.
Action :
ajouter une bordure
Cet exemple est disponible en ligne, pour test (et pour clics), et sera expliqué dans la suite du cours.
Aucun besoin d’afficher le code source de cette page pour le moment :
http://www.action-creation.fr/cnam/nfa074/chapitre4/exemple1.html
Décembre 2014
Exercice 1 :
Téléchargez le fichier jquery.js et enregistrez-le dans votre répertoire de travail.
http://www.action-creation.fr/cnam/nfa074/chapitre4/jquery.js
Créez une page html et incluez-y ce fichier javascript juste avant le </body>.
Nous sommes maintenant prêts à commencer.
Vous pouvez aussi télécharger le fichier jquery.js sur le site jquery.com (http://jquery.com/). Vous y
trouverez par ailleurs toute la documentation liée à la bibliothèque. Il existe quelques sources en
français, qui ne sont pas toujours à jour. jquery-fr peut servir de base : http://www.jquery-fr.com.
1.2. L’événement fondateur : le chargement de la structure DOM
Comme il a été dit précédemment, la première étape du schéma est la sélection d’un ensemble d’élément
dans la structure DOM. Or, il faut en premier lieu nous assurer que la totalité de la structure DOM soit
chargée avant de commencer notre sélection. En effet, si l’on sélectionne les images d’un document
alors qu’une partie de la page n’est pas encore chargée, on peut aisément imaginer qu’une partie des
images ne sera pas considérée.
Avant toute chose, on va donc devoir attendre la fin du chargement de la page. En langage JQuery :
avant toute sélection, on doit attendre que l’événement « le document est chargé » soit déclenché. Cette
locution peut se traduite par le schéma suivant :
Sélection :
du document (la
structure dom du
document)
.
Gestion de l’événement :
ready sur cette sélection
(qui est déclenché quand
la structure est chargée
par le navigateur)
.
action :
afficher un message
(une alerte en javascript)
Cet exemple est disponible en ligne, pour test :
http://www.action-creation.fr/cnam/nfa074/chapitre4/exemple2.html
Penchons-nous maintenant sur le code Javascript de cette page, en le décomposant :
1.2.1. Sélection du document
$
Le signe $ (dollar) indique que l’on est en train de faire du JQuery. $ est même la fonction principale de
JQuery. Une fonction étant un ensemble d’instructions que l’on peut appeler d’un coup, juste en utilisant
le nom de la fonction, $ en l’occurrence. Une fonction admet aussi des paramètres, qui seront spécifiés
entre parenthèses. Dans le cas général, l’ensemble d’instruction de la fonction aura accès à ces
paramètres. Ainsi, une même fonction peut être utilisée avec des paramètres différents : c’est tout
l’intérêt des fonctions.
$(document)
Ici, la fonction $ est utilisée avec la variable document, qui représente le document html.
Nous avons donc sélectionné le document.
Chapitre 4 : Javascript et jQuery
3 / 13
1.2.2. Gestion de l’événement ready
$(document).ready(
);
Juste après la sélection, on utilise le . (point) suivi d’une autre fonction. Cela va indiquer que la fonction
ready va s’appliquer à la sélection effectuée par la fonction $. Avec JQuery, on a la possibilité de chainer
ainsi les fonctions, à l’aide du . (point). La fonction ready permet de gérer l’événement de chargement
de la structure de la page. C’est une fonction, donc on lui adjoint des parenthèses afin de spécifier des
paramètres. Chaque ligne de javascript se termine par un ; (point-virgule).
$(document).ready(
function(){
}
);
Une fois le document ready, un ensemble d’instruction sera défini (la partie ‘action’) au sein d’une
fonction (une ensemble d’instruction, on l’a dit tout à l’heure), d’où la définition en ligne (cad sans lui
donner de nom) de la fonction à l’aide de la structure suivante : function(){ … }. Du point de vue de
la fonction ready, la fonction définie en ligne est un paramètre.
1.2.3. Action et affichage d’un message
Les possibilités d’action sont infinies. Dans cet exemple, nous affichons juste un message à l’aide de la
fonction alert :
$(document).ready(
function(){
alert("Document chargé");
}
);
La fonction alert admet un argument qui est une chaine de caractères, délimitée par des simples quotes
ou de doubles quotes (guillemets simples ou guillemets doubles). Nous reviendrons ultérieurement sur
les chaines de caractères.
Décembre 2014
1.3. Les sélections
Les sélecteurs CSS peuvent être utilisées pour sélectionner des éléments de la structure DOM :
Sélecteur CSS
Sélecteur jQuery
Signification
ul
$('ul')
Les balises <ul>
#main
$('#main')
Les balises dont l’id est main
.rouge
$('.rouge')
Les balises qui ont la classe rouge
ul.bleu
$('ul.bleu')
La balise <ul> de classe bleu
div ul
$('div ul')
La balise <ul> contenue dans la balise
<div>
[src]
$('[src]')
Les balises qui ont un attribut src
div>ul li[name="pair"]
$('div>ul li[name="pair"]')
La balise <li> contenue directement
dans une balise <ul>, elle-même
contenue dans une balise <div>, et
dont l'attribut name vaut pair
li[name]
$('li[name]')
Les balises <li> qui possèdent un
attribut name
li[rel="28"]
$('li[rel="28"]')
Les balises <li> qui possèdent un
attribut rel de valeur 28
*
$('*')
Toutes les balises du document
a, img
$('a, img')
Les liens et les images
La sélection JQuery va sélectionner un ensemble d’éléments, c’est-à-dire 0, 1 ou plusieurs éléments.
Nous allons pouvoir utiliser cet ensemble, soit pour y positionner un gestionnaire d’événement, soit pour
effectuer quelques modifications. Nous verrons seconde possibilité par la suite.
Nous allons tout d’abord revenir en détail sur les sélecteurs en JQuery.
Chapitre 4 : Javascript et jQuery
5 / 13
1.3.1. Sélecteurs d'attributs
Sélecteur
['nom*="valeur"']
Éléments sélectionnés
Éléments qui possèdent un attribut nom qui contient (partiellement ou totalement) la
valeur spécifiée.
['nom~="valeur"']
Éléments qui possèdent un attribut nom qui contient la valeur spécifiée, délimité par
des espaces.
['nom$="valeur"']
Éléments qui possèdent un attribut nom qui se termine par la valeur spécifiée.
['nom!="valeur"']
Éléments qui ne possèdent pas l'attribut nom, ou qui possèdent un attribut
nom différent de la valeur spécifiée.
['nom^="valeur"']
Éléments qui possèdent un attribut nom qui commence par la valeur spécifiée.
1.3.2. Sélecteurs hiérarchiques
Sélecteur
Éléments sélectionnés
('p > e')
Éléments e directement descendants d'éléments p
('p + e')
Éléments e directement précédés d'un élément p
('p ~ e')
Éléments e précédés d'un élément p
:empty
Éléments qui n'ont pas d'enfant
:first-child
Premier enfant
:first
Premier élément
:last-child
Dernier enfant
:last
Le dernier élément de la sélection
:nth-child()
Élément qui est l'énième enfant de son parent
:only-child
Éléments qui sont enfants uniques de leur parent
Décembre 2014
1.3.3. Pseudo-sélecteurs d'éléments
Sélecteur
:even
Éléments sélectionnés
Éléments pairs. Exemple :
tr:even
:odd
Éléments impairs
:eq()
Élément dont l'index est spécifié. Par exemple :eq(2) pour sélectionner le troisième élément.
:gt()
Éléments dont l'index est supérieur à (greater than) l'index spécifié
:lt()
Éléments dont l'index est inférieur à (lower than) l'index spécifié
1.3.4. Sélecteurs d'éléments particuliers
Sélecteur
Éléments sélectionnés
:header
Tous les titres <h1> à <h6>
:hidden
Éléments cachés
:visible
Éléments visibles
:not()
Éléments qui ne correspondent pas au sélecteur spécifié
Chapitre 4 : Javascript et jQuery
7 / 13
1.3.5. Pseudo-sélecteurs spécifiques aux formulaires
Pseudo-sélecteur
Éléments sélectionnés
:input
Tous les éléments de type input, textarea, select et button
:button
Éléments de type button
:checkbox
Éléments de type checkbox
:checked
Éléments qui sont cochés
:radio
Éléments de type radio
:reset
Éléments de type reset
:image
Tous les boutons de type image
:submit
Éléments de type submit
:text
Éléments de type text
:password
Éléments de type password
:selected
Éléments sélectionnés
:focus
Sélectionne l'élément s'il a le focus
:enabled
Éléments validés
1.3.6. Sélecteurs utilisés en cas de résultats multiples
Pseudo-sélecteur
Éléments sélectionnés
:first
Premier élément
:last
Dernier élément
:eq()
Élément dont l'index est spécifié
:gt()
Éléments dont l'index est supérieur à l'index spécifié
:lt()
Éléments dont l'index est inférieur à l'index spécifié
:even
Éléments d'index pair
:odd
Éléments d'index impair
:empty
Éléments qui n'ont pas d'enfant
:not()
Éléments qui ne correspondent pas au sélecteur spécifié. Par exemple :
a :not(.selected)
Décembre 2014
1.4. Les actions
Une fois un ensemble d’éléments sélectionné, il est possible soit de gérer les événements liés à ces éléments,
soit d’y effectuer quelques modifications :
Expression JQuery
Description
$("a").addClass ("toto") ;
Ajouter la classe toto aux balises a
$("a").removeClass ("toto") ;
Retirer la classe toto aux balises a
$("a").toggleClass ("toto") ;
Ajoute la classe si elle n’était pas présente, et vice-versa.
$("a").css ("color","#ff0000") ;
Modifie une propriété CSS
$("a").attr ("href","page2.html") ;
Modifie ou crée l’attribut href
$("a").removeAttr ("href") ;
Supprime l’attribut href
$("a").text ("bonjour") ;
Modifie le texte contenu dans les balises
$("a").html ("salut <b>mec</b>") ;
Modifier le contenu par du html
$("a").val ("bonjour") ;
Modifie la valeur d’un input de formulaire
$("a").show () ;
Affiche les éléments
$("a").hide () ;
Cache les éléments
$("a").toggle () ;
Affiche si les éléments sont cachés, et vice-versa.
$("a").slideDown () ;
Affiche les éléments en les déroulant.
$("a").slideUp () ;
Cache les éléments en les enroulant.
$("a").slideToggle () ;
Affiche les éléments en les déroulant si ils sont cachés, et vice-versa.
$("a").fadeIn () ;
Affiche les éléments par progression de la transparence.
$("a").fadeOut () ;
Cache les éléments par progression de la transparence.
$("a").fadeToggle () ;
Affiche les éléments par progression de la transparence si ils sont
cachés et vice-versa.
Il y a d’autres effets, plus ou moins évolués, mais ceux-ci seront suffisants pour NFA074. Certains effets acceptent
des paramètres qui sont détaillés sur le site jquery.com.
Chapitre 4 : Javascript et jQuery
9 / 13
1.5. Les événements
Nous connaissons déjà l’événement ready qui a la particularité de s’appliquer à $(document). La plupart des
autres événements s’appliquent à des éléments issus d’une sélection. Il y a trois types d’événements, ceux
déclenchés par la souris (le clic, le double clic, l’appuie sur le bouton, le déplacement, …), ceux déclenchés par
le clavier (appuie / relâche d’une touche), et ceux liés aux formulaires (validation, modification, focus, …)
1.5.1. Evénements souris
Action
Fonction
Clic
click()
Double-clic
dblclick()
Passage de la souris
hover()
Rentrer dans un élément
mouseenter()
Quitter un élément
mouseleave()
Presser un bouton de la souris
mousedown()
Relâcher un bouton de la souris
mouseup()
Scroller (utiliser la roulette)
scroll()
L’exemple suivant décrit la gestion du clic sur les images de la page :
$("img").click(function(){
});
Comme nous l’avons expliqué précédemment, la sélection des images ne peut se faire qu’une fois la
structure de la page chargée. Ainsi, nous allons placer ce code à l’intérieur du gestionnaire de ready :
$(document).ready(function(){
$("img").click(function(){
});
});
Dans le gestionnaire de clic, il est possible d’afficher un message, comme le ferait l’exemple suivant :
$(document).ready(function(){
$("img").click(function(){
alert("quelqu’un a cliqué sur une image");
});
});
Il est aussi possible de sélectionner des éléments et d’appliquer des effets dessus :
$(document).ready(function(){
$("img").click(function(){
$(".message").show();
});
});
Ou même d’appliquer plusieurs effets en les chainant à l’aide du . (point) :
Décembre 2014
$(document).ready(function(){
$("img").click(function(){
$(".message").text("quelqu’un a cliqué sur une image").show();
});
});
Exercice 2 :
Ecrivez une page contenant une image, et un textarea. En vous appuyant sur l’exemple ci-dessus,
adaptez le contenu du div en fonction du clic sur l’un ou l’autre des deux éléments.
Exercice 3 :
Ecrivez une page contenant deux images. Quand l’utilisateur clique sur une image, celle-ci disparait et
l’autre apparait.
1.5.1.1.
preventDefault
Les événements sont répercutés automatiquement. Par exemple, si vous cliquez sur une case d’un
tableau, les événements suivants sont déclenchés de fils en père :
- Evénement du clic sur la case du tableau (td),
- Evénement du clic sur la ligne du tableau (tr)
- Evénement du clic sur le tableau (table)
- Evénement du clic sur le div qui contient le tableau
- …
- Evénement du clic sur le document
Pour éviter ceci, il convient de bloquer cette répercussion en appliquant la fonction preventDefault() à
l’événement qui est un paramètre de toutes ces fonctions. Voici un petit exemple :
$(document).ready(function(){
$("td").click(function(e){
return e.preventDefault()
});
});
Dans cette exemple, on utiliser le mot-clé return qui permet en outre de modifier le comportement du
clic (ou annulerait le comportement par défaut lors du clic sur un lien par exemple)
1.5.1.2.
this
Dans la fonction de gestion des événements, nous avons la possibilité de considérer directement
l’élément sur lequel l’action a été déclenchée à l’aide de $(this), comme le montre l’exemple suivant,
qui modifie uniquement le style de l’image sur laquelle on a cliqué :
$(document).ready(function(){
$("img").click(function(){
$(this).css("border","3px solid #ff0000");
});
});
Cet exemple est en fait l’exemple 1, présenté au tout début de ce chapitre.
Chapitre 4 : Javascript et jQuery
11 / 13
1.5.2. Evénements clavier
Action
Fonction
une touche du clavier est enfoncée
keydown()
une touche du clavier est maintenue enfoncée
keypress()
une touche du clavier est relâchée
keyup()
Dans le cas des événements clavier, le code de la touche en question est disponible en tant que paramètre de
la fonction définie en ligne.
Exemple :
$("header").keyup(function(touche){
// on affiche une première alertes
alert("Vous venez d'appuyer sur la touche Entrée !");
/* ainsi qu’une seconde
alerte avec le numéro de touche */
alert(touche);
});
L’exemple ci-dessus illustre définition d’une fonction en ligne contenant un paramètre (touche) ainsi que le
fonctionnement des commentaires en javascript. Le double slash (//) pour commenter la suite de la ligne, ou le
commentaire avec début (/*) et fin (*/).
Evénements formulaire
Action
Fonction
Focalisation
focus()
Sélection (p.e. dans une liste)
select()
Changement de valeur
change()
Envoi du formulaire
submit()
Exercice 4 :
Reprenez l’exercice ci-dessus avec un div et un formulaire. Si l’on clique que le div, il disparait et le
formulaire apparait. Lors du clic sur le bouton de validation du formulaire, ce formulaire s’efface et le
div s’affiche.
Décembre 2014
1.6. Exercices
Exercice 5 : Créez un texte qui s'agrandit au clic. Si on reclique dessus, il reprend sa taille d'origine.
Exercice 6 : Créez une page contenant plusieurs paragraphes, lors du clic sur un paragraphe, il se met en
gras.
Exercice 7 : Créez 5 boutons et un rectangle. Chaque bouton provoque une action sur le rectangle :
-
Bouton 1 : règle la hauteur du rectangle à 500px
Bouton 2 : met le rectangle en vert
Bouton 3 : remet les couleurs initiales
Bouton 4 : fait disparaître le rectangle
Bouton 5 : fait réapparaître le rectangle
Exercice 8 : Reprenez l’exemple 1 pour que seule l’image sur laquelle on vient de cliquer soit affublée d’une
bordure.
Exercice 9 : Créer un rollover sur une image en la remplaçant par une autre image.
Exercice 10 : Créer un rollover sur du texte ; lors du passage de la souris, le texte est modifié.
Exercice 11 : Créer un effet sur un texte :
 Il s'affiche en gras en cas de clic
 Il s'affiche en italique en cas de double-clic
Exercice 12 : Créer une page web comportant une phrase, dont un groupe de mots, de couleur noire au
chargement, doit prendre la couleur :
 rouge (#ff0000) au passage de la souris ;
 vert (#009900) en réponse à un click ;
 bleu (#0000ff) en réponse à un double click.
Exercice 13 : Créer une page web constituée d'un court paragraphe (quelques lignes), d'une largeur de 500
pixels. En cliquant sur ce paragraphe, il doit s'afficher grosso-modo au centre de la page, avec un mot par ligne.
Le double click doit permettre de revenir au format initial (aligné à gauche, occupant une largeur de 500 pixels).
Exercice 14: Créer un rollover sur du texte ; lors du passage de la souris, le texte subira les changements
suivants :
 police Verdana ;
 un trait en travers des lettres (line-through) ;
 une multiplication par 2 de la hauteur des lignes ;
 une multiplication par 1,5 de la taille des caractères par rapport à la taille par défaut ;
 une capitalisation des premières lettres des mots.
Exercice 15 : Créer un menu horizontal avec un effet rollover en javascript.
Exercice 16 : Créer un boite dont seule la première ligne s'affiche et mais qui s'agrandit à 300px de haut si l'on
double clic sur le titre.
Exercice 17 : Créer deux boites :
 La seconde ne s'affiche pas.
 La première est le titre, si l'on double clic dessus, la seconde boite s'affiche.
 Lors du clic sur la seconde boite, elle disparait.
Exercice 18 : Créer une pop-in qui s'ouvre lors d'un clic sur un lien.
Chapitre 4 : Javascript et jQuery
13 / 13