Institut supérieur des sciences Technologies et
appliquées et de technologie de
Programmation web
Sousse A.U : 2020/2021
TP1 Section : LF-SI-A3
Dhouha Ben Noureddine
Technologies côté client
TP3: Javascript
Troisième étape: Dynamisation de l'interface avec JavaScript
1. Notion de lien vers un fragment
Définition : Un fragment est un élément ou un sous-arbre constitué par un élément et ses sous-
éléments. Lorsqu'un fragment est identifié par l'attribut id d'un élément, on peut définir des liens vers
ce fragment, plutôt que la totalité de la page qui le contient. Pour cela, il suffit de rajouter le caractère
"#" (dièse) à la fin de l'URL, suivi de l'id de l'élément visé. Cela indique au navigateur qu'il doit
défiler dans la page pour que cet élément se retrouve en haut de l'écran (si possible).
Exemple : la balise de lien <a href="#css+js"> permet de se positionner dans cette section (voir code
source de la page).
– Dans les différentes pages de votre CV, identifiez (i.e. spécifiez un attribut id) les éléments
importants de votre bloc principal (par exemple, les titres de niveau 2 ou 3, les items de liste
ou les lignes d'un tableau).
– Dans votre bloc de menu, créez des sous-menus qui pointent vers
les fragments correspondants
– Vérifiez-en le bon fonctionnement
2. Ajout de JavaScript
– "Sortez" les sous-menus du menu principal : créez de nouveaux blocs, identifiez-les et placez
chaque sous-menu lié à une page Web dans l'un de ces blocs
– Après avoir vérifié leur bon fonctionnement, faites-les disparaître à l'aide de la
propriété visibility.
– Faites en sorte que les sous-menus apparaissent quand la souris passe au-dessus des liens sur
les pages principales de votre menu et disparaissent quand la souris s'éloigne. Pour cela :
1. Créez des fonctions JavaScript permettant de faire apparaître et disparaître un élément
1
2. Insérez ces fonctions dans l'en-tête de la page dans un élément <script
type="text/javascript">...</script>
3. Rajoutez des attributs onMouseOver et onMouseOut à vos éléments du menu qui
appellent ces fonctions en leur passant en paramètre les id des sous-menus
correspondants
4. Positionnez les sous-menus pour qu'ils s'affichent dans l'espace rajouté dans le menu
dans la question sur les transitions ; au besoin, modifiez vos transitions pour que
l'affichage des sous-menus coïncide avec la fin de l'allongement du menu.
3. Validation de formulaire de la page [Link] avec JavaScript
Utilisez le JavaScript pour à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le
navigateur affiche un message d'erreur. Pour cela :
1. Ecrivez un code script permettant de vérifier le champ Nom et prénom est écrit en
majuscules seulement.
2. Ecrivez un code script permettant de vérifier le champ Mail est écrit en forme correcte.
// Chaque fois que l'utilisateur tente d'envoyer les données, on vérifie que le champ
email est valide
3. Ecrivez un code script permettant de vérifier le champ Téléphone est écrit en nombre
seulement.
4. Ecrivez un code script permettant de vérifier le champ Sujet est écrit en chaine de
caractères.
5. Ecrivez un code script permettant de vérifier le champ Message est écrit en chaine de
caractères.
6. Si l'un des inputs est invalide, on affiche un message d'erreur personnalisé lorsqu'on
clique sur le bouton Envoyer message.
4. Utilisation d'une feuille existante
– Allez sur le site [Link] et choisissez une feuille de style adaptée à la
présentation de votre CV.
– Modifiez votre fichier XHTML pour qu'il fasse référence à cette feuille de style et pour
qu'il applique correctement les styles qui y sont définis.
– Sauvegardez ces fichiers dans un nouveau dossier pour conserver les deux versions de
votre site.