Conception d'un site web - NFA074, 6 ECTS - Javascript / jQuery - Index of
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
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 Champagne-
Ardenne.
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 2015
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 :
alert("hello world");
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.
Dans les deux cas, le script sera alors exécuté par votre 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 aurons
peut-être l’occasion d’en tester une.
Chapitre 4 : Javascript et jQuery 1 / 46
1. Sélection et actions
Avant d’entrer dans le cœur du cours de JQuery/javascript, nous allons procéder à quelques opérations
basiques.
On peut décomposer l’action minimale JQuery de la manière suivante :
Sélection . Action
d'éléments
C’est le schéma qui sera utilisé pour cette première partie :
- Sélection d’éléments : 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
- Action : Des actions on faites sur la sélection. Il peut s’agir de modifier la structure DOM, ou
d’intervenir sur les styles, les contenus et les attributs des éléments qui ont déclenchés l’action.
Ce schéma sera complété par la suite.
Voici quelques exemples de ce qu’il sera est possible de faire :
- Changer la couleur des liens.
- Valide un formulaire.
- Faire disparaitre un titre.
- Modifier la valeur d’un champ de formulaire
- Récupérer la valeur d’un champ de formulaire et l’utiliser pour modifier le contenu d’un bloc.
- Modifier la source d’une image
- Compter le nombre d’image dans une page
Pour ce chapitre, nous allons utiliser l’interface spécialement développée pour ce cours :
http://www.action-creation.fr/cnam/nfa074/chapitre4/jqueryLab/
Décembre 2015Sur cette interface, vous avez la possibilité de sélectionner les exercices et leur correction dans le menu
déroulant du haut. Apparaissent alors 3 panneaux d’édition et une fenêtre de résultat !
- Le code HTML sur la gauche, que vous n’avez pas le modifier.
- Au centre, le code Javascript / Jquery qui sera déclenché immédiatement après le chargement
de la page
- Le code CSS en bas
- Le résultat sur le panneau de droite, qui est mis à jour après l’utilisation d’un bouton « Run
Code »
Dans cette partie, le code JQuery sera exécuté soit dès le chargement de la page (Run Code Start) soit
lors du clic sur le bouton Go (Run Code Button). Dans la suite du cours, on pourra le déclencher à façon,
lors d’un clic, ou au bout d’un certain temps par exemple.
Chapitre 4 : Javascript et jQuery 3 / 46Lab 1
- Sélectionner l’exercice 1.
- Appuyer sur l’un puis l’autre des bourrons « Run Code » pour mettre à jour le résultat dans les
deux modes.
- Modifier le CSS pour que le texte s’affiche en bleu
- Appuyer sur « Run Code » pour mettre à jour le résultat. Vous le ferez à chaque fois que
nécessaire.
- Créez une class redbeans qui permet d’afficher le texte en rouge
- Nous allons maintenant sélectionner tous les h1 de la page pour leur ajouter la classe redbeans :
Sélection des h1 Ajout de la class
.
$("h1") addClass("redbeans");
- Quelques explications :
$
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 nommé d’opérations que l’on peut appeler d’un coup, juste en
utilisant le nom de la fonction, $ dans notre cas. Une fonction admet aussi des paramètres, qui seront
spécifiés entre parenthèses et qui permettent d’adapter l’action de la fonction. Ainsi, une même fonction
peut être utilisée avec des paramètres différents : c’est tout l’intérêt des fonctions.
$("h1")
Ici, la fonction $ est utilisée avec la chaine de caractères h1 comme paramètre. C’est l’une des
utilisations de la fonction $ : on lui donne une un sélecteur du même genre que l’on utilise en CSS.
Dans le cas actuel, nous avons donc sélectionné l’ensemble des éléments e type h1 contenus dans
notre document.
$("h1").
Juste après la sélection, on utilise le . (point) suivi d’une autre fonction. Cela va indiquer que la seconde
fonction 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).
$("h1").addClass("redbeans");
La fonction addClass permet d’ajouter une class aux éléments de la sélection. C’est une fonction, donc
on lui adjoint des parenthèses afin de spécifier des paramètres. En l’occurrence, une chaine de caractère
contenant la class à ajouter. On pourrait même ajouter plusieurs classes : addClass("classe1 classe2");
Chaque ligne de javascript se termine par un ; (point-virgule).
Décembre 2015- Ajoutons une ligne au bloc JS :
$("h1").html("Nouveau titre");
- La fonction html permet de modifier le contenu des éléments. La chaine de caractère indiquée en
paramètre peut être du html, avec des balises.
$("h1").html("Nouveau titre");
- Charger la correction de l’exercice 1 dans la rubrique « choix de l’exercice » et testez-la.
- Une ligne est ajoutée dans la partie js. Il s’agit d’un commentaire car elle débute par deux slashs
(ou barre oblique en bon français). Cette ligne ne sera pas interprétée par votre navigateur et
les instructions qu’elle contient ne seront pas exécutées.
- Décommenttez cette ligne (en retirant les slashs) et commentez les deux premières lignes.
- On remarque que le résultat est le même avec une seule ligne. En effet, nous avons indiqué que
JQuery permet de chainer les actions, ce qui est assez pratique.
Lab 2
- A l’aide de la fonction removeClass (qui a la même syntaxe que addClass), vous pouvez supprimer
une class des éléments de la sélection
- Pour sélectionner uniquement les éléments qui portent la classe blueberry, on utilise le sélecteur
.blueberry de cette manière : $(".blueberry")
- On peut même choisir uniquement les h1 qui portent la classe blueberry : $("h1.blueberry"). Cela
fonctionne comme en CSS, c’est souple et efficace
- Chargez l’exercice 2
- Retirez la classe impaire des élements qui la portent.
- La première correction ne porte que jusqu’à cette partie.
- Modifier la solution pour retirer la classe impaire des élements qui la portent et l’ajouter aux
éléments qui ne la portent pas.
- En mode « Button », vous pouvez même le lancer plusieurs fois
Chapitre 4 : Javascript et jQuery 5 / 46Lab 3
Pour ce troisième lab, nous allons modifier les styles des éléments sélectionnés. Pour accéder aux
propriétés CSS en JQuery, on applique la fonction css à la sélection : $("h1").css(…);
Bien sûr, la fonction CSS admet des paramètres : les propriétés CSS que l’on veut voir appliquer à la
sélection.
- Appel avec une seule règle :
$("h1").css({"color" :"red"});
- Appel avec plusieurs règles :
$("h1").css({"color":"red","text-decoration":"none"});
Le paramètre de la fonction est un tableau associatif qui associe une valeur (qui est la valeur de la
propriété CSS : red, none) à une clé (qui est le nom de la propriété CSS : color, text-declaration).
Chaque clé ou valeur étant une chaine de caractère, on utilise une simple ou double quote pour en
marquer le début et la fin. Le caractère : (deux points) permet de séparer la clé de la valeur. La
virgule permet.
Lab 4
Il y a 3 manières d’ajouter un élément dans une page. Avant la sélection, après la sélection, Append
élément
- Après :
$( "h1" ).after("h2 après");
- Avant :
$( "h1" ).before("h2 avant");
- A l’intérieur (en dernier) :
$("h1").append(" dans h1 ");
- Avec la méthode after, proposer un formulaire (chaque ligne contient titre, nom, prénom)
auquel on peut ajouter une ligne en appuyant sur « GO »
- Question subsidiaire : après avoir ajouté une ligne dans le formulaire, la colorer en rouge (mais
juste elle, pas les autres). Cette coloration est retirée dès que l’on ajoute une nouvelle ligne.
Lab 5
Les fonctions show et hide permette de cacher ou de montrer la sélection.
- Pour cacher la sélection :
$("h1").hide();
- Pour afficher la sélection
$("h1").show();
Dans l’énoncé du lab 5, chacune de ces fonctions admet un paramètre. Il s’agit de la durée de
l’opération.
- Créez deux éléments, l’un est caché et l’autre est affiché. En JQuery, afficher progressivement
celui qui est caché et cacher instantanément celui qui est affiché.
- Essayer les fonctions suivantes : fadeIn, fadeOut, fadeToggle, slideUp, slideDown, slideToggle.
Décembre 20152. Sélection, événements et actions
Dans la suite de ce chapitre, nous allons nous projeter dans des cas concrets, sans utiliser le jqueryLab.
On peut décomposer le scénario le plus classique d’utilisation de JQuery de la manière suivante :
Sélection Gestion
. . Action
d'éléments d'événements
C’est le schéma qui sera utilisé dans la suite de ce cours :
- Sélection d’éléments : 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
- Gestion d’événements : Un événement est géré sur cette sélection. Il peut s’agir du clic, du
double clic, du survol à la souris, d’une modification, etc …
- Action : Si cet événement est déclenché, des actions auront lieu. Il peut s’agir de modifier la
structure DOM, ou d’intervenir sur les styles, les contenus et les attributs des éléments qui ont
déclenchés l’action.
Ce schéma sera complété par la suite.
Voici quelques exemples de ce qu’il sera est possible de faire :
- Quand je survole un lien, il change de couleur.
- Quand je clic que un bouton, je valide un formulaire.
- Quand je double-clic sur un titre, il disparait.
- Quand je modifie un champ de formulaire, le contenu d’un autre paragraphe est modifié.
- Quand je clic que un lien, une fenêtre modale s’ouvre.
Chapitre 4 : Javascript et jQuery 7 / 462.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 : Gestion de l’événement : Action :
. .
les images clic ajouter une bordure
Si l’on souhaite traduire ce schéma par une phrase, voici ce que cela donnerait :
Sur l’ensemble des images de ma page, je souhaite gérer l’événement « clic » et lorsque celui-ci est
déclenché, j’ajoute une bordure sur l’image qui fait l’objet de l’événement.
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
Voici le résultat si l’on clique sur l’image du milieu :
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 .
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.
Décembre 20152.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 –donc interprétées par votre navigateur-, 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 :
Gestion de l’événement :
Sélection :
ready sur cette sélection action :
du document (la
. (qui est déclenché quand . afficher un message
structure dom du
la structure est chargée (une alerte en javascript)
document)
par le navigateur)
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 :
2.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 nommé d’opérations que l’on peut appeler d’un coup, juste en
utilisant le nom de la fonction, $ dans notre cas. Une fonction admet aussi des paramètres, qui seront
spécifiés entre parenthèses. Dans le cas général, l’ensemble des instructions 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 HTML.
Chapitre 4 : Javascript et jQuery 9 / 462.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 : la fonction ready. 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.
2.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 20152.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
#main $('#main') Les balises dont l’id est main
.rouge $('.rouge') Les balises qui ont la classe rouge
ul.bleu $('ul.bleu') La balise de classe bleu
div ul $('div ul') La balise contenue dans la balise
[src] $('[src]') Les balises qui ont un attribut src
li[name] $('li[name]') Les balises qui possèdent un
attribut name
li[rel="28"] $('li[rel="28"]') Les balises qui possèdent un
attribut rel de valeur 28
* $('*') Toutes les balises du document
a, img $('a, img') Les liens et les images
div>ul li[name="pair"] $('div>ul li[name="pair"]') La balise contenue dans une
balise , elle-même contenue
directement dans une balise , et
dont l'attribut name vaut pair
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 11 / 462.3.1. Sélecteurs d'attributs
Sélecteur Éléments sélectionnés
['nom="valeur"'] Éléments qui possèdent un attribut nom dont la valeur est exactement la valeur
spécifiée.
['nom*="valeur"'] É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,
potentiellement 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.
2.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 20152.3.3. Pseudo-sélecteurs d'éléments
Sélecteur Éléments sélectionnés
:even É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é : gt(8) par exemple
:lt() Éléments dont l'index est inférieur à (lower than) l'index spécifié
2.3.4. Sélecteurs d'éléments particuliers
Sélecteur Éléments sélectionnés
:header Tous les titres à
:hidden Les é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 13 / 462.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
2.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 20152.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 mec") ; 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 présentés ci-dessus 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 15 / 462.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, …)
2.5.1. Evénements souris
Action Fonction
Clic click()
Double-clic dblclick()
Passage de la souris hover()
Mouvement dans l’élément mouseover()
Quitter l’élément mouseout()
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();
});
Décembre 2015});
Ou même d’appliquer plusieurs effets en les chainant à l’aide du . (point) :
$(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.
Chapitre 4 : Javascript et jQuery 17 / 462.5.2. La variable événement
L'objet événement est disponible à chaque déclenchement d'un événement. C'est le premier paramètre
disponible dans la fonction de gestion de l'événement, c'est pourquoi cette variable (e dans l’exemple
ci-dessus) est présente dans les parenthèses lors de la définition en ligne de la fonction.
$(document).ready(function(){
$("td").click(function(e){
// ici, on va pouvoir manipuler la variable événement
});
});
On va pouvoir utiliser cette variable événement afin de contrôler l’événement :
2.5.2.1. Prevent Default
Pour un clic sur un lien, par exemple, le clic permet de changer de page et de rediriger l’internaute vers
l’url spécifiée par l’attribut href. C'est ce que JQuery appelle le comportement par défaut.
Si l'on veut ne pas déclencher cet événement par défaut, il suffit d'ajouter la ligne suivante à la fin1 du
gestionnaire d'événement :
return e.preventDefault();
Afin d’illustrer le comportement par défaut, lors du clic, le message s’affiche et l’internaute est redirigé
vers une autre page (cette indiquée par l’attribut href) :
clic me
$(document).ready(function(){
$("a").click(function(e){
alert("Vous avez cliqué sur un lien, à bientôt");
});
});
En utilisant le preventDefault, l’action par défaut n’a pas lieu :
clic me
$(document).ready(function(){
$("a").click(function(e){
alert("Vous avez cliqué sur un lien, mais vous resterez ici");
return e.preventDefault();
});
});
La page suivante permet de tester ce comportement :
http://www.action-creation.fr/cnam/nfa074/chapitre4/exemple3.html
1
Le mot-clé return est à placer à la fin de la définition de la fonction. En effet, il permet à la fonction de
se terminer en envoyant une valeur au gestionnaire d’événement afin que ce dernier sache de ne pas
déclencher le comportement par défaut.
Décembre 20152.5.2.2. Stop propagation
Un événement se propage automatiquement. Par exemple, si vous entrez le curseur de la souris dans
une case d’un tableau, les événements suivants sont déclenchés de fils en père :
- Evénement mouseover sur la case du tableau (td),
- Evénement mouseover sur la ligne du tableau (tr)
- Evénement mouseover sur le tableau (table)
- Evénement mouseover sur le div qui contient le tableau
- …
- Evénement mouseover sur le document
Pour éviter ceci, il convient de bloquer cette répercussion en appliquant la fonction stopPropagation()
à l’événement. Ceci peut être fait en début de fonction, le plus top étant le mieux. Voici un petit
exemple :
$(document).ready(function(){
$("td").mouseover(function(e){
e.stopPropagation();
});
});
La page suivante permet de tester ce comportement avec des divs imbriqués :
http://www.action-creation.fr/cnam/nfa074/chapitre4/exemple4.html
Dans cet exemple, tous les blocs propagent le mouseover sauf le bloc noir. A chaque mouseover
déclenché, un message donne la classe du bloc. Vous pouvez fermer ce message sans bouger la souris,
en actionnant la touche « entrée ».
2.5.2.3. 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 19 / 462.5.3. 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 20152.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 21 / 463. Variables, chaines de caractère, et structures de
sélections
3.1. Les variables
Une variable est un élément primordial en Javascript, comme dans tous les langages. Une variable permet
de conserver des données au cours de l’exécution et donc des différentes lignes de Javascript. Une
variable peut être un nombre entier ou flottant (avec virgule), un tableau, un caractère, une fonction
(comme on a pu en définir en ligne précédemment) ou même une chaine de caractère (nous en avons
manipulé dans la partie précédente). Voici un exemple de variable de type chaine de caractère :
var maVariable = ".normal" ;
Nous avons donc créé une variable du nom de maVariable à l’aide du mot clé var. Nous avons aussi
affecté une valeur à cette variable à l’aide de l’opérateur = (égal). Dans cet exemple, la valeur de la
variable est .normale . Une fois crée, la variable peut être utilisée, comme paramètre dans la fonction
JQuery par exemple :
$(maVariable).show() ;
Précisons que le nom d’une variable est sensible à la casse (a n’est pas pareil que A), et ne peux contenir
que les lettres, des chiffres et des soulignés (_). Notons aussi qu’il est possible de déclarer une variable
sans lui donner de valeur (sans l’initialiser, ou sans la définir dirait-on) :
var maVariable2 ;
En cas d’utilisation d’une variable avant qu’elle soit
définie, elle aura la valeur undefined :
alert(maVariable2)
A tout moment, on peut modifier la valeur d’une variable, et même en changer le type :
var maVariable3 = "Bonjour " ;
maVariable3 = 25 ;
La fonction typeof() permet de connaitre le type
d’une variable
alert( typeof( maVariable3 ) );
Décembre 2015Nous devons nous rappeler que, contrairement à nous, l’ordinateur ne connaît que deux valeurs : 0 et
1. Un ordinateur ne compte qu’en binaire car chaque information est représentée par la présence (1) ou
l’absence (0) d’un courant électrique dans un de ses circuits électroniques.
Nous avons beaucoup plus de chance que lui car nous avons dix doigts ce qui nous permet de compter
en base 10, c’est à dire en utilisant 10 chiffres et non 2. De plus, nous sommes en mesure de manipuler
plusieurs types de valeurs, par exemple des lettres de l’alphabet, des couleurs, des notes de musique,
etc.
Notre ordinateur doit pour sa part associer une suite de chiffres binaires à toute information.
En réalité, le type associé à une information permet à l’ordinateur de nous la restituer dans une forme
plus naturelle pour nous. Par exemple la suite composée de 8 bits à 1, suivie de 16 bits à 0
(111111110000000000000000 soit FF0000 en hexadécimal) correspond à la couleur rouge dans le
modèle RGB utilisé par HTML et à la valeur entière 16711680 (255*16*16*16*16). Donc, en plus de la
valeur binaire, il nous faut mémoriser son type pour être en mesure de réaliser une interprétation
correcte de l’information. Heureusement pour nous, c’est l’ordinateur qui se chargera de faire toute les
conversions utiles.
3.2. Les chaines de caractères
Une variable est de type String si elle contient une chaine de 0 à un nombre infini de caractères.
On déclare et définit des chaines de caractères comme ceci, la première version étant la plus
conventionnelle :
var chaineOne = new String("Ma chaine contient des choses");
chaineTwo = 'hé hé, ho ho !';
chaineTwo = 'vive l\'eau';
chaineTwo = "";
On notera l’utilisation des guillemets doubles ou simple en début et en fin de chaine. On notera
aussi l’utilisation du backslash pour définir des caractères spéciaux. En voici quelques-uns :
Caractère spéciale Signification
\n Saut de ligne
\' Guillemets simple
\" Guillemets doubles
\\ Backslash
On peut aussi concaténer (mettre les unes au bout des autres) des chaines à l’aide de
l’opérateur + (plus).
m = "Allez"+" l'OM";
n = m + ", oh ! oh ! oh !";
L’attribut length permet de connaitre la longueur d’une chaine de caractère
alert(m.length) ;
Certaines fonctions JQuery permettent de récupérer des chaines :
Fonction Exemple Description
.val() laVal = $("#input).val(); Récupère la valeur d’un input de
formulaire.
Chapitre 4 : Javascript et jQuery 23 / 46.attr() leLien = $("a#one).attr("href"); Récupère la valeur de l’attribut de
l’élément.
.html() contenu = $("div#t2).html() ; Récupère le contenu HTML d’un élément
(avec les balises donc)
.text() $("div#t2).text() ; Récupère le contenu texte d’un élément
(sans les balises donc)
Ces fonctions permettent de lire (récupérer) des chaines si elles sont utilisées comme décrit
ci-dessus. Utilisées autrement (avec un paramètre supplémentaire), elles permettent de
modifier (écrire) ces valeurs. On notera que pour lire une valeur, il faut nécessairement que la
sélection JQuery ne considère qu’un seul élément (ce qui n’est pas le cas pour une écriture).
Petit exemple d’utilisation :
clic me
$(document).ready(function(){
$("a").click(function(e){
// affichage du lien
contenuLien = $(this).text();
alert("Vous avez cliqué sur "+contenuLien);
// modification du lien avec du code html
$(this).html("clic encore !");
});
});
Exercice 19 : Ecrivez un album photo. Les photos sont toutes en miniature à gauche. La photo
sélectionnée au clic apparait en grand sur la droite. Pour trouver le nom de la grande image, il
suffit d’ajouter la chaine "big_" au début du nom de la petite image.
Exercice 20 : Reprenez l’exercice précédent, mais en replaçant les miniatures par des liens.
Exercice 21 : Ecrivez un formulaire avec deux input texte et un sélect. Lors de la validation,
une phrase est générée en intégrant les 3 champs de formulaire.
Exercice 22 : Créez un formulaire avec 3 boutons. Les deux premiers ajoutent une phrase
type à un div, le troisième ajoute une phrase récupérer dans un input du même formulaire.
La fonction replace s’applique à une chaine pour remplacer toutes les occurrences d’une sous-
chaine par une autre. Ces deux sous-chaines étant passées en paramètre. Exemple :
var str = "Allez Reims!";
var res = str.replace("Reims", "Sedan");
alert(res);
Décembre 20153.3. Les nombres
Une variable est de type Number si elle contient une valeur numérique, entière ou flottante
(avec une virgule, enfin un point chez les anglo-saxons). On déclare et définit des chaines de
caractères comme ceci, la première version étant la plus conventionnelle :
var test = new Number(123);
testTwo = -425;
test3 = 25.89;
Les opérations standard sont disponibles en Javascript. Le tableau suivant détaille ces
opérations :
Opération Exemple Description
+ x = 12 + 8 ; Addition
- x = x – 1; Soustraction
* y = x * x * 3.14; Multiplication
/ z = 8 / 12; Division
% re = y % 2; Le modulo calcule le reste de la division entière
Si vous avez bien suivi, l’opérateur + (plus) est utilisé pour la concaténation des chaine ainsi que pour
l’addition de nombres. Il est donc important de savoir ce que vous souhaitez faire. Si le nombre est récupéré
dans un champ de formulaire, il sera considéré comme une chaine, et vous devrez le transformer en nombre
manuellement. Si vous souhaitez concaténer deux nombres, vous devrez les transformer en chaines :
Concaténation entre une chaine et un entier (transformé implicitement en chaine)
var age2020 = $("#age2014").val() + 6 ;
Addition car la chaine est transformée (le mot adapté est castée) en nombre
var age2020 = Number( $("#age2014").val() ) + 6 ;
heure = 10 ;
minute = 30 ;
heureMinute = heure+minute ; // la variable vaut 40 !
heureMinute = String(heure)+String(minute) ; // la variable vaut 1030
Chapitre 4 : Javascript et jQuery 25 / 46Pour certains exercices, nous aurons besoin de générer des nombres de manière aléatoire, à l’aide de la
fonction Math.random(). Il s’agit en fait de la fonction random() de l’objet Math, mais peu importe. Cette
fonction ne prend pas de paramètre et retourne une valeur flottante entre 0 (inclus) et 1 (exclu).
En complément, la fonction Math.floor(val) renvoie la partie entière d’un flottant passé en paramètre.
Illustration :
alert( Math.random()*12 ); // valeur flottante entre 0 (inclus) et 12 (exclu)
alert(Math.floor( Math.random()*12) ) ; // valeur entière de 0 à 11
Exercice 23 : Créer un formulaire avec deux champs et 5 boutons (un par opération). Lors de
l’utilisation des boutons, le résultat du calcul s’affiche dans un div dédié.
A. Ajoutez ensuite un bouton pour inverser les valeurs des deux champs.
B. Ajouter ensuite un bouton pour calculer la moyenne des deux champs.
Exercice 24 : Créer une page web permettant de générer un nombre aléatoire entre deux
valeurs entrés dans deux inputs d’un formulaire.
Comme dans d’autres langages, il existe des opérateurs spécifiques permettant de gagner du
temps :
Opérateur Exemple Equivalent
+= i+=2; i = i+2;
-= i-=2; i = i-2;
*= i*=2; i = i*2;
/= i/=2; i = i / 2;
%= i%=2; i = i % 2;
++ i++; i += 1;
-- i--; i -= 1;
Décembre 20153.4. Les booléens
Une variable de type booléen a deux valeurs possibles : vrai (ou 1) et faux (ou 0).
On déclare et définit des booléens comme ceci, la première version étant la plus
conventionnelle :
var condition = new Boolean(true);
condition = new Boolean(0); // false !
condition2 = true;
Bien sûr, la valeur d’un booléen peut se calculer à l’aide de tests, afin de comparer les valeurs
de variables. Dans le tableau d’explication suivant, on considère que x est un entier qui vaut 5
var x = 5;
Opérateur Description Exemple Valeur
x == 5 vrai
== Valeur égale x == 8 faux
x == "5" vrai *
!= Valeur différente x != 8 vrai
x != 5 faux
x != "5" faux *
< inférieur x supérieur x>8 faux
= 6 faux
* Comme vous pouvez le remarquer Javascript est assez permissif quand il compare car il se
limite aux valeurs. Si l’on souhaite être plus stricte, on va pouvoir comparer à la fois la valeur
et le type, en ajoutant un = (égal) supplémentaire, comme le montre le tableau suivant.
Opérateur Description Exemple Valeur
=== Egalité en valeur et en type x === 5 vrai
x === "5" faux
!== Différence de valeur ou de type x !== 5 faux
x !== "5" vrai
x !== 5 vrai
Chapitre 4 : Javascript et jQuery 27 / 46De plus, on peut combiner des valeurs booléennes à l’aide d’opérateurs logiques. Dans le
tableau d’explication suivant, on considère que x et y sont des entiers qui valent 5 et 3.
var x = 5;
var y = 3 ;
Opérateur Description Example Valeur
&& et logique (x1) Vrai
|| ou logique (x==6 || y==6) faux
! négation !(x==y) vrai
Pour combiner des booléens, on utilisera les parenthèses afin de ne pas rendre l’évaluation
ambiguë.
var r = (a || b) && !(c || d) ;
Décembre 20153.5. Structures de sélection
Une première utilisation concrète des booléens se trouve avec la structure de sélection si / if.
Elle permet d’effectuer un ensemble d’instruction uniquement si la condition est vraie :
if (condition) {
/* Bloc d’instructions effectuées uniquement
si la variable condition est vraie */
}
Nous pouvons décrire le comportement quand une structure de sélection if est rencontrée par
la figure suivante :
Evaluation de la condition
Vrai Faux
ne
action 1
action 2
rien
…
faire
action 99
suite des actions
Plusieurs remarques s’imposent :
1. La condition doit être de type booléen, c’est à dire n’admettre que deux valeurs
possibles : vrai ou faux.
2. La condition peut prendre, par exemple, la forme d’une comparaison de deux
expressions arithmétiques. Nous pourrons comparer la valeur d’une variable t
avec la valeur 100 en nous assurant que ces deux expressions sont de même
type.
3. Si l’évaluation est toujours fausse (1>2 par exemple), le bloc d’actions ne sera
jamais exécuté.
4. L’objectif de la structure de sélection est d’autoriser un comportement différent
de l’algorithme en fonction des valeurs des variables.
Exercice 25 : Reprenez l’exercice précédent en ajoutant un affichage spécifique si la valeur
aléatoire est plus grande que la valeur contenue dans un troisième input.
Chapitre 4 : Javascript et jQuery 29 / 46La version complète de la structure de sélection si admet aussi un sinon. Si la condition est
vraie une section de code est exécutée, sinon, une autre section est effectuée :
if (condition){
/* Bloc d’instructions effectuées uniquement
si la variable condition est vraie */
} else {
/* Bloc d’instructions effectuées uniquement
si la variable condition est false */
}
Nous pouvons décrire le comportement quand une structure de sélection if/else est rencontrée
par la figure suivante :
Evaluation de la condition
Vrai Faux
action 101
action 1
action 102
action 2
…
…
action 155
action 99
suite des actions
A titre d’exemple, on peut vouloir déterminer le plus grande de deux valeurs :
if(va>100){
alert("La valeur a est plus grande que 100");
} else {
alert("La valeur a est plus petite ou égale à 100");
}
Exercice 26 : Reprenez l’exercice 21 en ajoutant un champ select proposant deux choix. En
fonction de la valeur du sélect, le message est différent.
Décembre 2015Pour être tout à fait complet, il est possible de chainer plusieurs structures de sélection if/else
afin de gérer des conditions multiples, comme le montre l’exemple ci-dessous :
var rr= Math.random()*10;
if( rr < 1 ){
$("#message").text("C’est un très petit tirage");
} else if( rr < 5 ){
$("#message").text("C’est plus petit que la moyenne");
} else if( rr == 5 ){
$("#message").text("Bravo, c’est pile la valeur médiane");
} else if( rr < 9 ){
$("#message").text("C’est plus grand que la moyenne");
} else {
$("#message").text("C’est vraiment trop grand");
}
Exercice 27 : Calcul du maximum de 3 valeurs
Ecrire les instructions javascript pour :
• lire trois entiers dans 3 champs de formulaire ;
• lors du clic, et si les champs sont remplis, détermine le plus grand des trois (plusieurs
solutions possibles) ;
• change le style du plus grand champ
Exercice 28 : Comparaison de deux dates
Créer un formulaire pour définir 2 dates (définies par 3 entiers : jour, mois et année), puis
affiche l’un (un seul) des 3 messages suivants lors du clic :
• la première date est antérieure à la deuxième
• la première date est postérieure à la deuxième
• la première date est égale à la deuxième
Exercice 29 : Différence entre deux dates
Reprendre l’exercice précédent et dans le premier cas, calculer la différence entre la première
et la seconde date.
On considérera qu’un mois comporte systématiquement 30 jours.
Chapitre 4 : Javascript et jQuery 31 / 46Exercice 30 : Transport de marchandises
L’objectif de cet exercice est de calculer le coût du transport d’une marchandise en fonction de
son poids et de son volume.
Question 1 : Calcul du prix
Une marchandise peut être expédiée par avion (coût : 10 euro/kg), par bateau (coût : 6
euro/m3), ou par train (coût : 3 euro/kg + 2 euro/m3).
Proposez un formulaire avec un bouton qui permet de calculer le prix à payer pour un colis
dont le poids, le volume et le mode de transport sont saisis.
Question 2 : Calcul du mode de transport
Le choix du mode de transport peut maintenant être multiple (en fonction du trajet, certains
sont disponibles et d’autres non). Ainsi, nous avons les choix complémentaires suivants :
• Avion ou bateau ;
• Avion ou train ;
• Avion, bateau ou train.
Modifiez le formulaire pour proposer, en fonction des modes de transports disponibles le moyen
de transport dont le coût est le moins élevé.
Exercice 31 : Le but de cet exercice est de deviner un nombre.
1. Une valeur entière aléatoire est déterminée entre 0 et 1000 et conservée dans une
variable.
2. L’utilisateur propose une valeur dans un champ de formulaire
3. Puis valide sa proposition à l’aide d’un bouton
4. En fonction de la proposition et du nombre à deviner, une ligne vient s’ajouter dans un
div spécifique en indiquant :
• La valeur à deviner est plus petite
• La valeur à deviner est plus grande
• Bravo, vous avez trouvé la bonne valeur
Questions complémentaires :
A. Une fois la valeur trouvée, la partie recommence : un nouveau nombre est calculé et le
contenu du div est vidé
B. Ajouter un compteur permettant de connaitre le nombre d’essais et un message
indiquant ce nombre d’essais lors de la victoire.
C. Au bout d’un certain nombre d’essais, le joueur a perdu et la partie recommence
Décembre 2015Vous pouvez aussi lire
