Matière :Prog Web2
Auditoire : 1ère Année INF
Atelier 1
Exercice1
Ecrire le code javascript permettant d’afficher le message « bonjour info 1 », d’une manière
a- Interne dans un fichier .HTML.
b- Externe au fichier .HTML, dans un fichier séparé .JS.
Exercice2
Utiliser JavaScript pour saisir le nom d’un département puis afficher les différentes
spécialités.
Exercice3
Ecrire le code JavaScript qui permet d’afficher votre nom, prénom et âge (utiliser la fonction
prompt pour saisir le nom, le prénom et l’année de naissance).Utiliser une fonction pour le
calcul de l’âge.
Exercice4
Développer un menu vertical avec les feuilles de style
1) Ecrire une pageHTML5([Link]) qui contient une liste non ordonnée composée par les
éléments suivants :
Informations personnelles
Matières étudiées
Formations
Stages
Langues
Divers
Sachant que chaque élément de cette liste est un lien hypertexte respectivement vers les pages
suivantes:
[Link], [Link], [Link], [Link], [Link] et [Link]
2) Ecrire le fichier [Link] et l’appliquer à la page [Link] dont le contenu est présenté ci-
après.
article, aside, header, footer, nav {
display: block;
}
body header {
width:1000px;
height:50px;
color:hotpink;
}
body article {
width:1000px;
height:400px;
background-color:white;
}
body footer {
width:1000px;
height:50px;
color:hotpink;
}
article aside {
width:200px;
height:400px;
background-color:lightgreen;
float: left;
padding: 2px;
}
article aside navul{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
article aside nav a {
display: block;
text-decoration: none;
padding: 3px;
width: 160px;
border-bottom: 1px solid #eee;
article aside nav a:link, a:visited
{
color: blue;
text-decoration: none;
}
article aside nav a:hover {
background-color: white;
}
3) Ajouter les scripts nécessaires pour :
Afficher le nom, le prénom et l’âge dans la page « Informations personnelles »
Afficher les différentes spécialités par département dans la page « Etudes ».
4) Ecrire une fonction JavaScript permettant d’afficher les propriétés de votre navigateur dans
la page « Divers ».
5) Ajouter dans la page « Informations Personnelles » une nouvelle fenêtre intitulée « fen1 »
ayant comme hauteur 300 et comme largeur 600. Avec options d’affichage de la barre d’outils
et de la barre d’état. Dans cette fenêtre afficher le nom le prénom et l’âge.
6) Ajouter le code JavaScript permettant de visualiser dans une alerte quelques propriétés du
document : sa couleur, le titre et la date de dernière modification. Changer le titre de votre
document qui sera « Page d’accueil »au lieu de « [Link] ».
Écrire le code JavaScript qui, lorsque on clique sur un lien, un nouveau texte apparaîtra au
lieu de l’ancien, dans la même page HTML.
7) Ecrire le script nécessaire permettant de changer les couleurs des liensdans la page
[Link] vert et ceux visités en rouge.
8) Ajouter dans la page « Informations Personnelles » votre adresse dans un paragraphe ayant
l’identifiant "Adr".Puis écrire une fonction qui utilise prompt pour saisirune nouvelle adresse
et modifier l’élément identifié par "Adr" (en utilisant innerHTML).
La fonction doit être appelée lors d’un clic sur un lien.
Exercice 5
Ajouter un code JavaScript,dans la page d’accueil, qui lorsque la souris passe sur un liendu
menu, apparaître la destination de ce lien dans le statut de la fenêtre.
Puis écrire le code JavaScript qui permet de Changer une image de l’arrière plan par
exempleen cliquant sur cette image.
Exercice 6
Dans chaque page, créer deux boutons qui permettent d'aller en avant et en arrière dans
l'historique des pages visitées ; ils sont équivalents aux boutons correspondants du navigateur.
Puis écrire le code JavaScript pour les faire naviguer correctement.
Dans la page « Matières étudiées » Ajouter des alertes :
au chargement de la page,
quand on quitte la page,
quand on passe sur une image (prenant le sigle de l’ISET),
quand on clique sur un bouton,
Modifier les boutons :
changer la couleur de fond quand on clique sur un bouton,
changer aussi l'apparence du bouton,
ajouter un bouton qui permette de revenir à la normale.
Modifier des images :
changer une image par une autre quand la souris passe dessus,
remettre l'image d'origine quand la souris quitte l'image.